Comment implémenter un menu de navigation horizontale hiérarchique infini avec jquery_jquery

L'exemple de cet article décrit comment jquery implémente des menus de navigation horizontale hiérarchique infinie. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

1. Le code de la version du plug-in jquery est le suivant :

Copier le code Le code est le suivant :

(function($){
$.fn.extend({
         droplinemenu : fonction (configurations) {
                var configs = $.extend({                                        Plus de : 200,
sorti : 100,
                  rightdown:'css/down.gif'
               },configs||{});
This.find(">ul").addClass("dropmenu");
this.find("ul li:has(ul)").addClass('hasmenu').find(">a").append("");
            var currentobj;
                return $('li.hasmenu').hover(function(){                                                                                                                                                                                                                                                                                                      if ($.browser.msie) {//Effacer le débordement généré sous ie:hidden
                               $(this).parent("ul").css({'overflow': 'visible'});
                                                                                                       $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs.over);
},fonction(){ $(this).find(">ul").stop(true, true).slideUp(configs.out);
            });
>
});
})(jQuery);

2. Code de style

Copier le code

Le code est le suivant :* {margin:0;padding:0} .droplinebar{ Position : absolue ;

indice z : 20 ;

Largeur : 700 px ;
>
.droplinebar ul.dropmenu {
position : relative ;
>
.droplinebarul{
largeur : 100%
flotter : gauche ;
police : gras 13px Arial ;
arrière-plan : #242c54 url(bluedefault.gif) center center répétition-x /*arrière-plan par défaut de la barre de menu*/
>
.droplinebar ul li{
flotter:gauche
}
.droplinebar ul ul {
Largeur : 700 px ;
Affichage : aucun ;
indice z : 100 ;
position:absolue;
Gauche : 0 ;
arrière-plan : #303c76 ;
Zoom : 1;
>
.droplinebar ul li a{
flotter : gauche ;
Couleur : blanc ;
Rembourrage : 9px 11px ;
décoration de texte : aucune ;
Afficher : bloquer ;
>
.droplinebar ul li.hasmenu a img {border:none;margin-left:5px;}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*arrière-plan des liens de la barre de menu principale onMouseover*/
couleur : blanc ;
arrière-plan : url transparent (blueactive.gif) centre centre répétition-x ;
}
/* Style des liens de menu de sous-niveau */
.droplinebar ul li ul li a{
police : normale 13px Verdana ;
remplissage : 6 px ;
padding-right : 8px;
marge : 0;
bordure inférieure : 1px bleu marine uni ;
>
.droplinebar ul li ul li a:hover{ /*couleur d'arrière-plan des liens du sous-menu onMouseover */
arrière-plan : #242c54;
>

3. HTML代码如下

复制代码 代码如下 :

• Accueil


• Exemples CSS
   
  
   
  • Activités 1
  
   
  • Activités 2
  
   
  • Activités 3
         
    
         
    • Sports nautiques 1
    
         
    • Sports nautiques 1
    
         
    • Sports nautiques 1
    
         
    • Sports nautiques 1
    
         
    
       
  
   
  • Activités 4
  
   
  
  


• Outils


• JavaScript
   
  
   
  • Voyage 1
  
   
  • Voyager 2
  
   
  • Voyage 3
  
   
  • Voyager 4
         
    
         
    • Afrique 1
    
         
    • Afrique 2
    
         
    • Afrique 3
    
         
    • Afrique 4
               
      
               
      • Kenya 1
      
               
      • Kenya 2
      
               
      • Kenya 3
      
               
      • Kenya 4
      
               
      • Kenya 5
      
               
      
             
    
         
    
       
  
   
  • Voyage 5
  
   
  
  


• Galerie

4. Aucun code de version du plug-in :

Copier le code Le code est le suivant :

$(document).ready(function(){
var configs_over = 200,configs_out = 100;
$("#mydroplinemenu").find(">ul").addClass("dropmenu").find("li:has(ul)").addClass('hasmenu').find(">a" ).append("");
$('.dropmenu li.hasmenu').hover(function(){                                       If ($.browser.msie) {//Effacer le débordement généré sous IE:hidden
                 $(this).parent("ul").css({'overflow': 'visible'});           }
           $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs_over);
},fonction(){
            $(this).find(">ul").stop(true, true).slideUp(configs_out);
});
});

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