14 free vertical CSS menus


	14 free vertical CSS menus
ericskiff
11-20-2006 1:13 PM
7667 views
tags:
css, menu, navmenu, web, development
ericskiff says:
Sometimes it's better not to bother reinventing the wheel.
Here's some great CSS menu designs to give a solid navigation element to your site using only ul and li in the html.
1 Comment |
Add a Comment
11-22-2006 1:48 AM
cbarr
Thanks for visiting my clips. And thanks for commenting.
Login to Comment. Not a member yet? Sign up
Today's Top Clips

visit the Top Clips page
View the Top Clips from November 20, 2006
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/9617e190-475b-4c1b-a645-0ad131560b17/C3BB8583-C633-4DF9-AF84-02079F1E11FD/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/" href="http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/" style="font-size: 11px;">www.exploding-boy.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/"><P>After receiving several email requests from visitors asking for vertical menus I decided to create <A href="http://exploding-boy.com/images/EBmenus/menus.html">14 free vertical menu designs</A>. You may <A href="http://exploding-boy.com/images/EBmenus.zip">download the entire set</A> and use any way you see fit. Like the last <A href="http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/">two</A> <A href="http://www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs/">sets</A> of menus these can be used for commercial or private use. Have fun with all the menus.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/"><P><A href="http://www.exploding-boy.com/images/EBmenus/menus.html">See all the menus</A>.
<A href="http://www.exploding-boy.com/images/EBmenus.zip">Download the entire menu set</A>.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/"><P>Be sure to check out <A href="http://e-lusion.com/design/menu/" title="e-lusion.com">E-lusion.com</A> for <STRIKE>more</STRIKE> better menu design examples.
</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/"><H4>Related Entries</H4></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content8.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.exploding-boy.com/2006/01/16/4-level-deep-css-menus/" href="http://www.exploding-boy.com/2006/01/16/4-level-deep-css-menus/" style="font-size: 11px;">www.exploding-boy.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.exploding-boy.com/2006/01/16/4-level-deep-css-menus/"><li style="margin-left:16px;padding-left: 0px;"><A title="Permanent%20Link:%204%20Level%20Deep%20CSS%20Menus" rel="bookmark" href="http://www.exploding-boy.com/2006/01/16/4-level-deep-css-menus/">4 Level Deep CSS Menus</A></LI></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content9.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs/" href="http://www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs/" style="font-size: 11px;">www.exploding-boy.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs/"><li style="margin-left:16px;padding-left: 0px;"><A title="Permanent%20Link:%20More%20Free%20CSS%20Navigation%20Menu%20Designs" rel="bookmark" href="http://www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs/">More Free CSS Navigation Menu Designs</A></LI></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content6.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/" href="http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/" style="font-size: 11px;">www.exploding-boy.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/"><li style="margin-left:16px;padding-left: 0px;"><A title="Permanent%20Link:%20Free%20CSS%20Navigation%20Menu%20Designs" rel="bookmark" href="http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/">Free CSS Navigation Menu Designs</A></LI></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content7.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.exploding-boy.com/2006/11/02/updated-centered-sliding-doors-menus/" href="http://www.exploding-boy.com/2006/11/02/updated-centered-sliding-doors-menus/" style="font-size: 11px;">www.exploding-boy.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.exploding-boy.com/2006/11/02/updated-centered-sliding-doors-menus/"><li style="margin-left:16px;padding-left: 0px;"><A title="Permanent%20Link:%20Updated%20Centered%20Sliding%20Doors%20Menus" rel="bookmark" href="http://www.exploding-boy.com/2006/11/02/updated-centered-sliding-doors-menus/">Updated Centered Sliding Doors Menus</A></LI></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content8.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.exploding-boy.com/2006/01/04/css-templates-and-samples/" href="http://www.exploding-boy.com/2006/01/04/css-templates-and-samples/" style="font-size: 11px;">www.exploding-boy.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.exploding-boy.com/2006/01/04/css-templates-and-samples/"><li style="margin-left:16px;padding-left: 0px;"><A title="Permanent%20Link:%20CSS%20Templates%20and%20Samples" rel="bookmark" href="http://www.exploding-boy.com/2006/01/04/css-templates-and-samples/">CSS Templates and Samples</A></LI></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/C3BB8583-C633-4DF9-AF84-02079F1E11FD/blog/" title="blog or email this clip"><img src="http://content9.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>
New from the makers of Clipmarks: Amplify.com - Don't just share the news...Amplify it!
Clipmarks: Home; New Clips; Top Clips; Dashboard
Popular Topics: News; Life; Science; Technology; Entertainment
Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch
Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map
About Clipmarks: About Us; Contact; Copyright; Privacy; EULA
Search Options

Today's Top Clips
