20+ Excellent Scripts For Javascript And CSS Menus

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.

fg_menu

Demo | Source

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.

vimeo_menu

Demo | Source

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.

circular_menu

Demo | Source

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.

sliding_menu

Demo | Source

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.

menumatic

Demo | Source

6) Lwis Dropdown Menu Framework - Highly recommended for new learners, the framework is total CSS and modular, the cdes are easily deployable and can be transferred into horizontal, vertical left-to-right, vertical right-to-left, horizontal linear. It has cross browser support but has minimal javascript for IE and ofcourse superfast. I has some inbuilt templates which mimics various big sites such as Adobe, Flickr, Nvidia etc.

lwis_menu

Demo | Source

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.

dock_menu

Demo | Source

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.

css_dock

Demo | Source

9) CSS Sprites 2 - This is a tutorial on using jQuery to built sprite type menus in normal CSS, Javascript instead of Flash. The tutorial is really good and shows you all steps in creating the menu. The menu example shown is really cool and worth looking to it.

sprites_menu

Demo |   Source

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.

nettuts

Demo |   Source

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 !!

lavalamp1

Demo |   Source

12) Phat Fusion Image Menu – The name suggests its not regular menu but an image menu, this is really cool way of interacting with visitors. The menu have been constructed using mootools javascript framework. The images cooly reveals more of it when mouse is hovered over it. It stays open when clicked. Great example of mootools implementation.

phatfusion1

Demo |   Source

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.

simple

Demo |   Source

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.

advanced_css_menu1

Demo |   Source

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.

uvami

Demo |   Source

16) Ext JS Tree Panel – This is an excellent Javascript menu with drag and drop capabilities. The tree is asynchronously loaded with a JSON TreeLoader.

dragdrop

Demo |   Source

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.

appele1

Demo |   Source

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.

hoverbox

Demo |   Source

19) Styled Menus – A Depot of highquality CSS Menus.

style

20) Dynamic Drive – Practical CSS codes and examples such as CSS menus.

21)  Top 71 Menu Navigation Tabs

22) 13 Styles – Free CSS Menu Download

23) Yahoo UI Library Menu

Going through this post you can see that javascript is really replacing flash to some extent on menus and interactivity. Most used library is jQuery following it is Mootools which is pretty self explanatory. If you know some more sources please comment here so i can add them to the list. Last but not the least Please Share with your friends by tweeting and digging and help us grow.

Tags: , , , , , , , , , , ,

9 Responses to 20+ Excellent Scripts For Javascript And CSS Menus

  1. [...] Read the original post:? 20+ Excellent Awesome Javascript And CSS Menus [...]

  2. [...] 20+ Excellent Awesome Javascript And CSS Menus | PCandWEB [...]

  3. [...] Read more: 20+ Excellent Awesome Javascript And CSS Menus | PCandWEB [...]

  4. [...] I have seen many jQuery menu examples, but I think that this ones are the best of them. jQuery is a create javascript library that is taking the Web Design to another level. To see all this great examples of jQuery Menus please follow this link. [...]

  5. ajans says:

    thank you admin ;)

  6. cuaryos says:

    Great. a lot menu java script and css here, all awesome menu. thank
    .-= cuaryos´s last blog ..How To Recover HDD Data =-.

  7. genux says:

    another great find, sometimes you just want to have some cool javascript code and spend allot of time searching for it.. just list of code.

  8. Graphiics says:

    Its really cool..but i like very much “Vimeo-like Top Navigation”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>