Step 1

We are going to build the list first.

<ul id="menu">
<li><a href="#">Categories</a>
<ul class="submenu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul class="submenu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li><a href="#">Categories</a></li>
</ul>

Step 2

Now we have to apply a skin to the list. Add some styles.

body {
background:url(images/m_bg.gif) repeat-x #b29668;
margin:70px;
}
.red {
color:red;
}
.brown {
color:brown;
}
h2 {
font-family:"Courier New", Courier, monospace;
font-size:19px;
font-weight:normal;
margin-left:39px;
color:#333333;
}
#menu {
background:url(images/menu_bg.gif) no-repeat 0 -1px;
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:1000px;
padding:0;
}
#menu li {
background:url(images/menu_bg.gif) no-repeat 0 -1px;
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:40px;
background:url(images/menu_bg.gif) no-repeat left bottom;
display:block;
float:left;
}
#menu li  span{
background:url(images/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(images/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;
}
#menu li ul li{
background:none;
width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(images/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;
}

I have explained about some css rules above. Just take a look on it.

Step 3

Now the final step, we are going to add some animation effects for the menu with jQuery. First we need to call the jquery.js. It should be like this.

<script src="js/jquery.js" type="text/javascript"></script>

Now the animation jquery code which you have to put inside the head tag.

<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})
</script>

CSS3 Multi-Level Mac-Like Dropdown Menu

WebDesignerWall has shared a multi-level mac like css drop down menu. They used border-radius, box-shadow and text-shadow css properties. The menu renders perfectly with Firefox, Safari and Chrome. IE also rendering the menu well without rounded corners and shadows.

Amazing Photoshop Tab Designs for Web and Applications

Pixlys has comes with a lot of Photoshop designs for Tab Menus. Available styles are Pinned Active Tab, Semi Flat Gradient Dropdown Menu, Rounded Gradient Dropline Tabs, Soft Gradient Dropdown Menu, Glossy Vista Style Dropdown Menus, Glossy Dropdown Menu with 3d Paper Effect etc… All of the tab designs are free for personal use. Can be used with your website, blog or applications. You should register for the free download.

Mega Drop Down Menus

Do you remember I have published a post of CSS Tab-Based Navigation Scripts? Some JQuery menus are. Here Im posting about a new drop down menu more efficient for large scale websites. The solution has come up from SohTanaka – Mega Drop Down Menus. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.

} #prevNextContainer #prev{ float:left; list-style-type:none;

} #prev a{ text-decoration:none; border:1px solid #cacaca; padding:5px 7px; width:100px; display:block; text-align:center; } #prev a:hover{ background:#dadada; border:1px solid #aaaaaa; color:black; } #prevNextContainer #next{ float:right; list-style-type:none; } #next a{ text-decoration:none; border:1px solid #cacaca; padding:5px 7px; width:100px; display:block; text-align:center; } #next a:hover{ background:#dadada; border:1px solid #aaaaaa; color:black; }

Here I’m explaining how to build a previous and next buttons with list and css scripts. Please follow the steps mentioned below.

1) We need a container div. So write a div tag first and give an ID for it. I gave for my div “prevNextContainer”.
2) Write the previous and next lists inside the container div. Give an ID “prev” for previous list and “next” for next list.
<div id="prevNextContainer">
   <li id="prev"><a href="#">Previous<a/></li>
   <li id="prev"><a href="#">Next<a/></li>
</div>
3) Add some styles to the container div.
<style>
#prevNextContainer{
   padding:0px;
   font-family:Tahoma;
   font-size:11px;
   border-bottom:3px solid #dadada;
   height:35px;
}
</style>4) Set margin and padding to zero for ul and li tags.

#prevNextContainer ul, #prevNextContainer li{
   padding:0px;
   margin:0px;
}

5) Now we need to push previous list to left, next list to right and remove the list style. Set float to left for previous list and float to right for next list. Set the list-style-type to none for both.

#prevNextContainer #prev{
   float:left;
   list-style-type:none;
}
#prevNextContainer #next{
   float:right;
   list-style-type:none;
}

6) Now we are going to makeup the buttons. Give some style to the both anchors tags.

#prev a{
   text-decoration:none;
   border:1px solid #cacaca;
   padding:5px 7px;
   width:100px;
   display:block;
   text-align:center;
}
#prev a:hover{
   background:#dadada;
   border:1px solid #aaaaaa;
   color:black;
}
#next a{
   text-decoration:none;
   border:1px solid #cacaca;
   padding:5px 7px;
   width:100px;
   display:block;
   text-align:center;
}
#next a:hover{
   background:#dadada;
   border:1px solid #aaaaaa;
   color:black;
}

7) See the sample below.

Thats it…. Enjoy.

Css Tab Menus

Tab navigation has been one of the most important element in web layouts. Visitors can properly navigate through the website with a tabbed navigation. A tab navigation should help visitors to easily understand where they should be clicking. Here I have compiled a mass list of nice and sleek CSS Tab based navigation samples you can integrate on your site.

1. jQuery idTabs

   

   [ Demo ]

2. Tab Accordian

   

   Tab navigation with animation using Moo FX.

   [ Demo ]

3. CSS Dock Menu

   

   If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery Javascript library and Fisheye component from Interface and some of icons. CSS dock menu by ndesign-studio

   [ Demo ]

4. DHTML Goodies Tab Panes

   

   Tab navigation with animation using Moo FX.

   [ Demo ]

5. AJAX Tabs (Rails redux)

   

   [ Demo ]

6. JQuery Nested Tab

   

   Nested tab set done with the ExtJS UI Library.

   [ Demo ]

7. Ajax Tab Reloaded

   

   Taken the idea of the sliding door tabs and mixed them up with a little javascript and ajax to make them very dynamic on the client side.

   [ Demo ]

8. 14 Free Vertical CSS Menus

   

   Free tabs designed from explodingboy.

   [ Demo ]

9. Control.Tabs

   

   Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.

   [ Demo ]

10. JavaScript tabs with jQuery

    

    jQuery plugin lets you create JavaScript tabs easily. Examples of simple tabs, custom tabs, slide effects, fade effects and callbacks demos available.

    [ Demo ]

11. Yahoo TabView with Skin

    

    Sample tabs from Yahoo UI Library.

    [ Demo ]

12. DHTML Ajax Tabs Content Script

    

    This is a Ajax Tabs Content script. This tabs display content pulled from external files inside a DIV and organized via CSS tabs. CSS and HTML based scripts.

    [ Demo ]

13. JavaScript Tabifier

    

    Automatically create an HTML tab interface using plug-and-play JavaScript.

    [ Demo ]

14. KollerMedia Tabmenu

    

    Simple look tabs changes when mouseover.

    [ Demo ]

15. dhtmlxTabbar

    

    dhtmlxTabbar is a JavaScript tabbar control for creating dynamic tabbed-navigation interface. This Ajax-enabled UI component lets you add feature-rich and nice looking tabs to your site or web application.

    [ Demo ]

16. CSS Tab Designer

    

    CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!

    [ Demo ]

17. Light Weight Low Tech CSS Tabs

    

    An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.

    [ Demo 1, Demo 2 ]

18. Module Tabs – Carousel

    

    Example of showing one page of content at at time in tabs. Each tab link scrolls to the page selected. Since all animation is turned off (animationSpeed = 0) then it just moves the desired content into view.

    [ Demo ]

19. Joshua Kaufman’s CSS Tab 2.0

    

    [ Demo ]

20. Duoh’s 2nd Level Tab Menu

    

    [ Demo ]

21. Nundroo CSS Navigation

    

    [ Demo ]

22. CSS Menu with slider

    

    This little example shows how to make really simple and yet very nice CSS Menu with slider.

    [ Demo ]

23. CSS drop down menu

    

    Instead of the menu being triggered by placing your mouse of the menu label, it is trigger by moving your cursor over the down arrow on the right side of the menu label.

    [ Demo ]

24. Fancy Menu

    

    CSS+Javascript power. Fancy menu.

    [ Demo ]

25. Creative Pony Sliding Tab

    

    Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site.

    [ Demo ]

26. JQuery Tab Animation

    

    This sample shows how to use animations with the AjaxControlToolkit’s TabContainer control.

    [ Demo ]

27. Fancy Sliding Tab Menu

    

    Included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.

    [ Demo ]

28. Sidebar Menu

    

    Sliding JavaScript side bar menu using mootools.

    [ Demo ]

29. Aplus ADxMenu

    

    Most basic examples of tab submenus..

    [ Demo 1, Demo 2, Demo 2 ,Demo 2 ]

30. Bulletproof Slants

    

    [ Demo ]

31. Brainjar Tabs

    

    Using CSS to build a tabbed display. One where the user can click on individual tabs to view different content within the same space.

    [ Demo ]

32. Qrayg CSS Menu (Horizontal & Vertical)

    

    Horizontal and vertical layout modes while maintaining hover persistence.

    [ Demo ]

33. Kalsey CSS Menu

    

    This is a way of accomplishing tabs and subnavigation using only CSS and nested unordered lists.

    [ Demo ]

34. Accessible Image-Tab Rollovers

    

    Css tab: mouse over, out and active tab effects with a single image.

    [ Demo ]

35. HTML Dog CSS Tab

    

    A popular form of navigation is tabbed navigation-a group of links that give the impression of being protrusions attached to different areas of unseen content. With CSS you don’t need to be restricted to rigid images for every tab-you can maintain complete control over appearance and text at a fraction of the file size of image-only alternatives.

    [ Demo ]

36. CSS Tabs Menu with Dropdowns

    

    Create dropdowns when the top level menu item is hovered over.

    [ Demo ]

37. DOMTab

    

    DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded.

    [ Demo ]

38. Animated horizontal tabs

    

    These sliding doors based blue tinted tabs “jump up” when selected, such as when the mouse rolls over each one. This is accomplished using a combination of relative positioning and padding on each tab. The selected tab is first stretched vertically by giving it a thick bottom padding, then plucked out thanks to the CSS “top” property value that’s smaller than the normal tabs’. The result are tabs that animate without any scripting.

    [ Demo ]

39. Inverted Shift Down Menu

    

    This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it.

    [ Demo ]

40. Vista Aero Buttons Menu

    

    This menu consists of a row of independent, Vista aero looking CSS buttons, and departs from the typical list based menu structure. Each button appears initially faded out slightly via CSS opacity, then brought back to full opacity during the “hover” state. The caveat for this menu is the fixed height of each button based on the graphic interface, hence isn’t ideal if the buttons’ font size is changed from the default.

    [ Demo ]

41. DD Tab Menus

    

    DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.

    [ Demo ]

42. Flexible Tab Navigation

    

    The navigation bar shown here is achieved via 3 images, a bit of CSS and some JavaScript.

    [ Demo ]