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

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

Select All
<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css"> <link href="priorityscrolling.css" rel="stylesheet" /> <script src="priorityscrolling.js"> /*********************************************** * Priority+ Scrolling Menu By Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script>

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

• priorityscrolling.js
• priorityscrolling.css

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">
	<ul>
	<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>
	</ul>
</div>

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:

#priorityscroll{
	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!