suchen

Heim >Web-Frontend >js-Tutorial >Implementierung eines sekundären Dropdown-Menüeffekts basierend auf jQuery_jquery

Implementierung eines sekundären Dropdown-Menüeffekts basierend auf jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:16:511031Durchsuche

In diesem Artikel wird anhand von Codebeispielen ausführlich beschrieben, wie Sie ein einfaches sekundäres Dropdown-Menü implementieren. Natürlich gibt es auch komplexere sekundäre Menüs, aber lernen Sie zunächst, wie Sie ein einfaches erstellen und es als Referenz für alle freigeben . Der spezifische Inhalt ist wie folgt

Der Code lautet wie folgt: 

<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="#">前端专区</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="#">资源专区</a>
   <ul class="sub-menu">
    <li><a href="#">电脑模板下载</a></li>
    <li><a href="#">手机模板下载</a></li>
    <li><a href="#">特效下载</a></li>
   </ul>
  </li>
  <li><a href="#">交流专区</a>
   <ul class="sub-menu">
    <li><a href="#">运营交流</a></li>
    <li><a href="#">seo优化</a></li>
    <li><a href="#">站长交流</a></li>
   </ul>
  </li>
 </ul>
</nav>
</body>
</html>

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die die JQuery-Programmierung erlernen.

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：Eine vollständige Anleitung zum UI-Router in Angularjs_AngularJSNächster Artikel：Eine vollständige Anleitung zum UI-Router in Angularjs_AngularJS

In Verbindung stehende Artikel

Mehr sehen