我有以下几乎可以完美运行的脚本:
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>
</p>
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: