做一个自动隐藏的侧边栏吧！

这个做Web网页的系列文章，我会慢慢更新的。这也是对我使用Web前端技术的练习和总结（顺便练练用Markdown的写作）。如果大家觉得好的话，欢迎收藏、点赞、关注！

这个演示的图片如下：
动态图片有点大，所以一时打开会比较卡凑活着看吧：http://47.96.224.250/m/demo.gif
也可以自己把下面两个图像脑洞补帧：

 

 

 

演示的链接如下：
服务器地址：http://47.96.224.250/m/1.html
由于我没有使用响应式布局，可能排版会乱，建议使用电脑观看或者手机浏览器UA调整成电脑模式

1.搭建网页基本框架，并引入外部样式表和脚本

  • 页面结构大致是这样(详见底部源码)：
body>(div.sidebar>li*n>a.icon)+a.btn
  • 接下来引用下外部脚本：
    因为需要有点击事件，所以这里我直接采用JQuery来实现。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

我参考了w3school jQuery教程，直接使用最简单的CDN，来引用外部的脚本。

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

使用 Google 的 CDN：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

 

使用 Microsoft 的 CDN：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

 

再给几份文档供参考：
jQuery 教程 | 菜鸟教程
jQuery API 中文文档
jQuery中文网

  • 引入外部样式表：
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">

 

这里采用的是ionicons图标库的图标
我采用的是国外的CDN，国内的也可以使用，参考文档：ionic icon(图标) | 菜鸟教程

<link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">

 

 

2.放入图标，写CSS样式

  • 图标自己上ionicons图标库看看，引用采用的是<a>锚点的class方式引入，不采用官网给的JS脚本标签引入，点开图标下面会显示默认“智能引入”，在上面有个USAGE，滑倒最低有个class引入方法，基本上操作几次，你看看“智能引入”图标英文名字就知道怎么写了。
     
  • 写CSS样式：
    这个这个，具体咱也不好给你讲，你搜搜标签、属性大概就知道什么意思，就会用了（英文字面意思）
    主要讲讲这个：
.btn:before{
    content:'\f32a';
}
.btnc:before{
    content:'\f2c0';
}

 

在html中是这样的：

<a class="btn"></a>

 

那为啥会显示这样的图标呢？

 


因为采用了webfont。
在css里面，如果想使用某个字体，但是又担心用户电脑上没有，就可以使用font-face属性从服务器上引用这组字体。具体怎么用，搜一下font-face就很清楚了。
所以这里图标也采用了十六进制编码格式给“自定义”编码进去了，所以引用后就可以显示，注意这里别忘引用这个“字符库”,放在.btn{}中。

 

font-family: ionicons;

 

参考下这个文档吧：
font-face | 菜鸟教程
我具体获得这个值，是在官网图标库通过开发者工具检查元素得到的。

 


（我觉得这样用简单，当然你也可以用其他方法）

 

3.写JS脚本

由于这个事件很简单，所以直接写到html中就可以了，具体怎么用，在第一中给有jQuery相关文档，可以参考一下！

<script type="text/javascript">
            $('.btn').on('click',function(){
                $('.btn').toggleClass('btnc');
                $('.sidebar').toggleClass('side');
            })
        </script>

 

算了，简要介绍下toggleClass()吧。

  • 定义
    toggleClass()就是所谓的切换效果，对设置或移除被选元素的一个或多个类进行切换。
  • 语法
$(selector).toggleClass(class,switch)

 

 

所以这么一看上面的代码，不就是在点击事件中，把两个模块预先写好的样式更换就行了，so easy对吧！

源代码：

  • index.html:
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>侧边栏</title>
 6         <link rel="stylesheet" href="style.css">
 7         <!--jQuery code-->
 8         <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
 9         <link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">
10     </head>
11     <body>
12         <div class="sidebar">
13             <ul>
14                 <li><a href="" class="icon ion-logo-android"></a></li>
15                 <li><a href="" class="icon ion-logo-playstation"></a></li>
16                 <li><a href="" class="icon ion-logo-windows"></a></li>
17                 <li><a href="" class="icon ion-logo-instagram"></a></li>
18                 <li><a href="" class="icon ion-logo-python"></a></li>
19             </ul>
20         </div>
21         <a class="btn"></a>
22         <script type="text/javascript">
23             $('.btn').on('click',function(){
24                 $('.btn').toggleClass('btnc');
25                 $('.sidebar').toggleClass('side');
26             })
27         </script>
28     </body>
29 </html>

 

  • style.css:
 1 @import 'https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css';
 2 body,html{
 3     margin: 0;
 4     padding: 0;
 5     height: 100%;
 6     width: 100%;
 7     font-family: sans-serif;
 8 }
 9 .sidebar{
10     float: left;
11     width: 100px;
12     height: 100%;
13     margin-left: -100px;
14     background: #2c3e50;
15     overflow:hidden;
16     transition: 0.8s all;
17 }
18 .side{
19     margin-left: 0;
20 }
21 .sidebar ul{
22     margin: 0;
23     padding: 0;
24 }
25 .sidebar ul li{
26     list-style: none;
27 }
28 .sidebar ul li a{
29     text-decoration: none;
30     color: white;
31     height: 80px;
32     width: 100%;
33     font-size: 40px;
34     line-height: 80px;
35     text-align: center;
36     display: block;
37     transition: 0.6s all;
38 }
39 .sidebar ul li a:hover{
40     background: #34495e;
41 }
42 .btn{
43     float: left;
44     padding: 0 10px;
45     font-size: 40px;
46     text-decoration: none;
47     color: #2c5e50;
48     font-family: ionicons;
49     cursor: pointer;
50 }
51 .btn:before{
52     content:'\f32a';
53 }
54 .btnc:before{
55     content:'\f2c0';
56 }

 

posted @ 2019-05-13 16:31  叶筱Windy  阅读(1618)  评论(0)  编辑  收藏  举报