Menus are an integral part of a website, a site with good menu structure always has greater pageviews due to the accessibilty of the site. Menus should be visually appealing and should appeal users to browse through them. In this post i have tried to make a list of such menus so that you can use them on your next project or on your site. Some of them are simple old menus implemented differently and many are also tutorials, get inspiration or simply copy paste code and create your menu.
1) FG jQuery Menu – This menu comes with various attractive styles such as Dropdown, iPod Drilldown, and Flyout styles, it looks really fantastic and attractive. The menu has ARIA Support and Theme Roller ready and can be easily edited to suit your needs. The i-pod style menu with breadcrump works like deviantart menus.This is a sure check for those who wants dropdown style menus.
2) Vimeo-like Top Navigation – Anather awesome looking menu inspired from vimeo, with hover dropdown and search box. Extremely useful for catagorising search. The menu is fully based on CSS so is of very small size. Extemely easy and very much flexible.
3) Circular Menu – A really unique type of menu, and even have submenu support, may be used in portfolio sites. Created solely using CSS looks very cool. This one’s a check if you wan’t to learn CSS and know its power, or if you like to integrate it.
4) Sexy Sliding Menu – Andrew Sellick decided to use mootool and create a good looking sliding menu which can save space problem and well as look attractive. He pretty much succeded though it has some pitfalls such as CSS issues in safari, more over in my test in firefox it did work inconsistently, but maybe someone can fix it and its a good example so i’ll keep it in this list.
5) MenuMatic – This is a awesome menu developed by greengecko design, It uses mootools 1.2 class and uses semantic odered or unodered list and turns them into menu. The best of all its SEO friendly, Stylish and Flexible. This menu can be used in two ways horizontally or vertically. The menu is extremely smooth and slight transparent giving it a very cool look.
7) Web 2.0 Dock Menu – Web 2.0 dock menu by 2210 media is derived from whalesalad.com, the menu pops up when ever the mouse hovers on a particular area in header and goes away on mouse out, the animation is smooth and fast and is majorly supported by browsers. The menu it self looks cool and though not totally web 2.0 but its elegant with its transparency.
8) CSS Dock Menu – Though the name is CSS Dock but it actively dependant on jQuery. This ones my personal favourite and i’m sure all mac fans out there will like it. It comes with 2 dock styles top and bottom. I don’t know how feasable it is for using in regular sites but its very good thing to study.
10) jQuery Animated Navigation – This tutorial and source is brought by nettuts which has numerous high quality tutorials under its hoods. This tutorial shows a really cool navigation created by jQuery and CSS, ditching Flash which was almost a nomenclature for cool menus for few years ago.
11) Lava Lamp – Lava Lamp by ganesh is yet anather jquery menu, with cool sliding effect in the background, i have seen many versions of this menu in different sites and they were implemented really cool ways. So this is a must addition here. Moreover the menyu script is just 1KB in size !!
13) Simple Animated Mootools Menu – Consideropen.com published a tutorial on how to simply create the menu they have on their site using mootools. The arrow on top of their menu slides from one option to another when mouse id hovered over it. The implemented menu looks really cool and you should have a look at it.
14) Advanced CSS Menu – This one is a great example of using CSS to create advanced menu. The tutorials talks about slicing and the menu design and putting together in css to craete a great effect. This is a must check.
15) UvamiTools Dropdown Menu – This is another mootools menu built from unodered list, it has multilevel support. The menu is cross browser compatible and Customisable in CSS.
17) Apple Style Menu – This is an improved version of apple inspired menu using jQuery. The menu looks really cool the tutorial teaches creating the menu from scratch starting from photoshop.
18) Hover Box – The menu was inspired from Hoverbox Image Gallery developed by Nathan Smith, the basic concept of the menu is that it gets bigger when anyne hovers on it. Created purely by CSS, though it doesn’t look cool, but i’m sure graphic designers out there can easily modify to suit their needs and looks.
19) Styled Menus – A Depot of highquality CSS Menus.
20) Dynamic Drive – Practical CSS codes and examples such as CSS menus.
22) 13 Styles – Free CSS Menu Download