Rumah >hujung hadapan web >tutorial js >Bagaimana untuk melaksanakan menu navigasi mendatar hierarki tak terhingga dengan jquery_jquery

Bagaimana untuk melaksanakan menu navigasi mendatar hierarki tak terhingga dengan jquery_jquery

WBOYasal: 2016-05-16 16:10:081589semak imbas

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代码如下

复制代码代码如下: