作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有以下脚本,几乎可以完美运行:
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/MTESY/
如果您看到预期的结果,实现它的方法是为您的第二个下拉列表 div
提供第二个类,比如 second
。之后创建一个 css 类 .second {left: auto !重要的;右:0}
。那你应该很好。
关于基于 jQuery 的下拉菜单在右对齐时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13533129/
我是一名优秀的程序员,十分优秀!