Gordonmac Dot Com

I decided to do something a little different with the main navigation for this version of Gordonmac.com. You’ll notice that when you hover your mouse over a navigation button the rest of the buttons fade to highlight the one you’re pointing at. View Demo

There is no jQuery involved in this effect, it’s simply CSS3. Here’s how to do it:

HTML Markup

<nav role="navigation" id="navigation-main">
<ul id="menu-main-navigation" class="nav-main">
<li class="current-menu-item"><a href="#">Navigation Item</a></li>
<li><a href="#">Navigation Item</a></li>
<li><a href="#">Navigation Item</a></li>
<li><a href="#">Navigation Item</a></li>
<li><a href="#">Navigation Item</a></li>
</ul>
</nav>

That’s fairly simple. It’s a list of menu items nested inside a HTML5 <nav> element, you can replace that with a <div> if you’re still using xHTML or an earlier HTML version, just remember to keep the same ID.

The CSS

The CSS for this involves getting your hands dirty with some slightly modern CSS, but I’ve tried to explain what it all does under each block of code.

#navigation-main ul {
background: #ededed;
text-align: center;
padding: 15px 0;
list-style: none;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

This rule sets a background colour for the list containing the navigation buttons, aligns the text of each button center, adds some padding to the top and bottom of the list, removes the bullets and then curves the bottom left and bottom right corners of the list.

#navigation-main ul:hover li {
opacity: 0.2;
}

This rule selects every list item (<li>) in the list when the user places their mouse pointer over the list, and reduces the opacity of them to 0.2.

#navigation-main ul li {
display: inline;
margin: 0 40px 0 0;
text-transform: uppercase;
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-moz-transition-property: opacity;
-moz-transition-duration: 500ms;
}

This rule stops the list items from appearing underneath each other (block) by displaying them in a line (inline) and places a right margin to separate them. It also sets the transition effect when they fade.

#navigation-main ul li:hover {
opacity: 1;
}

This rule removes the opacity from the individual list item being hovered by the user’s mouse pointer.

#navigation-main ul li:last-child {
margin-right: 0 !important;
}

Here we remove the right separating margin from the last list item in the list.

#navigation-main ul li a {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #c3c3c3;
text-decoration: none;
padding: 5px 10px;
background: #fff;
}

This rule styles the actual link and creates the shape of the button you see in the example by setting its background and font colours. It also adds a transition effect to the buttons and rounds them at the corners by 10 pixels.

#navigation-main ul li a:hover, #navigation-main ul li a:focus, #navigation-main ul li a:active, #navigation-main ul li.current_page_item a, #navigation-main ul li.current-menu-item a {
background: #666;
color: #fff;
}

Finally we create the hover, focus, active and current state styles. A simple background colour and text colour change is all that’s going on here.

That’s all there is to it folks, have fun. View Demo