|
通過之前的站點導(dǎo)航案例，分離下拉菜單的共性和特性 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; } /*鼠標(biāo)移入*/ .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> // 這種方法不通用，需要使用函數(shù)，將需要下拉顯示的元素通過參數(shù)傳入 $(".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的寫法不通用，建議使用函數(shù)，并將目標(biāo)元素通過參數(shù)傳入 js部分代碼改為： <script>
function dropdown(elem){
var elem=$(elem);
var activeClass=elem.data("active")+"-active";
elem.hover(function(){
elem.addClass(activeClass);
},function(){
elem.removeClass(activeClass);
})
}
//獲取到的是數(shù)組，因此取第一個
dropdown($(".dropdown")[0]);
</script>
如果此時頁面上有多個下拉菜單（將dropdown復(fù)制一份） 使用each來循環(huán)進行調(diào)用函數(shù) <!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; } /*鼠標(biāo)移入*/ .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); }) } //循環(huán)調(diào)用 $(".dropdown").each(function(){ dropdown($(this)); }) </script> </body> </html>
這樣寫的代碼不夠優(yōu)雅，決定改用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(){//遍歷數(shù)組
dropdown(this);
});
}
});
//插件形式調(diào)用
$(".dropdown").dropdown();
</script>
為了插件的復(fù)用，將js代碼單獨放到一個js文件中 為了不暴露在全局作用域下，使用匿名函數(shù)自執(zhí)行的方式創(chuàng)建局部作用域 dropdown.js (function($){ 'use strict';//使用嚴(yán)格模式 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(){//遍歷數(shù)組 dropdown(this); }); } }); })(jQuery); //為了防止$符發(fā)生沖突，將jQuery作為參數(shù)傳入，則$符作為內(nèi)部變量，不會發(fā)生沖突 根據(jù)封裝好的dropdown下拉列表插件，改寫之前寫好的導(dǎo)航中的下拉列表 改寫的index.html <!DOCTYPE html> <html lang="zh-CN"><!-- 設(shè)置簡體中文 --> <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> <!-- 導(dǎo)航 --> <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="#">賣家服務(wù)市場</a></li> <li class="menu-item"><a href="#">賣家培訓(xùn)中心</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">聯(lián)系客服<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./jquery/1.12.4/jquery.min.js"></script> <script> //短路操作，如果cdn的jquery沒有引用成功，則會執(zhí)行后面一句，引入本地jquery //括號中的<\/script>標(biāo)簽會被當(dāng)做當(dāng)前標(biāo)簽的結(jié)束標(biāo)簽，因此需要轉(zhuǎn)義 window.jQuery || document.write('<script src="js/jquery.js"><\/script>'); </script> <script src="js/dropdown.js"></script> <script src="js/index.js"></script> </body> </html> index.css中與下拉組件dropdown有關(guān)的內(nèi)容全部刪除，統(tǒng)一添加到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; } /*鼠標(biāo)移入*/ .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來調(diào)用插件 //插件形式調(diào)用 $(".dropdown").dropdown(); 效果沒有發(fā)生變化
下拉箭頭部分現(xiàn)在是引用的圖片 缺點： 1、多次HTTP請求，影響性能 2、不方便修改和維護
還有一種方法是將圖片url轉(zhuǎn)為BASE64編碼 優(yōu)點：減少HTTP請求 缺點： 1、IE6/7不兼容 2、手動修改更麻煩 3、比原圖略大 4、不能緩存
還有一種方法是使用css繪制，代碼如下：
優(yōu)點： 1、減少HTTP請求 2、兼容性還可以 3、簡單不麻煩 缺點： 1、transparent在IE6不兼容 2、樣式有限
最后，我們選擇的方式是：圖標(biāo)字體 優(yōu)點： 1、矢量圖，不失真 2、減少HTTP請求 3、兼容性好 4、簡單易操作 缺點： 1、基本用作小圖標(biāo) 2、有時無法完全與設(shè)計稿一致 圖標(biāo)庫：阿里巴巴矢量圖標(biāo)庫 https://www./ 可以使用微博賬號登錄 選好項目所需的所有圖標(biāo)，添加至購物車，最后下載代碼即可 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; } /*鼠標(biāo)移入*/ .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標(biāo)簽自帶斜體效果*/ -webkit-font-smoothing: antialiased;/*在webkit內(nèi)核和火狐瀏覽器中，抗鋸齒*/ -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> //插件形式調(diào)用 $(".dropdown").dropdown(); </script> </body> </html> 但是這種使用 :before 偽類的做法，IE6/7 是不兼容的，因此需要修改代碼 不通過 :before 添加，而是直接手動將代碼寫入 i 標(biāo)簽中 需要注意的是 斜杠 需要用 &#x 來表示，后面加上分號 原來方法： .icon-xialajiantou:before { content: "\e642"; } 修改后的方法是： <i class="iconfont"></i> 使用 transform:rotate(180deg); 實現(xiàn)箭頭的旋轉(zhuǎn) 使用 transition:all .5s; 實現(xiàn)動畫效果 <!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; } /*鼠標(biāo)移入*/ .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標(biāo)簽自帶斜體效果*/ -webkit-font-smoothing: antialiased;/*在webkit內(nèi)核和火狐瀏覽器中，抗鋸齒*/ -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> //插件形式調(diào)用 $(".dropdown").dropdown(); </script> </body> </html> 最后使用圖標(biāo)字體的方法，來改寫之前的首頁導(dǎo)航下拉菜單效果 index.html <!DOCTYPE html> <html lang="zh-CN"><!-- 設(shè)置簡體中文 --> <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> <!-- 導(dǎo)航 --> <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="#">賣家服務(wù)市場</a></li> <li class="menu-item"><a href="#">賣家培訓(xùn)中心</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">聯(lián)系客服<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./jquery/1.12.4/jquery.min.js"></script> <script> //短路操作，如果cdn的jquery沒有引用成功，則會執(zhí)行后面一句，引入本地jquery //括號中的<\/script>標(biāo)簽會被當(dāng)做當(dāng)前標(biāo)簽的結(jié)束標(biāo)簽，因此需要轉(zhuǎn)義 window.jQuery || document.write('<script src="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標(biāo)簽自帶斜體效果*/ -webkit-font-smoothing: antialiased;/*在webkit內(nèi)核和火狐瀏覽器中，抗鋸齒*/ -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;/*否則圖標(biāo)字體會繼承父元素的line-height屬性，占據(jù)過多空間*/ } .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; } /*鼠標(biāo)移入*/ .menu-item:hover{ background-color: #f3f5f7; } .menu-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:#cdd0d4; } .menu-active .dropdown-list{ display: block; }
有個問題：由于圖標(biāo)字體自帶了 3px 的內(nèi)邊距，導(dǎo)致 dropdown-arrow 到文字的距離，以及到邊框的距離發(fā)生了改變，因此需要做細微調(diào)整 .menu .dropdown-arrow{ /*margin-left:8px;*/ margin-left:5px;/*減去圖標(biāo)字體自帶的3px邊距*/ vertical-align: middle; } .menu .dropdown-toggle{ display: block; /*padding:0 16px 0 12px;*/ padding:0 13px 0 12px;/*減去圖標(biāo)字體自帶的3px邊距*/ border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; }
|
|
|
