Menu and Navigation Scripts

Sub Categories

jQuery Gooey Menu FF2+ IE7+ Opr8+
jQuery Gooey Menu uses the popular "lava lamp" effect to create CSS menus with a moving gooey background effect. Whenever the mouse moves over a menu item, the desired style that indicates the selected menu item follows the mouse to that item, smoothly highlighting the currently active item.

DD ScrollSpy Menu FF2+ IE8+ Opr8+
For long pages with lots of content, keeping the user oriented and knowing where within the page he/she is at all times can be challenging. DD ScrollSpy Menu solves this problem, by letting you create a menu whose menu items are automatically highlighted based on the portion of the page the user is currently viewing.

Responsive Side toggle Menu FF2+ IE8+ Opr9+
Side Toggle Menu lets you add a side bar menu to your page that slides in from the left or right edge of the browser window. It supports two types of unveiling- either by nudging the rest of the page and making room for itself, or overlaying the page (and not displacing its neighbours).

Page Sideview Menu FF2+ IE8+ Opr9+
This menu displays itself prominently on the page with the help of css3 transforms and transitions. The menu glides in from the left edge of the screen while shrinking the rest of the page content into the background, bringing the user's focus squarely on the menu itself. Clicking anywhere on the page again hides the menu and returns the page back to its original state.

Side Push Menu FF2+ IE8+ Opr9+
This is the emblematic menu of the mobile web era- it's a side bar menu that when opened pushes aside the rest of the page's content horizontally, similar to the navigation menu found on Facebook Mobile. It supports either a left or right orientation, with the contents of the menu optionally pulled from an external file on the server.

eFluid Responsive Top Menu FF2+ IE8+ Opr9+
Inspired by the drop down menu seen at the top of pages throughout Dynamic Drive,  eFluid menu is a responsive top menu that adapts to different devices and screen sizes elegantly, using CSS  media queries only to trigger the different break points.

Chrome CSS Drop Down Menu FF1+ IE5+ Opr7+
Chrome Menu is a stylish CSS and JavaScript hybrid drop down menu. It's easy to configure and search engine friendly. The menu links is based on a list, while the drop down menus are simply regular DIV tags on page. Extremely compact, the menu is around 6k in size, including the interface images used.

Responsive Hybrid Menu FF2+ IE8+ Opr8+
Hybrid Menu a responsive, 2 level navigation menu with multiple stages of adaptation depending on the user's screen size. The menu changes from a regular top menu bar with text anchors, to icons based, and finally to a left side bar menu as the user's screen size decreases.

Split Menu Buttons FF4+ IE8+ Opr9+
Split Menu Buttons combine the sleek aesthetics of menu buttons with the versatility of drop down menus to create a navigational interface that captures the best of both worlds. It renders attractive CSS based oval buttons with an optional "toggle" element dynamically added next to it that reveals a drop down menu when interacted with.

Ergo Drop Down Menu Control FF+ IE1+ Chrome
This is an elegant drop down menu that takes a regular UL list and transforms it into either an expanding menu, or standard drop down menu. Use it to replace the default form SELECT menu, as an expanding table of contents list on the page, or even a regular navigation menu.

Drop Down Tabs (5 styles) FF1+ IE5+ Opr7+
Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs. Like its cousin DD Tab Menu below, it comes with 5 attractive menu designs built in to make your life a little bit easier.

DD Tab Menu (5 styles) FF1+ IE5+ Opr7+
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. It comes with 5 sleek tab menu designs to choose from by default.
Retired script as a result: DD Tab Menu II

Horizontal hover menu FF1+ IE5+ Opr7+
A CSS horizontal menu with links that hovers up when the mouse moves over them. In select browsers, the links depress as well on mousedown.

Omni Slide Menu FF1+ IE5+ Opr7+
-User Submitted
Omni Slide Menu is an super versatile slideout menu that reacts to the mouse hovering over and out of it. It can be positioned to the left, top, or right edge of the browser window, supports static positioning, plus multiple instances of the same menu on a page and more. Very cool.

Dynamic-Fx Slide-In Menu FF1+ IE5+ Opr7+
-User Submitted
A multi-featured slide-in menu script that supports some of the most requested features such as frame targeting, static positioning, and header(s) displays.

Slide-In Links FF1+ IE5+ Opr7+
-User Submitted
Tuck away those links and make them visible only when needed with this script! A bar of links is slided out from the left edge of the window when the protruding part is clicked on. Great way to maximize realty space on your site.

Accordion Menu script FF1+ IE6+ Opr9+
A list based vertical menu with nested content that expand and contract when the user clicks on a menu header. Specify which menu headers are expandable, style the headers differently depending on whether its content is expanded or not, and specify whether persistence of the menu states within a browser session should be enabled. Clean CSS and HTML make up the menu, and is very adaptable to customization.

Switch Menu FF1+ IE5+ Opr7+
-User Submitted
Switch Menu is a unique navigational script with characteristics of a folding tree. It dynamically expands the chosen menu item when clicked on (revealing the containing links) while contracting the rest.

Switch Menu II FF1+ IE5+ Opr7+
-User Submitted
Switch Menu II like its cousin creates menu headers that expand and contact when clicked on to reveal additional links within. A smooth "Win XP" style animation is applied during the unfolding of the links.

Slashdot Menu FF1+ IE5+ Opr7+
-User Submitted
This is a stylish collapsible menu modelled after the navigational menu found on Slashdot. Configure the menu in a multitude of ways, such as which sub menus to expand by default, whether to persist menu states using cookies, to the speed in which menu items expand/ collapse. Very cool.

Static Menu script FF1+ IE5+ Opr7+
-User Submitted
Add an elegant, visible-from-the-start static menu to your site with this script! Both the menu's dimensions and its static location on the page can be easily configured, making it a piece of cake to integrate the menu to conform to your site's layout.

Drop down menu w/ description FF1+ IE5+ Opr7+
This is your straightforward drop down menu constructed using the <SELECT> tag, except in IE5+ and NS6+, a description of each selection is displayed beneath it!

Mouseover Tabs Menu FF1+ IE5+ Opr7+
This is a mouseover tabs menu. Move the mouse over designated links, and additional "sub links" appear beneath it. Think of it as an inline two level menu. The sub menu contents are defined inside an external file and fetched via Ajax when the page loads.

Priority+ Scrolling MenuPriority+ Scrolling Menu FF2+ IE10+ Opr8+
A one line horizontal menu that uses the mouse or swiping (on touch screen devices) to scroll though any obscured links. Responsive and adaptive, it maintains its one line form regardless of the parent container's size

Animated Header Menu FF2+ IE8+ Opr9+
Animated Header Menu is more than just a menu, but a modern website header template with a mobile optimized drop down menu and search form built in, plus room for a logo on the left. The drop down menu transforms into a full screen accordion menu on small screen devices.

AnyLink Drop Down Menu v2.0 FF1+ IE5+ Opr7+
This is a versatile drop down menu that can be applied to ordinary links on your page, including image links. It can be activated either onMouseover or onClick. The menu contents are defined inside a shared .js file or easy editing across multiple pages.

AnyLink CSS Menu v2.0 FF1+ IE5+ Opr7+
AnyLink CSS Menu is a cool script that adds a drop down menu to any link on your page. Each menu is implemented as plain HTML (a DIV containing links) on the page, making the menu contents search engine friendly and potentially very easy to deploy.

Pop-it menu FF1+ IE5+ Opr7+
Pop-it allows you to associate a dynamic menu with regular links on your page. As the mouse moves over the link in question, a menu pops up containing "sub links". Think of it as a "loose" drop down menu.

Sticky Horizontal Menu FF2+ IE8+ Opr9+
Sticky Horizontal Menu is a top UL menu that seamlessly transitions to being fixed in position when it's scrolled out of view, so it remains visible to the user at all times.

Full Screen Mobile Menu FF2+ IE9+ Opr9+
To compensate for the limited screen space offered on mobile devices, this mobile-first navigation menu creates a slide in menu that takes up the entire screen when expanded. Its content can be defined either as an inline <nav> element, or inside an external file and fetched via Ajax. Swiping/ mouse dragging is supported inside the content to scroll it upwards/downwards.

Hamburger Icon Menu FF2+ IE9+ Opr9+
This menu combines the two popular trends of a full screen menu and using an "hamburger" style icon to toggle it to create a lightweight, elegant mobile friendly site menu!

jQuery Context menu script FF1+ IE5+
This jQuery script lets you associate a multi-level context menu to any element on the page, so right clicking within the element activates the menu. The default context menu of the browser is suppressed as a result. A different context menu can be added to different elements on the page, such as one for the document as a whole, another for just a DIV on the page etc.

Contractible Headers FF1+ IE5+ Opr7+
A script that makes selected headers in a page contractible in IE /NS6+. All other browsers, including NS 4.x, will simply see the headers uncontracted (degrades well)

Microsoft Outlook Bar II FF1+ IE5+
-User Submitted
This unique OutLook looking menu tucks away its contents until user intervention. It supports an unlimited number of categories, and furthermore, works across all DHTML browsers (IE4, NS4+. Mozilla 0.9, Opera5). Works best in a frames page.

Note: Some older menu scripts have been retired, and can be found here.

 

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post