基於jQuery下拉菜單

我有以下腳本，它幾乎是完美的作品：基於jQuery下拉菜單

HTML：

<div class="menu"> 
    <div class="navigation1">icon Home</div> 
    <div class="dropdown"> 
     <div class="items">icon Default 1</div> 
     <div class="items">icon Reports 1</div> 
     <div class="items">icon Other 1</div> 
    </div> 
    <div class="navigation2">icon Home</div> 
    <div class="dropdown"> 
     <div class="items">icon Default 2</div> 
     <div class="items">icon Reports 2</div> 
     <div class="items">icon Other 2</div> 
    </div> 
</div>

CSS：

.menu { 
    position: relative; 
    background-color:silver; 
    font-family:Arial; 
    font-size:12px; 
    height:25px; 
} 

.navigation1 { 
    float:left; 
    padding:5px 10px 5px 10px; 
    cursor:pointer; 
} 

.navigation2 { 
    float:right; 
    padding:5px 10px 5px 10px; 
    cursor:pointer; 
} 

.navigation1::selection, .navigation2::selection { background:transparent; } 
.navigation1::-moz-selection, .navigation2::-moz-selection { background:transparent; } 

.navigation1:hover, .navigation2:hover { 
    background-color:gray; 
} 

.navigation1.active, .navigation2.active { 
    border:1px solid black; 
    border-bottom-color:white; 
    padding:4px 9px; 
    background-color: white; 
    position:relative; 
    z-index:1; 
} 

.dropdown { 
    display:none; 
    border:1px solid black; 
    border-bottom-width:2px; 
    background-color:white; 
    position:absolute; 
    top:24px; 
    padding:5px 10px; 
    cursor:pointer; 
}

jQuery的：

$(document).click(function(event) { 
    $('.navigation1.active, .navigation2.active').click(); 
    $('.navigation1').removeClass("active"); 
}); 

$('.dropdown').each(function() { 
    $(this).css('left', $(this).prev().position().left); 
}); 

$('.navigation1, .navigation2').click(function(event) { 
    $(this).siblings('.navigation1.active, .navigation2.active').click(); 
    $(this).toggleClass('active').next().toggle(); 
    event.stopPropagation(); 
}); 

$('.navigation1, .navigation2').disableSelection();

問題：

唯一的問題是在右邊的菜單中，當它的下拉滴下來，因爲下拉不夠寬文本最終包裝。我如何根據文本中的文本獲取正確寬度的下拉列表，但允許它在左側伸出。

所以基本上，對於左邊的菜單，下拉從菜單

對於右鍵菜單的右側伸出，下拉應該從菜單左側伸出。

的jsfiddle：

http://jsfiddle.net/mnXdv/53/

來源

2012-11-23 oshirowanen

你不能這樣做使用相同的下拉類爲每個下拉菜單，你應該使用分隔的類或ID – sbaaaang

@oshirowanen你設法解決你的問題？ –

是的，但是，我有同一個腳本的另一個問題：http://stackoverflow.com/questions/13563266/having-issues-with-css-overflowhidden – oshirowanen

所以首先，請檢查該http://jsfiddle.net/MTESY/

如果您看到預期的結果，這種實現方式是通過給你的第二個下拉div一第二課，比如second。之後創建一個css類.second {left: auto ! important; right: 0}。那你應該很好。

來源

2012-11-23 17:08:39

基於jQuery下拉菜單

回答

相關問題