Advanced Search

UL Navigation Construction (create re-usable navigations)

/ Published in: PHP
Save to your folder(s)
Aimed at designers who want to sprinkle in a little PHP to make development easier. If building/prototyping a site with HTML/PHP, this can save time by constructing the navigation list on the fly, based on re-usable navigation settings.

Usage: Assuming you have multiple HTML/PHP pages, simply add $page definition to the top of each page, include the PHP files, then configure the settings to build your navigation. (See the detail of each of the three core pages below for more information.)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <?php
  2. // Create (at least) 2 pages:
  3. // 1) page.php : this is the rendered html page
  4. // 2) nav-settings.php : this holds the settings of number of nav items, urls, etc.
  5. ?>
  6.  
  7. <!-- page.php
  8. ---------------------------------------- -->
  9. <html>
  10. 	<head>
  11. 		<!-- what page am i? -->
  12. 		<?php global $page; $page="PAGE_SHORTNAME or STRING FOR TITLE"; // see nav-settings.php ?>
  13. 		<?php include('nav-settings.php'); ?> <!-- will write title tag: see nav-settings.php  -->
  14. 	</head>
  15.  
  16. 	<body id="<?php echo $page; ?>"> <!-- optional: used for css styling purposes if necessary -->
  17. 	<div>
  18. 		<!-- insert navigation list here -->
  19. 		<?php echo $navbarList; ?>
  20. 		<!-- will produce something like this (assuming $page='ordering'): -->
  21. 		<!-- <ul>
  22. 			<li><a href="#">Home</a></li>
  23. 			<li><a href="#">Products</a></li>
  24. 			<li class="selected"><span>Ordering Info</span></li>
  25. 			<li><a href="#">Press Room</a></li>
  26. 			<li><a href="#">Events</a></li>
  27. 			<li><a href="#">Publications</a></li>
  28. 			<li><a href="#">Business Development</a></li>
  29. 		</ul> -->
  30. 	</div>
  31. 	</body>
  32. </html>
  33.  
  34. <!-- nav-settings.php
  35. ---------------------------------------- -->
  36. <?php
  37.  
  38. /* declare global variables 
  39. ---------------------------------------- */
  40. global $tab;					// shortname of tab/page
  41. global $tabName;			// long (display) name of tab/page
  42. global $page;					// name of page for <title>
  43.  
  44. global $navbarTabs;		// array holding tab and tabNames
  45. global $navbarURLs;		// array holding tab URLs
  46. global $navbarList;		// string holding the navBar
  47.  
  48. // make sure these arrays match!
  49. // (there are more efficient ways of building these arrays, but I am shooting for simplicity)
  50.  
  51. $navbarTabs = array(
  52.         "home"          =>      "Home",
  53.         "products"      =>      "Products",
  54.         "ordering"      =>      "Ordering Info",
  55.         "press"         =>      "Press Room",
  56.         "events"        =>      "Events",
  57.         "publications"  =>      "Publications",
  58.         "contract"      =>      "Business Development"
  59. );
  60.  
  61. $navbarURLs = array(
  62.         "home"          =>      '#', // urls for the links
  63.         "products"      =>      '#',
  64.         "ordering"      =>      '#',
  65.         "press"         =>      '#',
  66.         "events"        =>      '#',
  67.         "publications"  =>      '#',
  68.         "contract"      =>      '#'
  69. );
  70.  
  71. // check current page, then determine name of current page
  72. // if given a non-shortname value, $page can be the custom name of the page 
  73. if ( 
  74. 	($page == "home") ||
  75. 	($page == "products") ||
  76. 	($page == "events") ||
  77. 	($page == "ordering") ||
  78. 	($page == "press") ||
  79. 	($page == "publications")
  80. 	|| ($page == "contract")) {
  81.     $tabName = $navbarTabs[$page];
  82. } else {
  83. 	$tabName = $page;
  84. }
  85.  
  86. // create navigation list => $navbarList (echo it whenever you need the nav list)
  87. $navbarList = "<ul>\n"; // add id or class if needed for styling
  88. foreach ($navbarTabs as $k => $v) {
  89.         switch ($k) {
  90.           case $page:
  91.           $navbarList =  $navbarList."<li class=\"selected\"><span>$v</span></li>\n";
  92.           break;
  93.           default:
  94.           $link = $navbarURLs[$k];
  95.           $navbarList =  $navbarList."<li><a href=\"$link\">$v</a></li>\n";
  96.         }
  97. }
  98. $navbarList = $navbarList."</ul>";
  99.  
  100. // print title tag on HTML page
  101. echo '<title>SITE NAME : '.$tabName.'</title>';
  102.  
  103. ?>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.