Hai semuanya, saya ingin menambahkan acara hoverIntent ke tautan atas menu tarik-turun jquery saya tetapi saya tidak tahu bagaimana melakukannya, tolong bantu di bawah ini adalah kode jquery yang saya dapatkan dari http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ saya tidak dapat memposting kode di sini, harap checkout di sini http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js
Tambahkan hoverIntent ke skrip menu tarik-turun jquery
Jawaban (2)
DIPERBARUI untuk menggunakan menu slide jquery drive dinamis:
lihat contohnya di sini: http://jsfiddle.net/vnvQn/
dalam slidemenu.js Dynamicdrive ubah ini:
$curobj.hover(
function(e) {
var $targetul = $(this).children("ul:eq(0)")
this._offsets = {
left: $(this).offset().left,
top: $(this).offset().top
}
var menuleft = this.istopheader ? 0 : this._dimensions.w
menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length <= 1) //if 1 or less queued animations
$targetul.css({
left: menuleft + "px",
width: this._dimensions.subulw + 'px'
}).slideDown(jqueryslidemenu.animateduration.over)
}, function(e) {
var $targetul = $(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}) //end hover
untuk ini:
var hoverOver = function(e) {
var $targetul = $(this).children("ul:eq(0)")
this._offsets = {
left: $(this).offset().left,
top: $(this).offset().top
}
var menuleft = this.istopheader ? 0 : this._dimensions.w
menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length <= 1) //if 1 or less queued animations
$targetul.css({
left: menuleft + "px",
width: this._dimensions.subulw + 'px'
}).slideDown(jqueryslidemenu.animateduration.over)
}
var hoverOut = function(e) {
var $targetul = $(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
} //end hover
var config = {
over: hoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: hoverOut // function = onMouseOut callback (REQUIRED)
};
$curobj.hoverIntent(config);
RESPON AWAL:
contoh dari Menu Mega Dropdown karya Soh Tonaka
dengan struktur menu HTML seperti:
<ul id="topnav">
<li>
<a href="/id#" class="home">Home</a>
</li>
<li>
<a href="/id#" class="products">Products</a>
<div class="sub">
<ul>
<li><h2><a href="/id#">Desktop</a></h2></li>
<li><a href="/id#">Navigation Link</a></li>
<li><a href="/id#">Navigation Link</a></li>
<li><a href="/id#">Navigation Link</a></li>
<li><a href="/id#">Navigation Link</a></li>
<li><a href="/id#">Navigation Link</a></li>
<li><a href="/id#">Navigation Link</a></li>
<li><a href="/id#">Navigation Link</a></li>
</ul>
</div>
...
gunakan jquery seperti:
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else { //If row does not exist...
$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};
$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);
person
MikeM
schedule
22.03.2011
Ini keren, saya mengerti, tetapi saya hanya ingin menambahkan hoverintent ke jqueryslide.js, ini menu slide
- person Anjum; 22.03.2011
Terima kasih banyak
- person Anjum; 22.03.2011
ini bagus sekarang, dan apa yang saya cari sekitar 8 hari Terima kasih banyak mdmullinax Anda sangat membantu kawan
- person Anjum; 22.03.2011
Saya menggunakan plugin doTimeout
Laman Maksud Melayang doTimeout
Dan tulis kode seperti ini
$("#writer").find('.note, .task').hover(function () {
$(this).find('.listed').stop(true, true).doTimeout('listed', 250, 'slideDown', 'fast', 'easeInOutCubic');
}, function(){
$(this).find('.listed').stop(true, true).doTimeout('listed', 250, 'slideUp', 'fast', 'easeInOutCubic');
});
person
Blowsie
schedule
22.03.2011
tolong beritahu saya cara memodifikasi skrip menu jqueryslides untuk efek ini
- person Anjum; 22.03.2011