in

CSS3 Minimalistic Navigation Menu

Tonight I bumped into this beauty, creating a CSS3 minimalistic navigation menu. It is a simple CSS3 animated menu and is perfect for a small site. I also like the colours which degrades beautifully and it will absolutely work with the next generation of browsers.

The tutorial is very detailed and I hope you will enjoy it as much as i did. For better understanding what you will create, check out the  demo here

CSS3 Minimalistic Navigation Menu

CSS3 Minimalistic Navigation Menu

Advertisement

The XHTML

The menu is organized as an unordered list. This is the most suitable structure for a menu, as it provides an easy way to style the menu links and is semantically correct.

01<ul id=”navigationMenu”>
02        <li>
03            <a href=”#”>
04                <span>Home</span>
05            </a>
06        </li>
07
08        <li>
09            <a href=”#”>
10                <span>About</span>
11            </a>
12        </li>
13
14        <li>
15             <a href=”#”>
16                <span>Services</span>
17             </a>
18        </li>
19
20        <li>
21            <a href=”#”>
22                <span>Portfolio</span>
23            </a>
24        </li>
25
26        <li>
27            <a href=”#”>
28                <span>Contact us</span>
29            </a>
30        </li>
31    </ul>

Inside each li we have a hyperlink with a span inside it. By default these spans are hidden, and are only shown when you hover over the link. Each link has a unique class name, which is used to give it a unique background and style the inner span, as you will see in a moment.

The CSS

Once we have the basic structure in place, we can now move to creating the fancy CSS3 effects and styling. This works even on browsers, which do not support CSS3 transition animations (all browsers except Chrome, Safari and Opera, at the moment of this writing) albeit with less glitter. The menu is even perfectly usable in browsers as old as IE6.

styles.css – Part 1

01    *{
02        /* A universal CSS reset */
03        margin:0;
04        padding:0;
05    }
06
07    body{
08        font-size:14px;
09        color:#666;
10        background:#111 no-repeat;
11
12        /* CSS3 Radial Gradients */
13        background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
14        background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
15
16        font-family:Arial, Helvetica, sans-serif;
17    }
18
19    #navigationMenu li{
20        list-style:none;
21        height:39px;
22        padding:2px;
23        width:40px;
24    }

For the styling of the body background, I first supplied a background color, which acts as a fallback, and then added two CSS3 radial gradients (for Firefox and Chrome/Safari respectfully) as background images. If the visitor’s browser does not support gradients, it will just ignore the rules and go with the plain background color.

You can see in the styles, that most of the rules are preceded by the id of the unordered list – #navigationMenu. This is to prevent collisions with the rest of your page styles, if you incorporate the menu into your site.

styles.css – Part 2

01    #navigationMenu span{
02        /* Container properties */
03        width:0;
04        left:38px;
05        padding:0;
06        position:absolute;
07        overflow:hidden;
08
09        /* Text properties */
10        font-family:’Myriad Pro’,Arial, Helvetica, sans-serif;
11        font-size:18px;
12        font-weight:bold;
13        letter-spacing:0.6px;
14        white-space:nowrap;
15        line-height:39px;
16
17        /* CSS3 Transition: */
18        -webkit-transition: 0.25s;
19
20        /* Future proofing (these do not work yet): */
21        -moz-transition: 0.25s;
22        transition: 0.25s;
23    }
24
25    #navigationMenu a{
26        /* The background sprite: */
27        background:url(‘img/navigation.jpg’) no-repeat;
28
29        height:39px;
30        width:38px;
31        display:block;
32        position:relative;
33    }
34
35    /* General hover styles */
36
37    #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
38    #navigationMenu a:hover{
39        text-decoration:none;
40
41        /* CSS outer glow with the box-shadow property */
42        -moz-box-shadow:0 0 5px #9ddff5;
43        -webkit-box-shadow:0 0 5px #9ddff5;
44        box-shadow:0 0 5px #9ddff5;
45    }

The CSS3 transition property is  a really powerful one. It enables you to animate changes that occur on a element when a pseudo properties take effect. For example here, when the user moves their mouse over a navigation link, the :hover pseudo-property takes effect, showing the span which is otherwise hidden.

Without the definition of a transition property, this change is instantaneous. But with a transition we can animate it. Here we are telling the browser, that the duration of the animation is 250 milliseconds. You can optionally specify a list of specific properties to be animated instead of all of them.

Transitions are currently only supported in webkit based browsers (Safari and Chrome), but the next version of Firefox is also expected to support them, so we future-proof the script by specifying a -moz-transition.

The CSS3 Transition

styles.css – Part 3

01    /* Green Button */
02
03    #navigationMenu .home { background-position:0 0;}
04    #navigationMenu .home:hover {   background-position:0 -39px;}
05    #navigationMenu .home span{
06        background-color:#7da315;
07        color:#3d4f0c;
08        text-shadow:1px 1px 0 #99bf31;
09    }
10
11    /* Blue Button */
12
13    #navigationMenu .about { background-position:-38px 0;}
14    #navigationMenu .about:hover { background-position:-38px -39px;}
15    #navigationMenu .about span{
16        background-color:#1e8bb4;
17        color:#223a44;
18        text-shadow:1px 1px 0 #44a8d0;
19    }
20
21    /* Orange Button */
22
23    #navigationMenu .services { background-position:-76px 0;}
24    #navigationMenu .services:hover { background-position:-76px -39px;}
25    #navigationMenu .services span{
26        background-color:#c86c1f;
27        color:#5a3517;
28        text-shadow:1px 1px 0 #d28344;
29    }
30
31    /* Yellow Button */
32
33    #navigationMenu .portfolio { background-position:-114px 0;}
34    #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
35    #navigationMenu .portfolio span{
36        background-color:#d0a525;
37        color:#604e18;
38        text-shadow:1px 1px 0 #d8b54b;
39    }
40
41    /* Purple Button */
42
43    #navigationMenu .contact { background-position:-152px 0;}
44    #navigationMenu .contact:hover { background-position:-152px -39px;}
45    #navigationMenu .contact span{
46        background-color:#af1e83;
47        color:#460f35;
48        text-shadow:1px 1px 0 #d244a6;
49    }

In the last part of the styling, we specify 5 different designs for the navigation links. All the background images for the links are contained inside a single sprite file. They have a normal and a hover state one under another. When a hover occurs, the background is offset to show the appropriate version of the background image. The menu is now done!

A thanks to tutorialzine for a brilliant tutorial

Advertisement

Written by Jonny

Hi! I am the author and publisher of this site. Please feel free to comment the articles and don´t forget to share the articles!

Leave a Reply

Your email address will not be published. Required fields are marked *