SHARE
TWEET

Untitled

a guest Jun 19th, 2019 51 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <?php
  2.     $menu = array(
  3.         array(
  4.             'href' => 'index.php',
  5.             'text' => 'Index',
  6.         ),
  7.         array(
  8.             'href' => 'test.php',
  9.             'text' => 'Test',
  10.         ),
  11.     );
  12. ?>
  13. <nav>
  14.     <ul class="menu">
  15.         <?php
  16.             foreach ($menu as $link) {
  17.                 $item='<li>';
  18.                 if (substr($_SERVER['REQUEST_URI'], 1) == $link['href']) {
  19.                     $item.='<a href="'.$link['href'].'" class="active">'.$link['text'].'</a>';
  20.                 } else {
  21.                     $item.='<a href="'.$link['href'].'">'.$link['text'].'</a>';
  22.                 }
  23.                 $item.='</li>';
  24.                 print $item;
  25.             }
  26.         ?>
  27.     </ul>
  28. </nav>
  29.      
  30. <nav>
  31.     <ul class="menu">
  32.         <li><a href="index.php">Index</a></li>
  33.         <li><a href="test.php">Test</a></li>
  34.     </ul>
  35. </nav>
  36. <script type="text/javascript">
  37.     var menu = document.querySelectorAll('.menu li a');
  38.     for (var i = menu.length - 1; i >= 0; i--) {
  39.         if (menu[i].href==document.URL) {
  40.             menu[i].setAttribute("class", "active");
  41.         }
  42.     };
  43. </script>
  44.      
  45. <nav>
  46.     <ul class="menu">
  47.         <li><a href="index.php">Index</a></li>
  48.         <li><a href="test.php">Test</a></li>
  49.     </ul>
  50. </nav>
  51. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  52. <script type="text/javascript">
  53.     $('.menu li a').each(function() {
  54.         if ($(this).attr('href')==location.pathname.substr(1)){
  55.             $(this).addClass('active');
  56.         }
  57.     });
  58. </script>
  59.      
  60. #navigation li a.current{
  61.    color: #ffffff;
  62.    background:#000000;
  63. }
  64.      
  65. <div id="navigation">
  66.             <ul class="nav">
  67.  
  68.                 <li><a class="current" href="index.php">Home</a></li>
  69.                 <li><a href="#">Blog</a></li>
  70.                 <li><a href="#">Members</a></li>
  71.                 <li><a href="#">About</a></li>
  72.  
  73.             </ul>
  74. </div>
  75.      
  76. $(document).ready(function() {
  77.             $('.nav li a').on('click', function(event) {
  78.                 $('.nav li a').removeClass('active').removeAttr('class');
  79.                 $(this).addClass('active');
  80.             });
  81.         });
  82.      
  83. <div id="navigation">
  84.     <ul>
  85.         <li><a href="index.php">Home</a></li>
  86.         <li><a href="#">Blog</a></li>
  87.         <li><a href="#">Members</a></li>
  88.         <li><a href="#">About</a></li>
  89.     </ul>
  90. </div>
  91.      
  92. $(function () {
  93.     // Get the last item in the path (e.g. index.php)
  94.     let url = window.location.pathname.split('/').pop();
  95.  
  96.     // Add active nav class based on url
  97.     $("#navigation ul li a").each(function () {
  98.         if ($(this).attr("href") == url || $(this).attr("href") == '') {
  99.             $(this).closest('li').addClass("active");
  100.         }
  101.     })
  102.  
  103.     // Add the active class into Home if user omit index.php from url
  104.     if (url == '') {
  105.         $("#navigation ul li").eq(0).addClass("active");
  106.     }
  107. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top