下拉菜單demo---參考阿里雲首頁頂部下拉菜單


前言:

最近開始學習html+css,准備仿照各大網站寫一些demo。

正文:

分析階段:

如下圖:

 

鏈接來自於: 

阿里雲:https://www.aliyun.com/

 


實現過程:

(一)用css3的transition屬性來實現導航菜單的漸變效果。

 .head:hover {
            background-color: #00a2ca;
            transition: background-color 0.5s;
        }

 

在0.5秒內背景顏色轉化成#00a2ca。

引用w3c上的例子:

 1 div
 2 {
 3 width:100px;
 4 height:100px;
 5 background:blue;
 6 transition:width 2s;
 7 -moz-transition:width 2s; /* Firefox 4 */
 8 -webkit-transition:width 2s; /* Safari and Chrome */
 9 -o-transition:width 2s; /* Opera */
10 }
11 
12 div:hover
13 {
14 width:300px;
15 }

 

鼠標移動到div上時,div寬度從100px變為300px。如果改成:

 1 div
 2 {
 3 width:100px;
 4 height:100px;
 5 background:blue;
 6 
 7 }
 8 
 9 div:hover
10 {
11 width:300px;
12 transition:width 2s;
13 -moz-transition:width 2s; /* Firefox 4 */
14 -webkit-transition:width 2s; /* Safari and Chrome */
15 -o-transition:width 2s; /* Opera */
16 }

也能實現同樣的效果,所以可知transition要配合鼠標單擊、獲得焦點、被點擊或對元素任何改變事件來使用,實現圓滑地以動畫效果改變CSS的屬性值。

(二)在下拉框隱藏這塊的實現是采用絕對定位+堆疊順序(z-index)來實現

1 /*采用絕對定位的堆疊順序*/
2         .menu-drop {
3             position: absolute;
4             left: 0;
5             top: 80px;
6             width: 1000px;
7             z-index: 1;
8             height: 0;
9         }

 

當要顯示下拉框的時候再將z-index屬性值設為20(背景z-index設為10),也可以使用display:none;和display:block;來實現下拉框。

下拉框js代碼:

 1 $(document).ready(function () {
 2             //顯示菜單下拉框
 3             $(".head-drop, .menu-drop").mouseover(function () {
 4                 if ($(".menu-drop").css("height") == "0px") {
 5                     $(".menu-drop").css("position", "absolute").css("background-color", "#FFF").css("z-index", "20");
 6                     $(".menu-drop").animate({height: "319px"}, 100);
 7                 }
 8             })
 9             //隱藏菜單下拉框
10             $(".head-drop").mouseleave(function () {
11                 $(".menu-drop").css("position", "absolute").css("height", "0").css("z-index", "1");
12             })
13             //下拉框鏈接
14             $(".pro-menu li").mouseover(function () {
15                 var index = $(".pro-menu li").index(this);
16                 $(this).find("a").css("color","#00a2ca");
17                 $(this).siblings().find("a").css("color","#fff");
18                 $(".content div:eq(" + index + ")").show();
19                 $(".content div:eq(" + index + ")").siblings().hide();
20             })
21         })

 

最后的實現效果:

最后附上具體代碼:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6     <script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
  7     <title>阿里雲head-drop</title>
  8     <script>
  9         $(document).ready(function () {
 10             //顯示菜單下拉框
 11             $(".head-drop, .menu-drop").mouseover(function () {
 12                 if ($(".menu-drop").css("height") == "0px") {
 13                     $(".menu-drop").css("position", "absolute").css("background-color", "#FFF").css("z-index", "20");
 14                     $(".menu-drop").animate({height: "319px"}, 100);
 15                 }
 16             })
 17             //隱藏菜單下拉框
 18             $(".head-drop").mouseleave(function () {
 19                 $(".menu-drop").css("position", "absolute").css("height", "0").css("z-index", "1");
 20             })
 21             //下拉框鏈接
 22             $(".pro-menu li").mouseover(function () {
 23                 var index = $(".pro-menu li").index(this);
 24                 $(this).find("a").css("color","#00a2ca");
 25                 $(this).siblings().find("a").css("color","#fff");
 26                 $(".content div:eq(" + index + ")").show();
 27                 $(".content div:eq(" + index + ")").siblings().hide();
 28             })
 29         })
 30     </script>
 31     <style>
 32         body {
 33             margin: 0;
 34         }
 35 
 36         ul {
 37             list-style: none;
 38             margin: 0;
 39             padding: 0;
 40         }
 41 
 42         a {
 43             text-decoration: none;
 44         }
 45 
 46         .nav > li > a {
 47             display: block;
 48             color: #000000;
 49             padding: 0 20px;
 50         }
 51 
 52         .nav > li {
 53             position: relative;
 54             float: left;
 55             text-align: center;
 56         }
 57 
 58         .warp {
 59             padding: 0;
 60             margin: 0;
 61             font-size: 20px;
 62         }
 63 
 64         .head {
 65             height: 80px;
 66             line-height: 80px;
 67             cursor: pointer;
 68         }
 69 
 70         .head:hover {
 71             background-color: #00a2ca;
 72             transition: background-color 0.5s;
 73         }
 74 
 75         .head:hover a {
 76             color: #fff;
 77             cursor: default;
 78         }
 79 
 80         .container {
 81             position: relative;
 82             height: 100%;
 83             max-width: 1200px;
 84             min-width: 1000px;
 85             margin: 0 auto;
 86         }
 87 
 88         /*采用絕對定位的堆疊順序*/
 89         .menu-drop {
 90             position: absolute;
 91             left: 0;
 92             top: 80px;
 93             width: 1000px;
 94             z-index: 1;
 95             height: 0;
 96         }
 97         .pro-menu {
 98             height: 100%;
 99             width: 200px;
100             line-height: 40px;
101             font-size: 14px;
102             float: left;
103             background-color: #dddddd;
104         }
105 
106         .pro-menu a {
107             position: relative;
108             display: block;
109         }
110 
111         .pro-menu a:before {
112             content: ".";
113             display: block;
114             height: 0;
115             overflow: hidden;
116         }
117 
118         .pro-menu a:after {
119             content: ".";
120             display: block;
121             height: 0;
122             overflow: hidden;
123             clear: both;
124         }
125 
126         .pro-menu a span {
127             position: absolute;
128             right: 0;
129             top: 5%;
130         }
131 
132         .pro-menu ul {
133             height: 100%;
134         }
135         .menu-drop-content {
136             padding: 10px 0 0 10px;
137             overflow: hidden;
138             height: 97%;
139         }
140         .content {
141             background-color: #6ce26c;
142             height: 100%;
143         }
144     </style>
145 </head>
146 <body>
147 <div class="warp">
148     <div class="head">
149         <div class="container">
150             <ul class="nav">
151                 <li class="head-drop"><a href="#">產品</a>
152                     <div class="menu-drop">
153                         <div class="pro-menu">
154                             <ul>
155                                 <li><a href="">彈性計算<span>></span></a></li>
156                                 <li><a href="">數據庫<span>></span></a></li>
157                                 <li><a href="">存儲與CDN<span>></span></a></li>
158                                 <li><a href="">網絡<span>></span></a></li>
159                                 <li><a href="">雲盾<span>></span></a></li>
160                                 <li><a href="">大規模計算<span>></span></a></li>
161                                 <li><a href="">管理與監控<span>></span></a></li>
162                                 <li><a href="">移動服務<span>></span></a></li>
163                             </ul>
164                         </div>
165                         <div class="menu-drop-content">
166                             <div class="content">
167                                 <div style="display: block;">彈性計算</div>
168                                 <div style="display: none">數據庫</div>
169                                 <div style="display: none;">存儲與CDN</div>
170                                 <div style="display: none">網絡</div>
171                                 <div style="display: none">雲盾</div>
172                                 <div style="display: none">大規模計算</div>
173                                 <div style="display: none">管理與監控</div>
174                                 <div style="display: none">移動服務</div>
175                             </div>
176                         </div>
177                     </div>
178                 </li>
179                 <li><a href="#">解決方案</a></li>
180                 <li><a href="#">軟件市場</a></li>
181                 <li><a href="#">開發者社區</a></li>
182                 <li><a href="#">服務培訓</a></li>
183                 <li><a href="#">合作與生態</a></li>
184                 <li><a href="#">大數據</a></li>
185             </ul>
186         </div>
187     </div>
188     <div style="width:100%;height: 500px;position: absolute;z-index: 10;background-color: #FFFFFF"></div>
189 </div>
190 </body>
191 </html>
View Code

 

关注微信公众号

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com