Amazing Multi Style Menu w/ jQuery and CSS
Make a Smooth Animated Menu with jQuery
Animated Menus Using jQuery
Tutorial: How to Create Your Own “kwicks”Effect with jQuery
Tutorial: Create a Cool Animated Navigation with CSS and jQuery
Playing with jQuery Color Plugin and Color Animation
Create a Realistic Hover Effect with jQuery
Tutorial: How to Load and Animate Content with jQuery
Tutorial: How to Create an apple style menu and improve it via jQuery
Sexy Drop Down Menu w/ CSS & jQuery
Rollovers and tooltips with jQuery
Tutorial: How easy to create a slide tabbed box using jQuery
Animated tabbed content with jQuery
Sliding Top Menu With jQuery
Tutorial: Fading Menu & Content Replacing with jQuery
Author: 2E Editorial
is a freelance web and graphic designer as well as developer. He is the author and owner of 2experts Design, a design blog with great inspirational posts. You can follow 2experts design on Twitter.
is a freelance web and graphic designer as well as developer. He is the author and owner of 2experts Design, a design blog with great inspirational posts. You can follow 2experts design on Twitter.
by 2E Editorial in 
Discussion
Excellent collection, because I want to try that on my new website and I am not the best for jquery yet
It is rather simple to use css to design menus.
/* CSS Document */
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
position:relative;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
#navlist li ul
{
display: none;
list-style-type: none;
}
#navlist li ul#menu1
{
margin-left: 0;
padding-left: 0;
position: absolute;
left:0px;
}
#navlist li ul#menu2
{
margin-left: 0;
padding-left: 0;
position: absolute;
left:0px;
}
#menu2 li ul#menu21
{
margin-left: 0;
padding-left: 0;
position: absolute;
top:0px;
left:100px;
}
#navlist li ul#menu3
{
margin-left: 0;
padding-left: 0;
position: absolute;
left:0px;
}
#navlist li ul#menu4
{
margin-left: 0;
padding-left: 0;
position: absolute;
left:0px;
}
#navlist li ul#menu5
{
margin-left: 0;
padding-left: 0;
position: absolute;
left:0px;
}
#navlist li ul li
{
display: block;
border:5px solid red;
}
#navlist li:hover > ul#menu1
{
display:block;
list-style-type: none;
}
#navlist li:hover > ul#menu2
{
display:block;
list-style-type: none;
}
#menu2 li:hover > ul#menu21
{
display:block;
list-style-type: none;
}
#navlist li:hover > ul#menu3
{
display:block;
list-style-type: none;
}
#navlist li:hover > ul#menu4
{
display:block;
list-style-type: none;
}
#navlist li:hover > ul#menu5
{
display:block;
list-style-type: none;
}
/*** CSS Ends Here **/
>>
Item one
Sub Item 0 1
Sub Item 0 2
Sub Item 0 3
Item two
Sub Item 1 1
Sub Item 1 1 1
Sub Item 1 1 2
Sub Item 1 1 3
Sub Item 1 2
Sub Item 1 3
Item three
Sub Item 3 1
Sub Item 3 2
Sub Item 3 3
Item four
Sub Item 4 1
Sub Item 4 2
Sub Item 4 3
Item five
Sub Item 5 1
Sub Item 5 2
Sub Item 5 3
I still prefer the method without the use of javascript because of seo- and access. reasons.
.-= Webdesigner´s last blog ..10 neue kostenlose Metall-Texturen =-.
Muchas gracias por el recopilatorio. Thanks for the post.
.-= Shakira.es´s last blog ..Nuevo video de Madonna “Celebration” =-.
excellent, super collection
i will be back
.-= SEO Rab´s last blog ..????????? ?????? ? PR (free domains with Pagerank) =-.
Honestly? There are better ones! When you did the list you could have pick 14 best out of 20 or 30 … and not 14 out of the 14 first ones that you found!
Cool list! Thx!
Thank u for post. It’s very useful.
thanks a lot, very useful menus
A very helpful collection! Thnx a lot!
Trackbacks and Pingbacks
Leave a Reply