jQuery implémente l'effet de navigation dans le menu déroulant code

jQuery implémente l'effet de navigation dans le menu déroulant code_jquery

WBOY

Libérer： 2016-05-16 15:42:47

original

1293 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation jQuery du code d'effet de navigation dans le menu déroulant. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration du code du menu de navigation déroulant jquery. Le menu déroulant de style jaune peut être utilisé comme menu de navigation principal du site Web. La compatibilité est également très bonne. Ce menu provient d'Internet et a perdu la signature de l'auteur original. Informations, veuillez nous contacter pour signer une fois que l'auteur original l'a vu.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-style-codes/

Le code spécifique est le suivant :

<!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=gb2312" />
<style>
html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;}
body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;}
ul,li {list-style-type:none; text-transform:capitalize;}
.clear {clear:both; *display:inline;/*IE only*/}
#nav {margin:0 auto 60px; width:1080px; display:block;}
#nav .jquery_out {float:left;line-height:32px;display:block; border-right:1px solid #fff; text-align:center; color:#fff;font:18px/32px; background:#062723 url(images/slide-panel_03.png) 0 0 repeat-x;}
#nav .jquery_out .smile {padding-left:1em;}
#nav .jquery_inner {margin-left:16px;}
#nav .jquery {margin-right:1px;padding:0 2em;}
#nav .mainlevel {background:#ffe60c; float:left; border-right:1px solid #fff; width:140px;/*IE6 only*/}
#nav .mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; padding:0 20px; width:100px;}
#nav .mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 url(images/slide-panel_03.png) 0 0 repeat-x;}
#nav .mainlevel ul {display:none; position:absolute;}
#nav .mainlevel li {border-top:1px solid #fff; background:#ffe60c; width:140px;/*IE6 only*/}
.log {text-align:center; color:skyblue; line-height:24px; text-transform:capitalize; margin:50px auto;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('li.mainlevel').mousemove(function(){
 $(this).find('ul').slideDown();//you can give it a speed
 });
 $('li.mainlevel').mouseleave(function(){
 $(this).find('ul').slideUp("fast");
 });
});
</script>
<title>jquery下拉竖导航菜单代码</title>
</head>
<body>
<br /><br /><br /><br /><br /><br />
<div id="menu">
<ul id="nav">
  <li class="jquery_out">
  <div class="jquery_inner">
  <div class="jquery">
  <span class="text">let'jquery</span><span class="smile">^_^</span>
  </div>
  </div>
  </li>
  <li class="mainlevel" id="mainlevel_01"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_01">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_02"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_02">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">up and down</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_03"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_03">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_04"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_04">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_05"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_05">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">up and down</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_06"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_06">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">up and down</a></li>
  </ul>
  </li>
  <div class="clear"></div>
</ul>
</div>
<p align="center"></p>
<p align="center"><p align="center">jquery下拉竖导航菜单代码，来源网络，请原作者联系我们署名。</p></p>
<p align="center"></p>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.