侧边栏改成图标样式

Posted 2020-10-10 小闹心lu

需求如下：

将左侧的菜单样式改成右侧的样式，页面左下角有一个箭头，可以来回切换。

首先，先找到代码，将箭头添加上，样式也要相应的加上，接下来就是绑定点击事件。

我的思路是：写上两套不同的css，然后来回切换的时候只要更改类名就可以了，下面附上我做的过程。

1、在index.html中添加<span class="arrow" onclick=”arrowClick()”>></span>下方箭头部分；在app.css中加入箭头样式。

/*菜单栏的箭头*/

 1 .arrow {
 2  
 3  display: inline-block;
 4  
 5  width: 40px;
 6  
 7  height:40px;
 8  
 9   background-color: #000;
10  
11  border-radius: 8px;
12 
13  font-size:20px;
14  
15  color:#fff;
16  
17  line-height: 40px;
18  
19  text-align: center;
20  
21  position: fixed;
22  
23  bottom: 50px;
24  
25  left:10px;
26  
27  cursor:pointer;
28  
29  }

View Code

2、在app.js中给箭头加上点击事件

 1 function arrowClick(){
 2 
 3     if($(\'.arrow\').text()==\'<\'){
 4 
 5         $(\'.arrow\').text(\'>\');
 6 
 7         // 缩成图标
 8 
 9         $(\'.sidebar-header h1\').css(\'display\',\'none\');//隐藏头部标题
10 
11         $(\'#sidebar\').css(\'width\',\'55px\');
12 
13         $(\'#nav_menu_list\').removeClass(\'sidebar-menu\').addClass(\'menu\');
14 
15         $(\'#nav_menu_list > ul\').css(\'width\',\'55px\');
16 
17         $(\'#content\').css(\'marginLeft\',\'55px\');
18 
19         $(\'#nav_menu_list > ul > li\').css(\'hight\',\'55px\');
20 
21         $(\'#nav_menu_list > ul > li > a > span\').addClass(\'spanhide\');
22 
23         $(\'#nav_menu_list > ul > li i\').css({\'fontSize\':\'25px\',\'color\':\'#fff\'});
24 
25         $(\'.menu > ul > li\').each(function(index){
26 
27             $(this).unbind(\'click\');
28 
29             $(this).mouseover(function(e) {
30 
31                  e.preventDefault();
32 
33                 $(this).css(\'position\',\'relative\');
34 
35                 $(this).find(\'ul\').addClass(\'menu_ul\').css(\'display\',\'block\');
36 
37             });
38 
39             $(this).mouseout(function() {
40 
41                 $(this).find(\'ul\').removeClass(\'menu_ul\').css(\'display\',\'none\');
42 
43             });
44 
45         })
46 
47     }else{
48 
49         $(\'.arrow\').text(\'<\');
50 
51         $(\'.sidebar-header h1\').css(\'display\',\'block\');
52 
53         $(\'#sidebar\').css(\'width\',\'180px\');
54 
55         $(\'#nav_menu_list > ul\').css(\'width\',\'180px\');
56 
57         $(\'#nav_menu_list\').removeClass(\'menu\').addClass(\'sidebar-menu\');
58 
59         $(\'#content\').css(\'marginLeft\',\'180px\');
60 
61         $(\'#nav_menu_list > ul > li > a > span\').removeClass(\'spanhide\');
62 
63         $(\'#nav_menu_list > ul > li\').css(\'hight\',\'0px\');
64 
65         $(\'#nav_menu_list > ul > li i\').css({\'fontSize\':\'12px\',\'color\':\'#939da8\'});
66 
67         $(\'.sidebar-menu > ul > li\').unbind(\'mouseover\');//解绑之前绑定的移入移出事件
68 
69         $(\'.sidebar-menu > ul > li\').unbind(\'mouseout\');
70 
71  
72 
73     }
74 
75 }

View Code

在缩成图标的样式下，类名为‘menu’,放开的情况下为‘sidebar-menu’;

3、切换为图标模式下，给子菜单重新设置样式。

  1 .menu ul,.menu li {
  2 
  3   list-style: none;
  4 
  5   padding:0;
  6 
  7 }
  8 
  9 /*给各模块添加颜色*/
 10 
 11 .menu > ul > li:nth-child(1) {background-color: #FB6B5B;}
 12 
 13 .menu > ul > li:nth-child(2) {background-color: #FFC333;}
 14 
 15 .menu > ul > li:nth-child(3) {background-color: #8EC165;}
 16 
 17 .menu > ul > li:nth-child(4) {background-color: #48A75B;}
 18 
 19 .menu > ul > li:nth-child(5) {background-color: #4CC0C1;}
 20 
 21 .menu > ul > li:nth-child(6) {background-color: #27A9E3;}
 22 
 23 .menu > ul > li:nth-child(7) {background-color: #6FE6F7;}
 24 
 25 .menu > ul > li:nth-child(8) {background-color: #06EA8A;}
 26 
 27 .menu > ul > li:nth-child(9) {background-color: #008C45;}
 28 
 29 .menu > ul > li:nth-child(10) {background-color: #FF8A41;}
 30 
 31 .menu > ul > li:nth-child(11) {background-color: #CDFF86;}
 32 
 33  
 34 
 35 /*添加ul悬浮在右侧，鼠标移入图标的时候显示*/
 36 
 37 .menu>ul>li {
 38 
 39   position: relative;
 40 
 41   height: 55px;
 42 
 43   text-align: center;
 44 
 45   padding-top: 15px;
 46 
 47 }
 48 
 49 .menu>ul>li>ul {
 50 
 51   position: absolute;
 52 
 53   left:55px;
 54 
 55   top:0px;
 56 
 57   width: 100px;
 58 
 59   z-index: 300;
 60 
 61 }
 62 
 63 .menu > ul li ul{background-color: #1e242b;}
 64 
 65 .menu > ul li ul li a{color:#939da8}
 66 
 67 .menu > ul li ul li a:hover, .menu > ul li ul li.active a{color: #fff;background-color: #28b779;}
 68 
 69 .menu li ul li a:hover,
 70 
 71 .menu li ul li.open a{color: #FF6C60;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;-ms-transition: all 0.3s ease;transition: all 0.3s ease;display: block;}
 72 
 73 .menu > ul > li > a > .label{margin: 0 20px 0 0;float: right;padding: 3px 5px 2px;}
 74 
 75 .menu > ul li ul{display: none;margin: 0;padding: 0;}
 76 
 77 .menu > ul li.open ul{display: block;}
 78 
 79 .menu > ul li ul li a{padding: 10px 0 10px 10px;display: block;color: #777777;}
 80 
 81 .menu > ul li ul li:first-child a{border-top: 0;}
 82 
 83 .menu > ul li ul li:last-child a{border-bottom: 0;}
 84 
 85 .menu > ul > li.active{background-color: #27a9e3;border-bottom: 1px solid #27a9e3;border-top: 1px solid #27a9e3;}
 86 
 87 .menu > ul > li.active > a {
 88 
 89     background: url("../img/menu-active.png") no-repeat right center !important;
 90 
 91     text-decoration: none;
 92 
 93 }
 94 
 95 .menu > ul > li > a {
 96 
 97   display: block;
 98 
 99   width: 100%;
100 
101   height: 100%;
102 
103 }

View Code

需要注意的是来回切换要解绑之前绑定的点击（鼠标移入移出）事件。