Bagaimana untuk melaksanakan menu navigasi mendatar hierarki tak terhingga dengan jquery

Contoh dalam artikel ini menerangkan cara jquery melaksanakan menu navigasi mendatar hierarki tak terhingga. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

1. Kod versi pemalam jquery adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

(function($){
$.fn.extend({
         droplinemenu: function(configs) {
                var configs = $.extend({                                         Lebih: 200,
keluar: 100,
                  kanan ke bawah:'css/down.gif'
               },konfigurasi||{});
This.find(">ul").addClass("dropmenu");
this.find("ul li:has(ul)").addClass('hasmenu').find(">a").append("

");
var currentobj;
                 pulangkan $('li.hasmenu'). hover(function(){                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         if ($.browser.msie) {//Kosongkan limpahan yang dijana di bawah ie:hidden
                               $(this).parent("ul").css({'overflow': 'visible'});                                                                                                                                                   $(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs.over);
               },fungsi(){                                                                   $(this).find(">ul").stop(true, true).slideUp(configs.out);
            });
}
});
})(jQuery);

2. Kod gaya

Salin kod

Kod adalah seperti berikut:* {margin:0;padding:0} .droplinebar{ Jawatan: mutlak; indeks z: 20;

Lebar: 700px;

}
.droplinebar ul.dropmenu {
jawatan: relatif;
}
.droplinebar ul{
lebar: 100%; terapung: kiri
fon: tebal 13px Arial;
latar belakang: #242c54 url(bluedefault.gif) tengah ulang-x; /*latar belakang lalai bar menu*/
}
.droplinebar ul li{
float:left; }
.droplinebar ul ul {
Lebar: 700px;
Paparan:tiada;
indeks-z: 100;
kedudukan:mutlak;
Kiri:0; latar belakang: #303c76; Zum: 1;
}
.droplinebar ul li a{
terapung: kiri;
Warna: putih;
Padding: 9px 11px;
hiasan teks: tiada;
Paparan:sekat;
}
.droplinebar ul li.hasmenu a img {border:none;margin-left:5px;}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*latar belakang pautan bar menu utama padaMouseover*/
warna: putih;
latar belakang: url telus(blueactive.gif) pusat pusat ulang-x;
}
/* Gaya pautan menu sub peringkat */
.droplinebar ul li ul li a{
fon: biasa 13px Verdana;
pelapik: 6px;
padding-kanan: 8px;
jidar: 0;
bawah sempadan: 1px tentera laut pepejal;
}
.droplinebar ul li ul li a:hover{ /*warna latar belakang pautan sub menu padaMouseover */
latar belakang: #242c54;
}

3. HTML代码如下

复制代码代码如下:

Artikel terbaru oleh pengarang