So implementieren Sie ein unendliches hierarchisches horizontales Navigationsmenü mit jquery_jquery

Das Beispiel in diesem Artikel beschreibt, wie jquery unendliche hierarchische horizontale Navigationsmenüs implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

1. Der Versionscode des JQuery-Plug-Ins lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

(function($){
$.fn.extend({
         droplinemenu: function(configs) {
                var configs = $.extend({                                       Über: 200,
aus: 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) {//Löschen Sie den unter ie:hidden
generierten Überlauf                               $(this).parent("ul").css({'overflow': 'visible'});                                                                                                  $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs.over);
               },function(){                                                                 $(this).find(">ul").stop(true, true).slideUp(configs.out);
            });
}
});
})(jQuery);

2. Stilcode

Code kopieren

Der Code lautet wie folgt:* {margin:0;padding:0} .droplinebar{ Position: absolut; Z-Index: 20;

Breite: 700px;

}
.droplinebar ul.dropmenu {
Position: relativ;
}
.droplinebar ul{
Breite: 100 %; float: links;
Schriftart: fett 13px Arial;
Hintergrund: #242c54 url(bluedefault.gif) Center Center Repeat-X; /*Standardhintergrund der Menüleiste*/
}
.droplinebar ul li{
float:left;
}
.droplinebar ul ul {
Breite: 700px;
Anzeige:keine;
Z-Index: 100;
Position:absolut;
Links:0;
Hintergrund: #303c76;
Zoom: 1;
}
.droplinebar ul li a{
float: links;
Farbe: weiß;
Polsterung: 9px 11px;
Textdekoration: keine;
Anzeige:blockieren;
}
.droplinebar ul li.hasmenu a img {border:none;margin-left:5px;}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*Hintergrund der Hauptmenüleisten-Links bei Mouseover*/
Farbe: weiß;
Hintergrund: transparente URL (blueactive.gif) Mitte Mitte Wiederholung-x;
}
/* Stil für Untermenü-Links */
.droplinebar ul li ul li a{
Schriftart: normal 13px Verdana;
Polsterung: 6px;
padding-right: 8px;
Rand: 0;
Rand unten: 1px einfarbiges Marineblau;
}
.droplinebar ul li ul li a:hover{ /*Hintergrundfarbe der Untermenü-Links bei Mouseover */
Hintergrund: #242c54;
}

3. HTML代码如下

复制代码 代码如下:

• Home


• CSS-Beispiele
   
  
   
  • Aktivitäten 1
  
   
  • Aktivitäten 2
  
   
  • Aktivitäten 3
         
    
         
    • Wassersport 1
    
         
    • Wassersport 1
    
         
    • Wassersport 1
    
         
    • Wassersport 1
    
         
    
       
  
   
  • Aktivitäten 4
  
   
  
  


• Tools


• JavaScript
   
  
   
  • Reisen 1
  
   
  • Reisen 2
  
   
  • Reisen 3
  
   
  • Reisen 4
         
    
         
    • Afrika 1
    
         
    • Afrika 2
    
         
    • Afrika 3
    
         
    • Africa 4
               
      
               
      • Kenia 1
      
               
      • Kenia 2
      
               
      • Kenia 3
      
               
      • Kenia 4
      
               
      • Kenia 5
      
               
      
             
    
         
    
       
  
   
  • Reisen 5
  
   
  
  


• Galerie

4. Kein Plug-in-Versionscode:

Code kopieren Der Code lautet wie folgt:

$(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) {//Löschen Sie den unter IE:hidden
generierten Überlauf                  $(this).parent("ul").css({'overflow': 'visible'});           }
           $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs_over);
},function(){
            $(this).find(">ul").stop(true, true).slideUp(configs_out);
});
});

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.