Breadcrumb Content

Main Content

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.

Mr. Blox

I dream in code, find conformity repulsive and drink excessive amounts of coffee...

One Response to “Cool Menu Effect”

  1. JackOfAll

    February 12, 2014

    Cool effects. Can be done several other ways though…