Occasionally I use Theme Forest as a source of inspiration. When it comes to CSS layouts, there are always web designers who have actually created something spectacular that deserves a careful study. Today I've found an HTML site template whose live preview showed an interesting effect on the top borders of the items of a navigation menu. So I decided to try to recreate the original effect of this particular layout.
We'll use the following markup:
<ul id="nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
We can create the effect of alternate borders by simply playing with the top borders of the list items and their child link elements. Of course we have to carefully calculate the overall height of each item:
#nav {
margin: 1em;
padding: 0;
list-style: none;
height: 2em;
border-bottom: 1px solid #ccc;
}
#nav li {
float: left;
height: 1.8em;
margin-right: 1em;
border-top: 0.2em solid #666;
}
#nav li:hover {
border-top-color: #000;
}
#nav a {
display: block;
margin-top: 0.2em;
height: 1.6em;
line-height: 1.6;
padding: 0 1em;
color: #000;
text-decoration: none;
text-transform: uppercase;
border-top: 0.2em solid;
}
#nav a:hover {
border-top-color: #666;
}
If you take a step further, you can also add CSS3 transitions to the mix. You can see the demo below.