Navigation & Menus

The Main Navigation area in this project is placed inside the header tag, just underneath the div id=main-header. Although the placement of main navigation is optional, this is a logical place for it. Another logical place could be just above the div id=main-header.

What distinguishes the Main Navigation area from other possible menus are CSS code and jQuery that give it style and also force it to become a mobile-friendly Select List at smaller screen sizes.

The code below creates a horizontal (inline) menu with evenly spaced links at larger screen sizes.

nav class="menu"

ul class="menu-list"

li class="menu-item first"  followed by  li class="menu-item" for each additional li

a class="menu-item-link"

When a screen size shrinks to 48em, the ul underneath nav is hidden. jQuery is used to force the li elements into a Select List, with each anchor tag becoming an Option.

script src="scripts/jquery-1.6.2.min.js"

					$(function() {
				     	 // Create the dropdown base
				      	$("<select />").appendTo("nav");
				     	 // Create default option "Go to..."
				      	$("<option />", {
				         	"selected": "selected",
				         	"value"   : "",
				         	"text"    : "Go to..."
				      	}).appendTo("nav select");
				      	// Populate dropdown with menu items
				     	 $("nav a").each(function() {
				       	var el = $(this);
				       	$("<option />", {
				           		"value"   : el.attr("href"),
				           		"text"    : el.text()
				       	}).appendTo("nav select");
				      	});
					   // To make dropdown actually work
				      	$("nav select").change(function() {
				        	window.location = $(this).find("option:selected").val();
				      	});
					 });

NOTE: Adding the nav area and menu is only needed if main, responsive navigation is a requirement of the project.

Other menus can be added as needed in various regions of the layout.

Top Blue Bar

A horizontal menu could be added in this area at the very top of the page. Styling for this menu doesn't currently exist but could be added by mimicing many of the styles from the main navigation classes.

Right Header

In this project, the div class=right-header is used for the project Title. This is the region where you see the text "DATA MANAGEMENT Responsive Design Template." A small horizontal menu could also be added to this area. Styling for this menu doesn't currently exist but could be added by mimicing many of the styles from the main navigation classes.

Left Columns

When using a column layout like Three Quarter or Two Third, the smaller width column can be put on the left and used as a traditional vertical menu. This is beneficial when an individual page needs unique navigation that doesn't need to be on every page. Use the code below to eliminate bullet points:

ul class="optmenu"

Footer

A horizontal menu could be added to stretch the length of this area. Styling for this menu doesn't currently exist but could be added by mimicing many of the styles from the main navigation classes. Additionally, the same Explore All Column Layouts used for content can be applied to the Footer. In this project, column-quarter was used in the footer to create four columns where additional links and menus were placed. Because these are vertical menus, not much styling is needed. Use the code below to eliminate bullet points:

ul class="optmenu"