suchen

Heim  >  Artikel  >  Web-Frontend  >  Schöner, reibungsloser Effektcode für sekundäre Dropdown-Menüs, implementiert von jQuery_jquery

Schöner, reibungsloser Effektcode für sekundäre Dropdown-Menüs, implementiert von jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:07:571528Durchsuche

Das Beispiel in diesem Artikel beschreibt den exquisiten, glatten sekundären Dropdown-Menüeffekt, der von jQuery implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein von jQurey implementierter sekundärer Navigationsmenüeffekt nach unten. Der Effekt ist sehr gut, er erstreckt sich sanft von oben nach unten und vermittelt den Menschen ein koordiniertes und schönes Gefühl! Die JS- und HTML-Codestruktur ist einfach und klar, leicht zu verwenden und zu ändern!

Der Screenshot des Laufeffekts sieht wie folgt aus:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现精美二级菜单——js特效大全</title>
<style type="text/css">
* { margin:0; padding:0; }
body { font:12px/normal Arial, Helvetica, sans-serif; }
ul, ol { list-style:none; }
a img { border:none; }
#content { width:800px; margin:30px auto; }
.main_nav { width:100%; height:30px; }
.main_nav ul li { float:left; width:190px; height:30px; border-right:1px solid #666; position:relative; }
.main_nav ul li a { display:block; height:30px; line-height:30px; text-align:center; background:#333; color:#ccc; text-decoration:none; }
.main_nav ul li dl { position:absolute; left:0; top:30px; width:190px; display:none; }
.main_nav ul li dl dd { height:31px; }
.main_nav ul li dl dd a { display:block; height:30px; line-height:30px; text-align:center; color:white; background:#555; border-bottom:1px solid #666; }
.main_nav ul li dl dd a:hover { background:#333; color:#ccc; }
.click { margin-top:200px; }
</style>
</head>
<body>
<div id="content">
 <div class="main_nav hover">
  <ul>
   <li><a href="#" title="js特效大全">网页特效</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效 </a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
    </dl>
   </li>
   <li><a href="#" title="js特效大全">网页设计</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
    </dl>
   </li>
   <li><a href="#" title="">网页制作</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作 </a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
    </dl>
   </li>
   <li><a href="#" title="">网站优化</a>
    <dl>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化 </a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
    </dl>
   </li>
  </ul>
 </div>
</div>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(".hover ul li").hover(function(){
  $(this).children("dl").slideDown(300)
}, function(){
  $(this).children("dl").slideUp(100)
});
</script>
</body>
</html>

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung des JQuery-Selektors“ und „jQuery Allgemeine Plug-Ins und Nutzungsübersicht》

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung 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：Zusammenfassung der Übermittlungsmethoden für Validierungs- und Formular-Plug-ins in jquery_javascript-KenntnissenNächster Artikel：Zusammenfassung der Übermittlungsmethoden für Validierungs- und Formular-Plug-ins in jquery_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen