How To Create An Animated Menu Using CSS

You will find many ways to create an animated menu from using lengthy JavaScript code to the use of flash actionscripts. Though, with commercial sites in mind, it is better to use a cleaner HTML text approach along with CSS to display an engaging and attractive menu.

Here is the menu we will create:

Instead of using JavaScript – which in my opinion becomes less and less compliant with standards as time goes by – we will use a combination of CSS and HTML. The simple animation of the menu boxes is achieved using CSS styles. For this reason, this is another menu that loads quickly and can be customized very easily.

Now here is the code in its entirety with comments. I always add comments in order to allow you to make adjustments easily. Though I assume a basic level of skill with CSS, the code can be customized by most coders of all levels in this way.

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Strip Menu Model</title>

<style type=”text/css”>

.stripboxmenu {padding: 0; width: 100%; /* width of the menu strip, 100% will extend to the full resolution of the screen */

border-top: 5px solid #000033; /*specify the color strip width,color */

background: transparent;

}

.stripboxmenu ul {margin:0;

margin-left: 80px; /*space between first menu item and left edge*/

padding: 0; /*Spacing between the strip and menu boxes*/

list-style: none;

}

.stripboxmenu li {display: inline;

margin: 2 2px 2 2;

padding: 0;

text-transform:uppercase;

}

.stripboxmenu a {

float: left;

display: block;

font: bold 12px Arial; /* Specify the font attributes like font style, boldness */

color: black; /* specify the color of the font */

text-decoration: none; /* remove the default underline of the anchor tag */

margin: 2 2px 2 2; /*Margin between each menu item, you can increase the spacing between the menus by adjusting the attributes*/

padding: 7px 15px 7px 15px; /*with this we can increase the width of the menu item (blue background)*/

background-color: lightblue; /*menu color*/

border-bottom: 9px solid white;

}

.stripboxmenu a:hover{

background-color: #f98a10; /*Mouseover color*/

padding-top: 20px; /*increase the height of the menu on mouseover using padding attribute */

border-bottom-color: #f98a10;

color: white;

}

/*Specify the style for current tab*/

.stripboxmenu .current a{

background-color: #000000;

padding-top: 12px;

border-bottom-color: #000000;

color: white;

}

</style>

</head>

<body>

<div class=”stripboxmenu”>

<ul>

<li class=”current”><a href=”#” title=”home”>Home</a></li>

<li><a href=”#” title=”what we do”>What We Do</a></li>

<li><a href=”#” title=”services”>Services</a></li>

<li><a href=”#” title=”clients”>Clients</a></li>

<li><a href=”#” title=”contact us”>Contact Us</a></li>

</ul>

</div>

<br style=”clear: both;” />

</body>

</html>

Now you have it, a basic animated menu using CSS that you can easily customize and place anywhere on your web site.

Leave a comment