嗨,大家,我想添加hoverIntent事件到我的jquery下拉菜單頂部鏈接,但我不知道我是如何做到這一點,請幫助下面是我從我的jQuery代碼http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ 我無法張貼在這裏的代碼,請在這裏籤http://www.dynamicdrive.com/cssexamples/media/jqueryslidemenu.js將hoverIntent添加到jquery下拉菜單腳本
0
A
回答
0
更新爲使用動態驅動的jQuery的滑動菜單:
看到這裏的例子:http://jsfiddle.net/vnvQn/
在動態駕駛中slidemenu.js更改此:
$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
這樣:
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);
初始響應:
從公所Tonaka的Mega Dropdown Menu by Soh Tanaka
與HTML菜單結構像例如:
<ul id="topnav">
<li>
<a href="#" class="home">Home</a>
</li>
<li>
<a href="#" class="products">Products</a>
<div class="sub">
<ul>
<li><h2><a href="#">Desktop</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
</div>
...
使用jQuery,如:
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);
0
而寫類似這樣
代碼3210$("#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');
});
+0
請告訴我如何修改jqueryslides這個效果的菜單腳本 – Anjum 2011-03-22 16:09:42
相關問題
- 1. 將hoverIntent添加到jquery下拉菜單
- 2. 將hoverintent添加到ajax下拉菜單
- 3. 將hoverintent添加到全CSS下拉菜單
- 4. 將'animate'添加到jquery下拉菜單
- 5. 如何將JQuery緩動添加到我的簡單HoverIntent菜單
- 6. 添加延遲到jquery下拉菜單
- 7. 將轉換添加到下拉菜單
- 8. 將下拉菜單添加到jqGrid
- 9. 將下拉菜單添加到magento
- 10. 將jQuery添加到表單以顯示/隱藏下拉菜單
- 11. 將下拉菜單添加到我的動態表單中jQuery
- 12. Hoverintent - 整個菜單(Div)下拉?
- 13. 實現下拉菜單hoverIntent(來自click_event)
- 14. 用jquery添加一個下拉菜單
- 15. jQuery的添加「選擇」下拉菜單
- 16. 如何將子菜單添加到下拉菜單
- 17. 如何將下拉菜單添加到此菜單?
- 18. woocommerce版本 - 將post_meta添加到下拉菜單
- 19. 將hoverintent添加到此jquery片段
- 20. 將HoverIntent添加到jQuery UI選項卡
- 21. TW7ToolButton - 添加下拉菜單
- 22. 將jquery效果添加到下拉菜單中,並將下拉菜單完全對齊懸停選項卡
- 23. 水平下拉菜單使用jquery和hoverintent
- 24. 將腳本添加到MacOS查找程序上下文菜單
- 25. 將批處理腳本添加到Windows 8上下文菜單
- 26. javascript函數添加到下拉菜單
- 27. 如何在Mootools下拉菜單腳本中添加.delay
- 28. jQuery超級菜單hoverIntent mouseOut
- 29. 將值添加到帶有表單的下拉菜單
- 30. 如何將下拉菜單添加到JTable單元
這很酷我看到,但我只想添加hoverintent jqueryslid e.js這是滑動菜單 – Anjum 2011-03-22 16:20:19
@Anjum修改我的答案與動態驅動滑動菜單到工作... – MikeM 2011-03-22 17:05:05
感謝sooooooooooooooooooo多 – Anjum 2011-03-22 18:11:19