recherche

Maison >interface Web >js tutoriel >Code d'effet de menu déroulant à plusieurs niveaux implémenté par jQuery_jquery

Code d'effet de menu déroulant à plusieurs niveaux implémenté par jQuery_jquery

WBOY
WBOYoriginal
2016-05-16 15:43:131325parcourir

L'exemple de cet article décrit le code d'effet de menu déroulant à plusieurs niveaux implémenté par jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu déroulant jQuery à plusieurs niveaux. Si vous le testez dans un navigateur prenant en charge HTML5, vous constaterez que ce menu est très intelligent. Il déterminera automatiquement la limite du navigateur pour changer la direction d'affichage du. menu déroulant. Cet effet n'est pas trouvé dans IE. Dans l'ensemble, le style du menu est très similaire au thème "Classique" du système Windows. Combiné avec les images, l'effet global est assez professionnel.

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-nlevel-nav-menu-style-codes/

Le code spécifique est le suivant : 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery多级下拉菜单</title>
</head>
<body>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
$('#menu li').hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400); // effect 1
 },function(){
  $(this).find('ul:first').css({visibility: "hidden"});
 });
});
</script>
<style>
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
#menu {width:750px; height:531px; background:url(images/snowboard.jpg); text-align:center; margin:0 auto;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#ccccd0; border:1px solid #333; border-color:#eee #555 #222 #fff;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}
#menu b {position:absolute;}
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:21px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px; margin-left:-4px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px; margin-right:-4px;}
#menu a:hover ul {left:0; top:23px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
#menu li.left ul a {text-align:right;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.drop {background:transparent url(images/white-down.gif) no-repeat right center;}
#menu li a.fly {background:transparent url(images/white-right.gif) no-repeat right center;}
#menu li.left ul a.fly {background:transparent url(images/white-left.gif) no-repeat left center;}
#menu li a:hover,
#menu li a.fly:hover {color:#c60; background-color:#c0c0c8;}
#menu li:hover > a,
#menu ul li:hover > a.fly {color:#c60; background-color:#c0c0c8;}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-6px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-left:-4px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-right:-4px;}
</style>
<div class="examples">
 <div id="menu">
  <ul class="level1">
   <li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
   <li class="level1-li"><a class="level1-a drop" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
     <li><a href="#url">Email</a></li>
     <li><a href="#url">Telephone</a></li>
     <li><a href="#url">Online Form</a></li>
     <li><a href="#url">Snail Mail Address</a><b></b></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="level1-li"><a class="level1-a drop" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
     <li><a href="#url">Ski Hire Facilities</a></li>
     <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">Beginners Slopes</a></li>
       <li><a href="#url">Intermediate Slopes</a></li>
       <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="level4">
         <li><a href="#url">Local</a></li>
         <li><a href="#url">Nearby</a></li>
         <li><a href="#url">With instructor</a></li>
         <li><a href="#url">Snow boarding</a><b></b></li>
        </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#url">Expert</a></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a href="#url">Night Life</a></li>
     <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">Snow Hotel</a></li>
       <li><a href="#url">The Snowman</a></li>
       <li><a href="#url">Ice Cavern</a></li>
       <li><a href="#url">Ski Inn</a><b></b></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">From Airport</a></li>
       <li><a href="#url">In Resort</a></li>
       <li><a href="#url">Multiple Resorts</a><b></b></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
     <li><a href="#url">Where to go</a></li>
     <li><a href="#url">What to do</a></li>
     <li><a href="#url">Places of interest</a></li>
     <li><a href="#url">National parks & Museums</a><b></b></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="level1-li left"><a class="level1-a drop" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
     <li><a href="#url">Money Exchange</a></li>
     <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">Lift Passes</a></li>
       <li><a href="#url">Insurance</a></li>
       <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="level4">
         <li><a href="#url">Boots</a></li>
         <li><a href="#url">Skis</a></li>
         <li><a href="#url">Ski Wear</a></li>
         <li><a href="#url">Goggles</a><b></b></li>
        </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#url">Ski Schools</a></li>
       <li><a href="#url">Snow Report</a></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">Austrian</a></li>
       <li><a href="#url">German</a></li>
       <li><a href="#url">French</a></li>
       <li><a href="#url">English</a><b></b></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a href="#url">Short Breaks</a></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
  </ul>
 </div>
 <div style="clear:both"></div>
</div>
<hr style="clear:both;" />
</body>
</html>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery prend en charge le partage de code d'effets spéciaux de calendrier pour l'ajout d'événements (3 styles)_jqueryArticle suivant：jQuery prend en charge le partage de code d'effets spéciaux de calendrier pour l'ajout d'événements (3 styles)_jquery

Articles Liés

Voir plus