CSS高级篇：响应式导航条

我很懒，懒到什么程度，算了，懒得说了......

直接上代码

body:

 

 1 <div class="container">
 2     <ul>
 3         <li>首页</li>
 4         <li>贴吧</li>
 5         <li>糯米</li>
 6         <li>翻译</li>
 7         <li>地图</li>
 8         <li>图片</li>
 9         <li>知道</li>
10     </ul>
11     <div class="menu">〓</div>
12 </div>    

css:

 1 <style type="text/css">
 2     * {
 3         margin: 0px;
 4         padding: 0px;
 5     }
 6             
 7     .container {
 8         background-color: #333;
 9         height: 48px;
10         position: relative;
11     }
12             
13     .container ul {
14         padding-left: 100px;
15     }
16             
17     .container ul li {
18         list-style: none;
19         float: left;
20         width: 100px;
21         color: rgba(255, 255, 255, 0.8);
22         text-align: center;
23         height: 48px;
24         line-height: 48px;
25         cursor: pointer;
26     }
27             
28     .container ul li:hover {
29         color: rgba(255, 255, 255, 1);
30     }
31             
32     .container .menu {
33         width: 40px;
34         height: 30px;
35         border: 2px solid white;
36         position: absolute;
37         line-height: 30px;
38         text-align: center;
39         border-radius: 6px;
40         color: white;
41         cursor: pointer;
42         right: 40px;
43         top: calc((48px - 34px) / 2);
44         display: none;
45         -webkit-user-select: none;
46     }
47             
48     @media all and (max-width: 767px) {
49             .container .menu {
50             display: block;
51         }
52     .container ul {
53             position: absolute;
54             top: 50px;
55             padding-left: 0px;
56             right: 10px;
57             display: none;
58         }
59         .container ul li {
60             float: none;
61             background-color: #333;
62             border-radius: 4px;
63             margin-bottom: 1px;
64         }
65         .container ul li:hover {
66             background-color: #333;
67             opacity: 0.9;
68         }
69     }
70 </style>

额，由于出了点小问题，so，加了点script代码

script:

 1 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 2     <script type="text/javascript">
 3         $(".menu").toggle(
 4             function() {
 5                 $(this).css("background-color", "rgba(255,255,255,0.5)");
 6                 $(".container ul").slideDown(200);
 7             },
 8             function() {
 9                 $(this).css("background-color", "transparent");
10                 $(".container ul").slideUp(200);
11             }
12         );
13         $(window).resize(function() {
14             if($(this).width() > 767) $(".container ul").show(500);    
15         });
16 </script>

 

PC端效果：

移动端效果：

OK，完活。 O(∩_∩)O

转载于:https://www.cnblogs.com/WHongy/p/7832824.html