Dynamic Blox

A Web Design Resourse

Breadcrumb Section

Cool Menu Effect

October, 02, 2013 | CSS

A while ago I was experimenting with the navigation menu on one of the projects I was wrapping up. I began thinking out of the box and wanted to use color combinations that are outside of my safe zone. My designs often reflect the way I dress; very safe and often dark colors. I came up with this really cool menu effect you can see below in Photoshop first.

JigSaw

I quickly converted it to HTML, but ran into a problem. I did not want to create a custom class for every link on the navigation menu. I decided to use the :nth pseudo-class. At first I was worried about support, but quickly decided not to give a flying “F” about older browsers.  I know this can be sacrilegious to most front-end developers, but someone has to force the masses into the present. In any event, I began with a simple HTML menu.

<header>

     <h1>Menu Effect</h1>

<nav>

    <ul>
        <li><a href="">HomePage</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Testimony</a></li>
        <li><a href="">Mission</a></li>
        <li><a href="">Contact</a></li>
    </ul>

</nav>    

</header>

Nothing special there and I want to keep it that way. Keep in mind that this simply for aesthetics and nothing else.  I began adding the CSS.

         header nav {display: block;background:#ddd;position: relative;}

        header nav ul{display: block;width: 100%;min-height: 50px;border-bottom: 1px #cbcbcb solid;
        border-top: 1px #ddd solid;background: none;padding: 0px;margin: 0px;}

        header nav ul li{list-style: none;display: inline-block;padding: 0px;margin: 0px 0px;min-width: 160px;
        max-width: 100%;width: 16.66666666666667%;text-align: center;background: none;position: relative;}

       header nav ul li:first-child{background:#505050;}
       header nav ul li:nth-child(2){background:#606060;}
       header nav ul li:nth-child(3){background:#707070;}
       header nav ul li:nth-child(4){background:#808080;}
       header nav ul li:nth-child(5){background:#909090;}
       header nav ul li:nth-child(6){background:#a0a0a0;}

        header nav ul li a{text-decoration: none;font-family: sans-serif;color: #f5f5f5;font-size: .9em;
        line-height: 50px;padding:0px;margin: 0px 0px;text-align: center;display: block;}

         header nav ul li a:hover{background: #448CCB;}

Everything seemed to b going well until I decided to use the “inline-block” element instead of floating the list items and ended up with a menu that looked like this.

example1

Apparently, “inline-block” automatically adds a small margin in between you list items. Fortunately there is a fix, if you add negative “letter-spacing” to the parent element, which is the “ul” tag it will correct the problem. You just have to remember to revert the “letter-spacing” tag to normal in the child element. Like magic, it all worked and I have the exact effect that I wanted without all the extra classes.

 header nav ul{display: block;width: 100%;min-height: 50px;border-bottom: 1px #cbcbcb solid;
        border-top: 1px #ddd solid;background: none;padding: 0px;margin: 0px;letter-spacing: -.3em;}

        header nav ul li{list-style: none;display: inline-block;padding: 0px;margin: 0px 0px;min-width: 160px;
        max-width: 100%;width: 16.66666666666667%;text-align: center;background: none;position: relative;
        letter-spacing: normal;}
example2

You can find a ton of information on the web about “:nth” pseudo-class, and the “inline-block” tag. They work on all current browsers and if you want to know more about support you can go to Can-I-Use website for more info. You can view or download an example here.