0

私はこの種のメニュー構造を持っています

<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'); 
}

スタイリングでわかるように、現在のメニューに左右の境界線とボックスの影が付いたプッシュのような背景を持つメニューが作成されました。私の問題は、メニューの左右両方の境界線が醜く見えることです現在のメニューはその間にあり、それらの境界線を取り除きたい. たとえば、現在のメニューが [About] メニューの場合、[Contact] メニューの左側の境界線と [Portfolio] メニューの右側の境界線を削除する必要があります。これにより、物事がすっきりとクールに見えます。

現在、そのようにする方法を探していますが、今のところ運がありません。

4

2 に答える 2

3

次のように、純粋な 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)
于 2013-07-03T09:31:13.563 に答える
1

少し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/

于 2013-07-03T09:26:51.980 に答える