CSS3 Minimalistic Navigation Menu
As you have probably heard by now, CSS3 animations are a powerful
tool, which enables you to create animations which run without the
need of applying additional scripting to the page. What is even better,
in the next generation of browsers we will have even more powerful
tools, including 3D transformations (already present in Safari).
But what difference does it make for us today?
At the moment only three browsers give you the ability to animate CSS
properties – Chrome, Safari and Opera, which together take up only a
small part of the browser market. Firefox is expected to soon join the
club, and with the impending release of IE9, it suddenly makes sense to
start leveraging this technique.
So today we are making something practical – a simple CSS3 animated
navigation menu, which degrades gracefully in older browsers and is
future-proofed to work with the next generation of browsers.
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.
demo.html
<ul id="navigationMenu">
<li>
<a class="home" href="#">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="#">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="#">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="#">
<span>Contact us</span>
</a>
</li>
</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.
CSS3 Animated Navigation Menu
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
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
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
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
/* The background sprite: */
background:url('img/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
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
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
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.
A PSD file is included in the downloadable archive, so you can customize the images as much as you like.
With this our minimalistic CSS3 navigation menu is complete!
Conclusion
Sooner or later, we are going to have a quick access to powerful,
hardware accelerated graphics, right in the browser. When this day
comes, a whole new world will open to web developers, and we will come
even closer to building rich internet applications, which behave exactly
like native apps.
Till then, we have to make the best with what we have, and slowly start adopting CSS3 techniques into our work.
إرسال تعليق