Menu and Navigation Scripts
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+
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.
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+
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.
Slide-In Menu FF1+ IE5+ Opr7+
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.
Links FF1+ IE5+ Opr7+
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.
Menu script FF1+ IE6+
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+
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+
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+
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.
script FF1+ IE5+ Opr7+
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.
down menu w/ description FF1+ IE5+
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.
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+
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.
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.
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
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.
Dropdown HTML control FF1+ IE5+
Use this script to create a drop down control for arbitrary content on the page, such as a a search form. When the user clicks on a link, the content drops down and is shown on demand.
script FF1+ IE5+ Opr7+
This is a cross-browser menu that stays static on the left hand corner of your screen. It gently floats into its original position on the page if the window is scrolled.
menu script II IE5+
This is a IE5.5 specific context menu script that differs from the above in the way the menu is rendered, and also, feature set.
Microsoft Outlook Bar
This is a smashing DHTML navigation bar that resembles the OutLook bar of Internet Explorer. Fittingly enough, it only works in IE 4+ as well!
menu effect FF1+ IE5+
Add a stylish "highlight" effect to your table menus using this versatile DHTML script. A thin border is applied around the table cell (<td>) in participation as the mouse moves over it, with this effect visible in IE4+ and NS6+
menu effect FF1+ IE5+
This is a 3 state menu effect, appicable to any table. The table cell in question "hovers up" when the mouse moves over it, and depresses when down. Very cool effect.
highlight menu FF1+ IE5+ Opr7+
Similar to the above 3 scripts, highlight your menu links as the mouse moves over them using this CSS powered script! Thanks to CSS, the effect is very customizable, efficient, does not rely on script, and finally, very small in file size. Visible in IE4+, NS6+, Opera 6/Mozilla, and degrades well with the rest.