[英]Superfish Menu - Display subitems left if there is not enough screenspace on the right
我有 3 級菜單。 當沒有足夠的屏幕空間來顯示它們時,我希望子菜單在左側而不是右側打開。
請看一下屏幕截圖以獲得確切的想法。
我想使用 superfish 菜單的 onBeforeShow() 函數來解決這個問題,但我無法讓它按預期工作。
到目前為止,這是我的代碼:
$("ul.sf-menu").superfish({
delay: 1000,
speed: 'fast',
disableHI: true,
onBeforeShow: function()
{
thisWidth = $(this).width();
if ( thisWidth > 0 )
{
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentWidth = this.parent().width();
parentRight = parentWidth + parentLeft ;
mainLeft = document
.getElementsByClassName('sf-menu')[0].offsetLeft;
mainRight = document
.getElementsByClassName('sf-menu')[0].offsetWidth;
if ( ( thisWidth + parentLeft ) < ( mainLeft + mainRight ) )
{
if ( thisWidth > ( parentLeft + parentHeight ) )
{
$(this).css('left', - (parentLeft - mainLeft));
}
else
{
// open left
$(this).css('left', - (thisWidth - parentWidth));
}
}
}
}
});
我目前正在使用此代碼來解決我工作的網站上的問題:
onBeforeShow: function() {
if($(this).parents("ul").length > 1){
var w = $(window).width();
var ul_offset = $(this).parents("ul").offset();
var ul_width = $(this).parents("ul").outerWidth();
// Shouldn't be necessary, but just doing the straight math
// on dimensions can still allow the menu to float off screen
// by a little bit.
ul_width = ul_width + 50;
if((ul_offset.left+ul_width > w-(ul_width/2)) && (ul_offset.left-ul_width > 0)) {
$(this).addClass('too_narrow_fix');
}
else {
$(this).removeClass('too_narrow_fix');
}
};
}
這是它適用的 CSS:
.too_narrow_fix {
left: -14.5em !important;
top: .5em !important;
}
雖然它是很老的帖子,但我正在分享一個對我有用的解決方案,因為它可以幫助某人並節省時間。 我在最新的 jquery superfish 菜單 1.7.9 中遇到了這個問題。 我在該論壇中找到了另一個 jquery 插件 'Supposition' 來解決這個問題。
(function($) { //create closure so we can safely use $ as alias for jQuery
$(document).ready(function() {
// initialise plugin
var example = $('#example').superfish({
//add options here if required
}).supposition();
});
})(jQuery);
使用 CSS 的快速修復。
ul.genesis-nav-menu li.menu-item:last-child .sub-menu {
right: 0;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.