Dolphin CSS Menu
Tweet
Dolphin CSS Menu
This menu is called “Dolphin” because it’s blue… not very creative, I know.
By far the most popular menu on the site to date, readers seem to really like the simple blue colour and stylish gradient which makes the design jump off the screen. Not unlike a leaping dolphin… Too cheesy?
FAQ
- Entire menu system is less than 6KB.
- 5 image files, 1 css file, 1 html file.
- Has been tested and works in over 150 broswer/operating system combos.
- It’s FREE for you to use.
Other Notes
The “About Us” tab has the ON state by adding the “current” class to the A tag.
DEMO
CSS MENU
<style type="text/css">
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_right-ON.gif) no-repeat top right;height:33px;}
</style>
HTML MENU
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://www.phpasks.com/blogs/dolphin-css-menu/" title="css menus"><span>Home</span></a></li>
<li><a href="http://www.phpasks.com/blogs/dolphin-css-menu/" title="css menus"><span>About Us</span></a></li>
<li><a href="http://www.phpasks.com/blogs/dolphin-css-menu/" title="css menus"><span>Services</span></a></li>
<li><a href="http://www.phpasks.com/blogs/dolphin-css-menu/" title="css menus"><span>Our Work</span></a></li>
<li><a href="http://www.phpasks.com/blogs/dolphin-css-menu/" title="css menus"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
No comments yet.