快捷導(dǎo)航

基于jQuery實(shí)現(xiàn)二級(jí)下拉菜單效果

更新時(shí)間：2016年02月01日 10:41:07 作者：gogoggo

這篇文章主要介紹了jQuery實(shí)現(xiàn)二級(jí)下拉菜單效果的相關(guān)資料,二級(jí)下拉菜單在實(shí)際應(yīng)用中非常的常見(jiàn)，比如企業(yè)網(wǎng)站的產(chǎn)品分類，或者部門分類等等，需要的朋友可以參考下

本文通過(guò)代碼實(shí)例詳細(xì)介紹一下簡(jiǎn)單的二級(jí)下拉菜單是如何實(shí)現(xiàn)的，當(dāng)然還有更為復(fù)雜的二級(jí)菜單，不過(guò)先學(xué)會(huì)如何制作簡(jiǎn)單的，分享給大家供大家參考，具體內(nèi)容如下

代碼如下：

<html>
<head>
<meta charset=" utf-8">
<title>下拉菜單</title>
<style type="text/css">
nav a{ 
 text-decoration:none; 
} 
nav>ul>li{ 
 float:left; 
 text-align:center; 
 padding:0 0.5em;
 width:120px; 
}
nav li ul.sub-menu{ 
 display:none; 
 padding-left:0 !important; 
} 
.sub-menu li{color:white;} 
.sub-menu li:hover{background-color:black;} 
.sub-menu li:hover a{color:white;} 
ul{list-style: none;} 
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
 $('.box> li').hover(function(){ 
  $(this).find('.sub-menu').css('display', 'block'); 
 },function(){ 
  $(this).find('.sub-menu').css('display', 'none'); 
 }); 
}); 
</script> 
</head>
<body>
<nav>
 <ul class="box">
  <li><a href="#">前端專區(qū)</a>
   <ul class="sub-menu">
    <li><a href="#">jquery教程</a></li>
    <li><a href="#">css教程</a></li>
    <li><a href="#">js教程</a></li>
   </ul>
  </li>
  <li><a href="#">資源專區(qū)</a>
   <ul class="sub-menu">
    <li><a href="#">電腦模板下載</a></li>
    <li><a href="#">手機(jī)模板下載</a></li>
    <li><a href="#">特效下載</a></li>
   </ul>
  </li>
  <li><a href="#">交流專區(qū)</a>
   <ul class="sub-menu">
    <li><a href="#">運(yùn)營(yíng)交流</a></li>
    <li><a href="#">seo優(yōu)化</a></li>
    <li><a href="#">站長(zhǎng)交流</a></li>
   </ul>
  </li>
 </ul>
</nav>
</body>
</html>

希望本文所述對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery 學(xué)習(xí)6 操縱元素顯示效果的函數(shù)
jQuery提供了hide() ,show()對(duì)元素進(jìn)行隱藏和顯示，下面看兩個(gè)函數(shù)的應(yīng)用
2010-02-02
jquery對(duì)table中各數(shù)據(jù)的增加、保存、刪除操作示例
這篇文章主要介紹了jquery對(duì)table中各種數(shù)據(jù)的增加、保存、刪除操作,需要的朋友可以參考下
2014-05-05
jquery自定義右鍵菜單、全選、不連續(xù)選擇
這篇文章主要為大家詳細(xì)介紹了jquery自定義右鍵菜單、全選、不連續(xù)選擇的相關(guān)資料,需要的朋友可以參考下
2016-03-03
jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動(dòng)的動(dòng)感菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動(dòng)的動(dòng)感菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)菜單項(xiàng)呈現(xiàn)文字上下滑動(dòng)變換的效果,涉及jQuery頁(yè)面元素樣式的動(dòng)態(tài)設(shè)置技巧,需要的朋友可以參考下
2015-09-09
Jquery EasyUI $.Parser
這篇文章主要介紹了JqueryEasyUI $.Parser,需要的朋友可以參考下
2017-06-06
Jquery顯示和隱藏元素或設(shè)為只讀(含Ligerui的控件禁用,實(shí)例說(shuō)明介紹)
本篇文章是對(duì)Jquery中顯示和隱藏元素或設(shè)為只讀以及Ligerui的控件禁用實(shí)現(xiàn)代碼進(jìn)行了分析介紹，需要的朋友可以參考下
2013-07-07
JQuery 常用方法和事件詳細(xì)介紹
本篇文章是關(guān)于JQuery 常用方法和事件詳細(xì)介紹。需要的朋友參考下
2013-04-04
jquery實(shí)現(xiàn)表格行拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
jQuery操作json常用方法示例
這篇文章主要介紹了jQuery操作json常用方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)json的獲取、創(chuàng)建等常見(jiàn)操作技巧,需要的朋友可以參考下
2017-01-01
基于jquery的一行代碼輕松實(shí)現(xiàn)拖動(dòng)效果
寫JS實(shí)現(xiàn)拖動(dòng)需要一大堆不便維護(hù)的代碼，實(shí)屬麻煩，Google了大半天，發(fā)現(xiàn)了一個(gè)優(yōu)秀的Jquery插件EasyDrag，只需要一行代碼便可輕松在主流瀏覽器上。
2010-12-12