Alvenh's Current-Page Marker for Navigation Bars

On multipage sites, it is often useful to highlight the current page on a navigation bar. The easiest way to go about doing this is to mark the link to the current page on the navigation menu with a class and style it differently from the other menu bar items. This is easy to do, unless the pages are built from SSI (Server Side Include) or PHP templates, in which header, navigation, and footer, are each pulled from their own separate files and re-used on every page. To work around this problem, I have created a jQuery marker to show the current page. This marker works by detecting the page name (in the form of class given to the <main> tag, (assuming the page is written in HTML 5). It then searches for corresponding class in the navigation links and adds a class called "this_page", which is styled by CSS for a different appearance. This jQuery marker is used by this website, and is currently used to highlight "Tutorial 1" as you are reading this.

Step 1: Set Up jQuery

Download and install jQuery or provide a link to the external script if you have not already done so (see instructions on the Home page).

Step 2: Installing the Plug-In

Download the file nav_marker.js and put into "scripts" folder. Provide a relative link as shown below. Be sure to place the link AFTER the main jQuery link.

		
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="scripts/nav_marker.js"></script>
		
	

Step 3: HTML

In order for this to work, each page should have main contents wrapped in main element tags (used in HTML5). On each page, the main tag should be given a class name with page number in the following format:

    	
   <main class="page_01""><!-- "main" tag on Page 1 (i.e. index page) -->
   <main class="page_02""><!-- "main" tag on Page 2 -->
   <main class="page_03""><!-- "main" tag on Page 3 -->
   <!-- Will work with sites with up to 20 pages -->
		
	

The navigation links should be composed of list items <li> with classes (labelled as "page_01", "page_02", etc.) as in the example used for this site:

		
   <nav>
   <ul>
   <li class="page_01"><a href="index.php">Home</a></li>
   <li class="page_02"><a href="tutorial01.php">Tutorial 1</a></li>
   <li class="page_03"><a href="tutorial02.php">Tutorial 2</a></li>
   <li class="page_04"><a href="tutorial03.php">Tutorial 3</a></li>
   <li class="page_05"><a href="contact.php">Contact</a></li>
   </ul>
   </nav>
		
	

Step 4: The CSS

On the CSS, style the class .this_page as it fits. For example:

		
   .this_page {
   /* For Styling of Current Page Link by NavMarker nav_marker.js */
   background: #0F247B; /* This is the background color of the <li> of the navigation item when it is the current page */
   }