菜单边框,当前菜单边框css
menu borders, current menu borders css
我有这种菜单结构
<nav id="navigation">
<ul class="menu">
<li class="current-menu-item currrent_page_item"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
和菜单的css
#navigation{float: right; padding: 10px 0px; display: block;}
#navigation li{float: left; display: inline;}
#navigation li a{
padding: 10px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
}
#navigation li{
padding: 0px 2px;
border-left: 1px solid #292929;
border-right: 1px solid #605f5f;
}
#navigation li:first-child{
border-left: none !important;
}
#navigation li:last-child{
border-right: none !important;
}
.current-menu-item a, .current_page_item a{
background: #414141;
border: 1px solid #4b4b4b !important;
border-bottom: 1px solid #323232 !important;
-moz-box-shadow: inset 0 0 10px #353333;
-webkit-box-shadow: inset 0 0 10px #353333;
box-shadow: inset 0 0 10px #353333;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior:url('border-radius.htc');
}
正如你在造型中看到的,它生成了一个带有左右边框的菜单,在当前菜单中有一个带框阴影的推式背景,我的问题是,当当前菜单处于两者之间时,菜单左侧和右侧的边框看起来都很难看,我想去掉这些边框。我的意思是,例如,当当前菜单是"关于"菜单时,现在必须删除"联系人"菜单的左侧边框以及"公文包"菜单的右侧边框,这样一来,事情就会看起来整洁而酷。
目前,我正在寻找一种方法,如何做到这一点,但目前还没有运气。
您可以使用纯CSS如下所示(请参阅此处的JSFiddle):
#navigation {
float: right;
padding: 10px 0px;
display: block;
}
#navigation li {
float: left;
display: inline;
}
#navigation li a {
padding: 10px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
}
#navigation li {
padding: 0px 2px;
border-left: 2px solid #292929;
}
#navigation li:first-child,
.current-menu-item,
.current_page_item,
.current-menu-item + li,
.current_page_item + li
{
border-left: none !important;
}
.current-menu-item a,
.current_page_item a {
background: #414141;
border: 1px solid #4b4b4b !important;
border-bottom: 1px solid #323232 !important;
-moz-box-shadow: inset 0 0 10px #353333;
-webkit-box-shadow: inset 0 0 10px #353333;
box-shadow: inset 0 0 10px #353333;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior:url('border-radius.htc');
}
基本上,想法是这样的:
- 仅使用左侧边框
- 删除上的边框
- 第一项(
#navigation li:first-child
) - 当前项目(
.current-menu-item, .current_page_item
) - 当前项目(
.current-menu-item + li, .current_page_item + li
)后面的项目
- 第一项(
您可以使用一点jquery:
$('.current-menu-item').css('border','none');
$('.current-menu-item').next('li').css('border-left','none');
$('.current-menu-item').prev('li').css('border-right','none');
演示:http://jsfiddle.net/sDFzS/
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- angular的下拉菜单
- 如果我在javascript中输入无效的电子邮件或空白,如何显示特定的文本框边框红色
- 使用JQuery的动态上下文菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- Div根据<选择>菜单
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 将JavaScript弹出菜单转换为警报框
- 调整屏幕大小后不显示子菜单
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 我的下拉菜单中的链接不起作用
- 单击“菜单”时,菜单项在屏幕上居中,具有褪色背景和边框效果
- 菜单边框,当前菜单边框css
- 如何显示菜单项边框,即使文档正在重新加载
- 如何添加边框半径到下拉菜单
- CSS菜单边框/框阴影