全國服務熱線:0663-8689819 手機熱線:13640377000
新聞中心網站專題聯系我們
博亞新聞 電子商務 行業新聞 網絡營銷 行業門戶 網站建設 通知公告

jQuery+CSS實現多級下拉菜單

博亞網絡: 2014-12-05    閱讀數:2121
隨著計算機網絡、通信技術的迅速發展,特別是Internet的發展應用,使人們的行為方式受到巨大的沖擊及影響。電子商務作為一種嶄新的商務運作方式,帶來了一次新的產業革命,這場革命的最終結果將人類帶入了信息經濟時代。電子商務網站出現如雨后春筍,但中國電子商務的發展較之發達國家尚處于起步階段,

今天電子商務網站我們隨處可見,如淘寶、拍拍、百度有啊……。電子商務在發展,網站技術也在不段的更新。由于電子商務網站的產品和種類的不段增加,以往的一級下拉菜單已經遠不能滿足現有電子商務網站發展了,多級下拉菜單是今后電子商務網站的新趨勢。

一個好的菜單,能為電子商務網站增色不少。下面我就用jQuery+CSS來制做一款多級的下拉菜單。

jQuery+CSS實現多級下拉菜單

jQuery+CSS實現多級下拉菜單

演示地址:http://www.56mp.cn/upload/mega-dropdowns/

 HTML部分:

就像我的所有導航教程一樣,首先創建一個無序列表。

<ul id="topnav">
    <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="home">Home</a></li>
    <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="products">Products</a></li>
    <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="sale">Sale</a></li>
    <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="community">Community</a></li>
    <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="store">Store Locator</a></li>
</ul>

CSS部分:

由于我們的下拉菜單將使用絕對定位,所以一定要添加一個相對定位的列表項。

ul#topnav {
margin: 0; padding: 0;
float:left;
width: 100%;
list-style: none;
font-size: 1.1em;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative; 
}
ul#topnav li a {
float: left;
text-indent: -9999px; 
height: 44px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } 
ul#topnav a.home {
background: url(nav_home.png) no-repeat;
width: 78px;
}
ul#topnav a.products {
background: url(nav_products.png) no-repeat;
width: 117px;
}
ul#topnav a.sale {
background: url(nav_sale.png) no-repeat;
width: 124px;
}
ul#topnav a.community {
background: url(nav_community.png) no-repeat;
width: 124px;
}
ul#topnav a.store {
background: url(nav_store.png) no-repeat;
width: 141px;
}

  • 揭陽市博亞網絡科技有限公司
    廣東省揭陽市榕城區望龍頭村蓮花大道以西中天大廈隔壁1301號博亞網絡
    電話:0663-8689819
    傳真:0663-8689829 網站備案號:粵ICP備15011300號
400-660-5510qqsina
 
 
 
陕西快乐10分开奖直播