通過之前的站點導航案例，分離下拉選單的共性和特性
dropdown.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" href="../css/base.css"> <style> /*分離出dropdown公共樣式*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } /*分離出nav的dropdown獨有樣式*/ .menu .dropdown-toggle{ display: block; padding:0 16px 0 12px; border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .menu .dropdown-arrow{ width:8px; height:6px; background-image:url(../img/dropdown-arrow.png); margin-left:8px; vertical-align: middle; } .menu .dropdown-list{ border:1px solid #cdd0d4; background-color: #fff; top:100%; } .menu-item{ height:30px; line-height:30px; padding:0 12px; } /*滑鼠移入*/ .menu-item:hover{ background-color: #f3f5f7; } .menu-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:#cdd0d4; } .menu-active .dropdown-arrow{ background-image:url(../img/dropdown-arrow-active.png); } .menu-active .dropdown-list{ display: block; } </style> </head> <body> <div class="menu dropdown" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <script src="../js/jquery.js"></script> <script> // 這種方法不通用，需要使用函式，將需要下拉顯示的元素通過引數傳入 $(".dropdown").hover(function(){ var ui=$(this);//快取 //.data(屬性名)和attr("data-屬性名") 效果相同 //可以獲取data-開頭的屬性值 ui.addClass(ui.data("active")+"-active"); },function(){ ui.removeClass(ui.attr("data-active")+"-active"); });</script> </body> </html>
效果圖
但是，這種js的寫法不通用，建議使用函式，并將目標元素通過引數傳入
js部分代碼改為：
<script>
function dropdown(elem){
var elem=$(elem);
var activeClass=elem.data("active")+"-active";
elem.hover(function(){
elem.addClass(activeClass);
},function(){
elem.removeClass(activeClass);
})
}
//獲取到的是陣列，因此取第一個
dropdown($(".dropdown")[0]);
</script>
如果此時頁面上有多個下拉選單（將dropdown復制一份）
使用each來回圈進行呼叫函式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" href="../css/base.css"> <style> /*分離出dropdown公共樣式*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } /*分離出nav的dropdown獨有樣式*/ .menu .dropdown-toggle{ display: block; padding:0 16px 0 12px; border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .menu .dropdown-arrow{ width:8px; height:6px; background-image:url(../img/dropdown-arrow.png); margin-left:8px; vertical-align: middle; } .menu .dropdown-list{ border:1px solid #cdd0d4; background-color: #fff; top:100%; } .menu-item{ height:30px; line-height:30px; padding:0 12px; } /*滑鼠移入*/ .menu-item:hover{ background-color: #f3f5f7; } .menu-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:#cdd0d4; } .menu-active .dropdown-arrow{ background-image:url(../img/dropdown-arrow-active.png); } .menu-active .dropdown-list{ display: block; } </style> </head> <body> <div class="menu dropdown fl" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <div class="menu dropdown fl" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <script src="../js/jquery.js"></script> <script> function dropdown(elem){ var elem=$(elem); var activeClass=elem.data("active")+"-active"; elem.hover(function(){ elem.addClass(activeClass); },function(){ elem.removeClass(activeClass); }) } //回圈呼叫 $(".dropdown").each(function(){ dropdown($(this)); }) </script> </body> </html>
這樣寫的代碼不夠優雅，決定改用jquery的插件形式來撰寫
<script>
function dropdown(elem){
var elem=$(elem);
var activeClass=elem.data("active")+"-active";
elem.hover(function(){
elem.addClass(activeClass);
},function(){
elem.removeClass(activeClass);
})
}
//插件形式
$.fn.extend({
dropdown:function(){
return this.each(function(){//遍歷陣列
dropdown(this);
});
}
});
//插件形式呼叫
$(".dropdown").dropdown();
</script>
為了插件的復用，將js代碼單獨放到一個js檔案中
為了不暴露在全域作用域下，使用匿名函式自執行的方式創建區域作用域
dropdown.js
(function($){ 'use strict';//使用嚴格模式 function dropdown(elem){ var elem=$(elem); var activeClass=elem.data("active")+"-active"; elem.hover(function(){ elem.addClass(activeClass); },function(){ elem.removeClass(activeClass); }) } //插件形式 $.fn.extend({ dropdown:function(){ return this.each(function(){//遍歷陣列 dropdown(this); }); } }); })(jQuery); //為了防止$符發生沖突，將jQuery作為引數傳入，則$符作為內部變數，不會發生沖突
根據封裝好的dropdown下拉串列插件，改寫之前寫好的導航中的下拉串列
改寫的index.html
<!DOCTYPE html> <html lang="zh-CN"><!-- 設定簡體中文 --> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/common.css"> <!-- css一般放在DOM加載前，防止DOM裸奔 --> </head> <body> <!-- 導航 --> <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"><a href="javascript:;" class="nav-site-login">親，請登錄</a></li> <li class="fl"><a href="javascript:;" class="nav-site-reg link">免費注冊</a></li> <li class="fl"><a href="#" class="nav-site-shop link">手機逛慕淘</a></li> </ul> <ul class="fr"> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </li> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">收藏夾<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">收藏的寶貝</a></li> <li class="menu-item"><a href="#">收藏的店鋪</a></li> </ul> </li> <li class="fl dropdown"> <a href="javascript:;" class="nav-site-cat link">商品分類</i></a> </li> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">賣家中心<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">免費開店</a></li> <li class="menu-item"><a href="#">已賣出的寶貝</a></li> <li class="menu-item"><a href="#">出售中的寶貝</a></li> <li class="menu-item"><a href="#">賣家服務市場</a></li> <li class="menu-item"><a href="#">賣家培訓中心</a></li> <li class="menu-item"><a href="#">體驗中心</a></li> </ul> </li> <li class="nav-site-service fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">聯系客服<i class="dropdown-arrow"></i></a> <ul class="dropdown-list dropdown-right"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </li> </ul> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> //短路操作，如果cdn的jquery沒有參考成功，則會執行后面一句，引入本地jquery //括號中的<\/script>標簽會被當做當前標簽的結束標簽，因此需要轉義 window.jQuery || document.write('<script src="https://www.cnblogs.com/chenyingying0/p/js/jquery.js"><\/script>'); </script> <script src="js/dropdown.js"></script> <script src="js/index.js"></script> </body> </html>
index.css中與下拉組件dropdown有關的內容全部洗掉，統一添加到common.css
將下拉組件作為公共組件
common.css
/*公共樣式 */ .container{ width:1200px; margin:0 auto; } .link{ color:#4d555d; } .link:hover{ color:#f01414; } .fl{ float:left; } .fr{ float:right; } /*dropdown下拉組件*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } /*menu的dropdown獨有樣式*/ .menu .dropdown-toggle{ display: block; padding:0 16px 0 12px; border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .menu .dropdown-arrow{ width:8px; height:6px; background-image:url(../img/dropdown-arrow.png); margin-left:8px; vertical-align: middle; } .menu .dropdown-list{ border:1px solid #cdd0d4; background-color: #fff; top:100%; } .menu-item{ height:30px; line-height:30px; padding:0 12px; white-space: nowrap; } /*滑鼠移入*/ .menu-item:hover{ background-color: #f3f5f7; } .menu-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:#cdd0d4; } .menu-active .dropdown-arrow{ background-image:url(../img/dropdown-arrow-active.png); } .menu-active .dropdown-list{ display: block; }
此時的index.js來呼叫插件
//插件形式呼叫 $(".dropdown").dropdown();
效果沒有發生變化
下拉箭頭部分現在是參考的圖片
缺點：
1、多次HTTP請求，影響性能
2、不方便修改和維護
還有一種方法是將圖片url轉為BASE64編碼
優點：減少HTTP請求
缺點：
1、IE6/7不兼容
2、手動修改更麻煩
3、比原圖略大
4、不能快取
還有一種方法是使用css繪制，代碼如下：
優點：
1、減少HTTP請求
2、兼容性還可以
3、簡單不麻煩
缺點：
1、transparent在IE6不兼容
2、樣式有限
最后，我們選擇的方式是：圖示字體
優點：
1、矢量圖，不失真
2、減少HTTP請求
3、兼容性好
4、簡單易操作
缺點：
1、基本用作小圖示
2、有時無法完全與設計稿一致
圖示庫：阿里巴巴矢量圖示庫 https://www.iconfont.cn/
可以使用微博賬號登錄
選好專案所需的所有圖示，添加至購物車，最后下載代碼即可
dropdown.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" href="../css/base.css"> <style> /*分離出dropdown公共樣式*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } /*分離出nav的dropdown獨有樣式*/ .menu .dropdown-toggle{ display: block; padding:0 16px 0 12px; border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .menu .dropdown-arrow{ width:8px; height:6px; background-image:url(../img/dropdown-arrow.png); margin-left:8px; vertical-align: middle; } .menu .dropdown-list{ border:1px solid #cdd0d4; background-color: #fff; top:100%; } .menu-item{ height:30px; line-height:30px; padding:0 12px; white-space: nowrap; } /*滑鼠移入*/ .menu-item:hover{ background-color: #f3f5f7; } .menu-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:#cdd0d4; } .menu-active .dropdown-arrow{ background-image:url(../img/dropdown-arrow-active.png); } .menu-active .dropdown-list{ display: block; } @font-face { font-family: "iconfont"; src: url('../font/iconfont.eot?t=1582272973653'); /* IE9 */ src: url('../font/iconfont.eot?t=1582272973653#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMgAAsAAAAABxAAAALRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFbATYCJAMMCwgABCAFhG0HQRssBsgekiSCCCFEuNlXEQBAPHzt93ru7n5ElURBCR2BR5Bliy51gKpGVNYCG9XxbMSbd+4zPSCMOgTu9Sct57/89MAB8gDg+U2hMJtwk9PLaOlpn+dyehPoQO6qb1lua9nY4/lRL8A4oEDHGrQICiQgT0F2R6CWvJtA25Ik3NGapi7gonAGBeKOLPLApRRRFCnfFOotM4t4zVEzPUnf8Cr+fvy3M1xIapkz8vi1agso+zX5VZFnqjVDIUG9nAvSPDI2AwpxtTVznr2QOHttk0N/eV0R0lLxqiJWmZb6Qf94iahzartgPc0mfvn7coJfFXdIIIM6Co4BTlN2+u4sWkuugcK7XzPWn03hfqHrBFzKHnD9N/PZ4F7P9ffhg8fc2Vs3r7PmkLOEZ8HuotvxoydrARZ8tPZoJtANHTbfLfNt8m1kb0r92n/hum2PejfY0bcssN9up2U/iqlrDF15exnd72H3eLIT35f1BRwJ/n/uTXKjpdzjBd/wyYYk987lMN+Ix9xY6SQYA1D9yB9yEQDktVT2m3/jYS3h8+ig6F+zU8BP8933OFL9KHBL8yaMMVH5U9VgQzG1jjUXXeWrbF+2/QZdCVrXRsUJjP2ZbpnBtYSmWY6kYRFZ0zJZ2M2o6diNuqYDaNukdn7HBGUvSgsbLRKEoZdI+j4jG/pOFvY3aub+om4Y9mg7G/4rdqyG7FZJEc+QBY5PQ1kgBvbszC2p70CiqfG0qI35HkRtchymp6RV87XIQHSJMbYJMYMxDDElOqwh+yFNI9BKiYIEliIxZi1ITcVtD0oRiA7cHEEhPAaxgMZNg2QCwoDD1oxb7fMdEJFJw6M9ooZiD4SykTuH0qVIA8hakwGJHuUemwmiDAyDQRhF6KAa0g3RaAjI2t5NgQiYFNKElFWBVLcZRk0p21v0/9sGbc7KOVLkKJrXiTlpChLymJJ5jVeCMoMREwAAAAA=') format('woff2'), url('../font/iconfont.woff?t=1582272973653') format('woff'), url('../font/iconfont.ttf?t=1582272973653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 14px; font-style: normal;/*i標簽自帶斜體效果*/ -webkit-font-smoothing: antialiased;/*在webkit內核和火狐瀏覽器中，抗鋸齒*/ -moz-osx-font-smoothing: grayscale; } .icon-gouwuche:before { content: "\e613"; } .icon-xialajiantou:before { content: "\e642"; } </style> </head> <body> <div class="menu dropdown fl" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="iconfont icon-xialajiantou"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <div class="menu dropdown fl" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="iconfont icon-xialajiantou"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <script src="../js/jquery.js"></script> <script src="../js/dropdown.js"></script> <script> //插件形式呼叫 $(".dropdown").dropdown(); </script> </body> </html>
但是這種使用 :before 偽類的做法，IE6/7 是不兼容的，因此需要修改代碼
不通過 :before 添加，而是直接手動將代碼寫入 i 標簽中
需要注意的是 斜杠 需要用 &#x 來表示，后面加上分號
原來方法：
.icon-xialajiantou:before { content: "\e642"; }
修改后的方法是：
<i class="iconfont"></i>
使用 transform:rotate(180deg); 實作箭頭的旋轉
使用 transition:all .5s; 實作影片效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" href="../css/base.css"> <style> /*分離出dropdown公共樣式*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } /*分離出nav的dropdown獨有樣式*/ .menu .dropdown-toggle{ display: block; padding:0 16px 0 12px; border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .menu .dropdown-arrow{ margin-left:8px; vertical-align: middle; } .menu .dropdown-list{ border:1px solid #cdd0d4; background-color: #fff; top:100%; } .menu-item{ height:30px; line-height:30px; padding:0 12px; white-space: nowrap; } /*滑鼠移入*/ .menu-item:hover{ background-color: #f3f5f7; } .menu-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:#cdd0d4; } .menu-active .dropdown-list{ display: block; } @font-face { font-family: "iconfont"; src: url('../font/iconfont.eot?t=1582272973653'); /* IE9 */ src: url('../font/iconfont.eot?t=1582272973653#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMgAAsAAAAABxAAAALRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFbATYCJAMMCwgABCAFhG0HQRssBsgekiSCCCFEuNlXEQBAPHzt93ru7n5ElURBCR2BR5Bliy51gKpGVNYCG9XxbMSbd+4zPSCMOgTu9Sct57/89MAB8gDg+U2hMJtwk9PLaOlpn+dyehPoQO6qb1lua9nY4/lRL8A4oEDHGrQICiQgT0F2R6CWvJtA25Ik3NGapi7gonAGBeKOLPLApRRRFCnfFOotM4t4zVEzPUnf8Cr+fvy3M1xIapkz8vi1agso+zX5VZFnqjVDIUG9nAvSPDI2AwpxtTVznr2QOHttk0N/eV0R0lLxqiJWmZb6Qf94iahzartgPc0mfvn7coJfFXdIIIM6Co4BTlN2+u4sWkuugcK7XzPWn03hfqHrBFzKHnD9N/PZ4F7P9ffhg8fc2Vs3r7PmkLOEZ8HuotvxoydrARZ8tPZoJtANHTbfLfNt8m1kb0r92n/hum2PejfY0bcssN9up2U/iqlrDF15exnd72H3eLIT35f1BRwJ/n/uTXKjpdzjBd/wyYYk987lMN+Ix9xY6SQYA1D9yB9yEQDktVT2m3/jYS3h8+ig6F+zU8BP8933OFL9KHBL8yaMMVH5U9VgQzG1jjUXXeWrbF+2/QZdCVrXRsUJjP2ZbpnBtYSmWY6kYRFZ0zJZ2M2o6diNuqYDaNukdn7HBGUvSgsbLRKEoZdI+j4jG/pOFvY3aub+om4Y9mg7G/4rdqyG7FZJEc+QBY5PQ1kgBvbszC2p70CiqfG0qI35HkRtchymp6RV87XIQHSJMbYJMYMxDDElOqwh+yFNI9BKiYIEliIxZi1ITcVtD0oRiA7cHEEhPAaxgMZNg2QCwoDD1oxb7fMdEJFJw6M9ooZiD4SykTuH0qVIA8hakwGJHuUemwmiDAyDQRhF6KAa0g3RaAjI2t5NgQiYFNKElFWBVLcZRk0p21v0/9sGbc7KOVLkKJrXiTlpChLymJJ5jVeCMoMREwAAAAA=') format('woff2'), url('../font/iconfont.woff?t=1582272973653') format('woff'), url('../font/iconfont.ttf?t=1582272973653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 14px; font-style: normal;/*i標簽自帶斜體效果*/ -webkit-font-smoothing: antialiased;/*在webkit內核和火狐瀏覽器中，抗鋸齒*/ -moz-osx-font-smoothing: grayscale; } [class*="-active"] .dropdown-arrow{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } /*提取出過渡樣式，可公用*/ .transition{ -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } </style> </head> <body> <div class="menu dropdown fl" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <div class="menu dropdown fl" data-active="menu"> <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </div> <script src="../js/jquery.js"></script> <script src="../js/dropdown.js"></script> <script> //插件形式呼叫 $(".dropdown").dropdown(); </script> </body> </html>
最后使用圖示字體的方法，來改寫之前的首頁導航下拉選單效果
index.html
<!DOCTYPE html> <html lang="zh-CN"><!-- 設定簡體中文 --> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/common.css"> <!-- css一般放在DOM加載前，防止DOM裸奔 --> </head> <body> <!-- 導航 --> <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"><a href="javascript:;" class="nav-site-login">親，請登錄</a></li> <li class="fl"><a href="javascript:;" class="nav-site-reg link">免費注冊</a></li> <li class="fl"><a href="#" class="nav-site-shop link">手機逛慕淘</a></li> </ul> <ul class="fr"> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">我的慕淘<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </li> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">收藏夾<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">收藏的寶貝</a></li> <li class="menu-item"><a href="#">收藏的店鋪</a></li> </ul> </li> <li class="fl dropdown"> <a href="javascript:;" class="nav-site-cat link">商品分類</i></a> </li> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">賣家中心<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">免費開店</a></li> <li class="menu-item"><a href="#">已賣出的寶貝</a></li> <li class="menu-item"><a href="#">出售中的寶貝</a></li> <li class="menu-item"><a href="#">賣家服務市場</a></li> <li class="menu-item"><a href="#">賣家培訓中心</a></li> <li class="menu-item"><a href="#">體驗中心</a></li> </ul> </li> <li class="nav-site-service fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link">聯系客服<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-right"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </li> </ul> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> //短路操作，如果cdn的jquery沒有參考成功，則會執行后面一句，引入本地jquery //括號中的<\/script>標簽會被當做當前標簽的結束標簽，因此需要轉義 window.jQuery || document.write('<script src="https://www.cnblogs.com/chenyingying0/p/js/jquery.js"><\/script>'); </script> <script src="js/dropdown.js"></script> <script src="js/index.js"></script> </body> </html>
common.css
/*公共樣式 */ .container{ width:1200px; margin:0 auto; } .link{ color:#4d555d; } .link:hover{ color:#f01414; } .fl{ float:left; } .fr{ float:right; } /*提取出過渡樣式，可公用*/ .transition{ -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } /*icon*/ @font-face { font-family: "iconfont"; src: url('../font/iconfont.eot?t=1582272973653'); /* IE9 */ src: url('../font/iconfont.eot?t=1582272973653#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMgAAsAAAAABxAAAALRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFbATYCJAMMCwgABCAFhG0HQRssBsgekiSCCCFEuNlXEQBAPHzt93ru7n5ElURBCR2BR5Bliy51gKpGVNYCG9XxbMSbd+4zPSCMOgTu9Sct57/89MAB8gDg+U2hMJtwk9PLaOlpn+dyehPoQO6qb1lua9nY4/lRL8A4oEDHGrQICiQgT0F2R6CWvJtA25Ik3NGapi7gonAGBeKOLPLApRRRFCnfFOotM4t4zVEzPUnf8Cr+fvy3M1xIapkz8vi1agso+zX5VZFnqjVDIUG9nAvSPDI2AwpxtTVznr2QOHttk0N/eV0R0lLxqiJWmZb6Qf94iahzartgPc0mfvn7coJfFXdIIIM6Co4BTlN2+u4sWkuugcK7XzPWn03hfqHrBFzKHnD9N/PZ4F7P9ffhg8fc2Vs3r7PmkLOEZ8HuotvxoydrARZ8tPZoJtANHTbfLfNt8m1kb0r92n/hum2PejfY0bcssN9up2U/iqlrDF15exnd72H3eLIT35f1BRwJ/n/uTXKjpdzjBd/wyYYk987lMN+Ix9xY6SQYA1D9yB9yEQDktVT2m3/jYS3h8+ig6F+zU8BP8933OFL9KHBL8yaMMVH5U9VgQzG1jjUXXeWrbF+2/QZdCVrXRsUJjP2ZbpnBtYSmWY6kYRFZ0zJZ2M2o6diNuqYDaNukdn7HBGUvSgsbLRKEoZdI+j4jG/pOFvY3aub+om4Y9mg7G/4rdqyG7FZJEc+QBY5PQ1kgBvbszC2p70CiqfG0qI35HkRtchymp6RV87XIQHSJMbYJMYMxDDElOqwh+yFNI9BKiYIEliIxZi1ITcVtD0oRiA7cHEEhPAaxgMZNg2QCwoDD1oxb7fMdEJFJw6M9ooZiD4SykTuH0qVIA8hakwGJHuUemwmiDAyDQRhF6KAa0g3RaAjI2t5NgQiYFNKElFWBVLcZRk0p21v0/9sGbc7KOVLkKJrXiTlpChLymJJ5jVeCMoMREwAAAAA=') format('woff2'), url('../font/iconfont.woff?t=1582272973653') format('woff'), url('../font/iconfont.ttf?t=1582272973653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 14px; font-style: normal;/*i標簽自帶斜體效果*/ -webkit-font-smoothing: antialiased;/*在webkit內核和火狐瀏覽器中，抗鋸齒*/ -moz-osx-font-smoothing: grayscale; } /*dropdown下拉組件*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; line-height:1;/*否則圖示字體會繼承父元素的line-height屬性，占據過多空間*/ } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } [class*="-active"] .dropdown-arrow{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } /*menu的dropdown獨有樣式*/ .menu .dropdown-toggle{ display: block; padding:0 16px 0 12px; border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .menu .dropdown-arrow{ margin-left:8px; vertical-align: middle; } .menu .dropdown-list{ border:1px solid #cdd0d4; background-color: #fff; top:100%; } .menu-item{ height:30px; line-height:30px; padding:0 12px; white-space: nowrap; } /*滑鼠移入*/ .menu-item:hover{ background-color: #f3f5f7; } .menu-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:#cdd0d4; } .menu-active .dropdown-list{ display: block; }
有個問題：由于圖示字體自帶了 3px 的內邊距，導致 dropdown-arrow 到文字的距離，以及到邊框的距離發生了改變，因此需要做細微調整
.menu .dropdown-arrow{ /*margin-left:8px;*/ margin-left:5px;/*減去圖示字體自帶的3px邊距*/ vertical-align: middle; }
.menu .dropdown-toggle{ display: block; /*padding:0 16px 0 12px;*/ padding:0 13px 0 12px;/*減去圖示字體自帶的3px邊距*/ border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72082.html
標籤：Html/Css