FF2+ IE10+ Opr8+

Priority+ Scrolling Menu

Author: Dynamic Drive

Description: "Priority+" refers to a menu pattern where the most important links are given priority in visibility while secondary links are accessible on demand, such as by clicking on a "More" link. This is a type of Priority+ menu that squeezes any number of links all inside one line, using automatic scrolling to uncover what isn't visible. The hidden links are accessible by mousing over either ends of the menu, or on touch enabled devices, via swiping. The end result is a worry-free one line horizontal menu that's accessible on any screen size regardless of number of menu links defined. The menu has no library dependencies such as jQuery.

Priority+ Scrolling Menu works on all modern browsers; in legacy browsers such as IE9 and below, Priority+ Scrolling Menu falls back into a non scrolling, "regular" menu that overflows to multiple lines.

Demo: Above "Description" section!

Directions Developer's View

Step 1: Add the below code to the HEAD section of your page:

Select All

This script uses the following external files. Download them below (right click, and select "Save As"):

The menu has no library dependencies such as jQuery.

Step 2: Define your Priority+ Scrolling Menu on your page as a regular UL list with a "priorityscrolling" ID, for example:

<div id="priorityscroll">
	<li><a href="http://www.dynamicdrive.com/forums/">Contact</a></li>
	<li><a href="http://www.dynamicdrive.com">Home</a></li>
	<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
	<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
	<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
	<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
	<li><a href="http://www.javascriptkit.com">JavaScript</a></li>
	<li><a href="https://developer.mozilla.org/en-US/">Mozilla</a></li>
	<li><a href="http://www.menupatterns.com">Menus</a></li>

And that's it! If you want the menu to be "fixed" at the very top of the page, inside priorityscrolling.css, simply edit the outermost container's position property to fixed:

	position: fixed; /* change to "fixed" if you want a fixed menu bar */
	overflow: hidden;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	background: #B00000; /* background of menu strip */
And that's a wrap!