Heim > Artikel > Web-Frontend > jQuery-Methode zum Implementieren der sekundären Dropdown-Navigation „menu_jquery“ zum Ein- und Ausblenden

jQuery-Methode zum Implementieren der sekundären Dropdown-Navigation „menu_jquery“ zum Ein- und Ausblenden

WBOYOriginal: 2016-05-16 15:41:421095Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery das sekundäre Dropdown-Navigationsmenü zum Ein- und Ausblenden implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Navigationsmenü, das auf jQuery basiert. Es ist ein sehr häufiger Effekt, der hier verwendet wird Im Hauptmenü erscheint nach und nach das sekundäre Untermenü. Wenn Sie mit der Maus über das sekundäre Untermenü fahren, ändert sich der Hintergrund der Untermenüpunkte.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>渐隐渐现的二级竖向下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;}
ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;color:#000;}
#wrap{position:relative;top:0px;width:876px;height:34px;line-height:34px;margin:0 auto;}
ul#menu li{float:left;display:block;width:92px;height:37px;line-height:37px;text-align:center;margin-right:2px;}
ul#menu li a:link{display:block;background:#EDEBEC;font-size:14px;color:#333;width:92px;height:37px;line-height:37px;}
ul#menu li a:hover,.red{background:#CE070E!important;color:#FFF!important;}
/*子菜单*/
ul#menu li ul{position:absolute;top:37px;width:90px;display:none;border:1px #CE070E solid;border-top:none;background:#FFF;}
ul#menu li ul li{float:left;}
ul#menu li ul li a:link{width:90px;height:37px;line-height:37px;background:#FFF;}
ul#menu li ul li a:hover{color:#CE070E;text-decoration:underline}
ul#menu li ul li{width:90px;height:37px;line-height:37px;float:left;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript"> 
$(function(){
 $("ul#menu>li:has(ul)").hover( 
 function(){ 
  $(this).children('a').addClass('red').end().find('ul').fadeIn(400);
 },
 function(){
  $(this).children('a').removeClass('red').end().find('ul').fadeOut(400);
 }
 );
});
</script>
</head>
<body>
<div id="wrap">
 <ul id="menu">
  <li><a href="#" >网站首页</a></li>
  <li><a href="#" >最新动态页</a>
   <ul>
    <li><a href="#">源码爱好者</a></li>
    <li><a href="#">编程导航</a></li>
    <li><a href="#">网页特效</a></li> 
   </ul>
  </li>
  <li><a href="#" >产品预定</a></li>
  <li><a href="#" >帮助查询</a>
   <ul>
    <li><a href="#">时速快递</a> | </li>
    <li><a href="#">太空一号</a> | </li>
    <li><a href="#">蜘蛛侠前传</a> | </li>
    <li><a href="#">未来战士</a> | </li>
    <li><a href="#">蟒蛇之灾</a></li> 
   </ul>
  </li>
  <li><a href="#" >会员俱乐部</a></li>
  <li><a href="#" >凯撒论坛</a></li>
 </ul> 
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js exquisiter Diashow-Spezialeffektcode-Sharing_Javascript-FähigkeitenNächster Artikel：js exquisiter Diashow-Spezialeffektcode-Sharing_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen