Index
  • Geek Answers Handbook

    Adding a class to the navigation menu

    Given the case, I have the following menu:

    <ul> <li><a href="index.php">Index</a></li> <li><a href="about.php">About</a></li> <li><a href="test.php">Test</a><li> </ul

    And the menu is in header.php. For each page (Index, About, Test) I have index.php, about.php and test.php, and all of these files include header.php!

    I need to add a class to li when we are on different pages. So, if we are on about.php, the class should be added to the second li.

    Is there a jQuery way or what are the ways to solve this problem?

    +4
    source share
    7 answers

    I use something similar on one of the static HTML sites that you can adapt:

     <div id="navigation"> <?php $currentPath = $_SERVER['REQUEST_URI']; ?> <?php $currentClass = ' class="current"'; ?> <ul id="nav"> <li<?php if( $currentPath == "/" ) { echo $currentClass; } ?>><a href="/">Home</a></li> <li<?php if( $currentPath == "/market-challenge/" ) { echo $currentClass; } ?>><a href="/market-challenge/">Market <br />Challenge</a></li> <li<?php if( $currentPath == "/environmental-benefits/" ) { echo $currentClass; } ?>><a href="/environmental-benefits/">Environmental <br />Benefits</a></li> <li<?php if( $currentPath == "/technology/" ) { echo $currentClass; } ?>><a href="/technology/">Technology</a></li> <li<?php if( $currentPath == "/contact/" ) { echo $currentClass; } ?>><a href="/contact/">Contact</a></li> </ul> </div>

    Enjoy it!

    +4
    source 
     <ul> <li><a href="index.php" <?php if($_SERVER['PHP_SELF']=="/index.php") echo 'class="someclass"'; ?> >Index</a></li> <li><a href="about.php" <?php if($_SERVER['PHP_SELF']=="/about.php") echo 'class="someclass"'; ?> >About</a></li> <li><a href="test.php" <?php if($_SERVER['PHP_SELF']=="/test.php") echo 'class="someclass"'; ?> >Test</a><li> </ul>

    This may not be the best method, but it performs serveride tasks.

    +6
    source

    Create a unique identifier for each of the li tags when the link clicks on a class change if using the jquery.attr function

    +2
    source 
     <script type="text/javascript" charset="utf-8"> $(document).ready(function() { jQuery('.nav li').each(function() { var href = jQuery(this).find('a').attr('href'); if (href === window.location.pathname) { jQuery(this).addClass('active'); } }); }); </script>

    Replace ".nav li" with something more appropriate for your DOM structure. For example, if your div wrapper has a menu class, do: jQuery('.menu li') Menu jQuery('.menu li')

    +2
    source

    Add a session variable that stores the current page (before including the header file). Check this value in the header file and assign a class.

     $_SESSION['currentPage'] = 'index'; $_SESSION['currentPage'] = 'about'; $_SESSION['currentPage'] = 'test';

    in the title,

     <ul> <li><a href="index.php" <?php if($_SESSION['currentPage']=="index") echo 'class="selected"' ?>>Index</a></li> <li><a href="about.php" <?php if($_SESSION['currentPage']=="about") echo 'class="selected"' ?>>About</a></li> <li><a href="test.php" <?php if($_SESSION['currentPage']=="test") echo 'class="selected"' ?>>Test</a><li> </ul>
    +2
    source

    Use shortening if, in my opinion, cleaner code.

     <?php $self = $_SERVER['PHP_SELF']; ?> <ul> <li><a href="index.php" <?php echo ($self == "/index.php" ? 'class="selected"' : ''); ?>>Index</a></li> <li><a href="about.php" <?php echo ($self == "/about.php" ? 'class="selected"' : ''); ?>>About</a></li> <li><a href="test.php" <?php echo ($self == "/test.php" ? 'class="selected"' : ''); ?>>Test</a></li> </ul>
    +2
    source

    For the above, I have implemented a code block solution using jQuery.

    DEMO: http://codebins.com/bin/4ldqpa4

    Here I mentioned the steps to implement the above solution.

    1) Include jQuery.js and querystring-0.9.0.js in javascript in the header tag.

    2) HTML

     <div id="panel"> <ul class="menu"> <li> <a href="#?page=0"> Index </a> </li> <li> <a href="#?page=1"> About </a> </li> <li> <a href="#?page=2"> Test </a> <li> </ul> </div>

    3) CSS

     ul.menu{ border:1px solid #112266; background:#ccc; } ul.menu li{ list-style:none; display:inline-block; margin-left:10px; padding:0px; width:60px; text-align:center; } ul.menu li:hover{ background:#343434; } ul.menu li a{ padding:0px; color:#113399; text-decoration:none; } ul.menu li:hover a{ color:#c6b744; text-decoration:underline; } ul.menu li.active{ background:#343434; } ul.menu li.active a{ color:#c6b744 }

    4) jQuery:

     $(function() { $(".menu li").click(function() { setTimeout(function() { var page = $.QueryString("page"); $(".menu li").removeClass("active"); $(".menu li:eq(" + page + ")").addClass("active"); }, 200); }); });

    In the solution above, do I need to set the href link as #? page =, because on boxes for launching java script with redirecting a new page it is impossible on bunkers, and I also need to use the setTimeout function, because there is no redirect on the current page, just change the query string on the same page to #? page =.

    If you want to use the above solution in your project, then put the jQuery script above in its usual place so that it runs on each channel of the menu and sets the current link to the page with the active class.

    Note. Remove the setTimeout function. Wrapper simply holds code lines scripts inside it. It looks like this:

     $(function() { $(".menu li").click(function() { var page = $.QueryString("page"); $(".menu li").removeClass("active"); $(".menu li:eq(" + page + ")").addClass("active"); }); });
    +2
    source

    More articles:


    All Articles