communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
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
Libérer： 2016-05-16 15:43:13
original
1317 Les gens l'ont consulté

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>
Copier après la connexion

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

Étiquettes associées：
jquery Menu déroulant à plusieurs niveaux
source：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)_jquery Article suivant：Comment implémenter un saut de page partiel et le retour des résultats avec les compétences ajax_javascript
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...
Depuis 2024-04-04 12:53:48
0
1
303
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal