CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Juliver Galleto
Juliver Galleto

Reputation: 9047

menu borders, current menu borders css

I have this kind of menu structure

<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>

and a css for the menu

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

as you can see in styling, it produced a menu with a left and right border and a pushed like background with box shadow in the current menu, my problem is, the borders in the both left and right side of the menu looks ugly when the current menu is on between and I want to get rid of those borders. I mean for example, when the current menu is the About menu, now the left side border of the Contact menu must be removed as well as the right side border of the Portfolio menu, in that way things will look neat and cool.

Currently Im looking for a way on how to make it that way but no luck so far.

Upvotes: 0

Views: 391

Answers (2)

vee
vee

Reputation: 1246

You can do this with pure CSS as follows (see JSFiddle here):

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

Basically, the idea is this:

  • Only use border-left
  • Remove the border on
    • The first item (#navigation li:first-child)
    • The current item (.current-menu-item, .current_page_item)
    • The item immediately following the current item (.current-menu-item + li, .current_page_item + li)

Upvotes: 3

boz
boz

Reputation: 4907

You could use a bit of 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');

Demo: http://jsfiddle.net/sDFzS/

Upvotes: 1

Related Questions