UL导航构造（创建可重用的导航）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了UL导航构造（创建可重用的导航）相关的知识，希望对你有一定的参考价值。

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.)
  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>
"; // 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>
";
  92.           break;
  93.           default:
  94.           $link = $navbarURLs[$k];
  95.           $navbarList =  $navbarList."<li><a href="$link">$v</a></li>
";
  96.         }
  97. }
  98. $navbarList = $navbarList."</ul>";
  99.  
  100. // print title tag on HTML page
  101. echo '<title>SITE NAME : '.$tabName.'</title>';
  102.  
  103. ?>

以上是关于UL导航构造（创建可重用的导航）的主要内容，如果未能解决你的问题，请参考以下文章

为多个页面上的导航栏创建可重用的 html

从可重用组件发送道具用于导航抽屉

带有导航抽屉的 Android 应用程序的正确结构

BottomNavigationView - 如何避免重新创建片段并重用它们

23 , CSS 构造列表与导航

具有多个 Activity 的 Android 导航抽屉