14 free vertical CSS menus


	14 free vertical CSS menus

ericskiff

11-20-2006 1:13 PM

5215 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

Createblog

CSS for Dynamic Data Table Presentation

30 Websites to follow if you’re into Web D...

What Would Jesus Do?

10 Signs you've been using Firefox too long

Free Web Bulding-This I Like

More clips from ericskiff

Hank's Bailout as Nigerian Spam

Oil jumps $25!

T-shirt: Hey Hank... Where's my bailout?

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://www.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/3b350ab3-d593-4283-a557-bbfaf9af86ef/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://www.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/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://www.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/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://www.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/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://www.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/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://www.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/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://content8.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>

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; Blog; Copyright; Privacy; EULA

Search Options

Related Clips

More clips from ericskiff

Today's Top Clips