CSS3 offers so many possibilities to create cool rollovers on website menus. Here’s a simple way to spice up your navigation with just a sprinkle of CSS magic. This technique takes your typical list based navigation and adds a nice rollover effect. Obviously this is only visible on modern browsers, but it fails very gracefully for the others. Dan Voyce explains how he created this effect.
Dan Voyce will start with HTML by creating his buttons for the nav. He’ll wrap them in an unordered list. Now lets go to the CSS. Nothing too complex here. First he sets the width he wants for the box around his nav (in this case the unordered list) then set the background colour. Next Dan Voyce will style up the buttons. He’ll start by making them block level, so that the whole area reacts to the mouse. He’ll then set the width, padding and margin. Chuck some top and bottom padding so that the text sits centrally on the button, and some bottom margin so the buttons have some space. Finishing by setting the text colour and applying a border to the bottom of the button.
Comments
Be the first to write a comment
You must me logged in to write a comment.