adding a class in the navigation menu

Question

Considering the case, that 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 located in header.php . For each page (Index, About, Test), I have index.php, about.php and test.php, and all these files include the header.php !

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

Is there any way to do with jQuery, or what are the ways to handle this problem?

why do you want to do that? Seems like some problem you are complicating — Mukesh Soni
– Mukesh Soni, Commented Jul 20, 2012 at 12:49
Yes, you can add class using javascript but would not it be easier to generate that on server-side? — Leri
– Leri, Commented Jul 20, 2012 at 12:49
Depending on what do you need the class for I would follow @PLB 's advice to add the class on the server side with PHP. — Peter Pajchl
– Peter Pajchl, Commented Jul 20, 2012 at 12:51
Well, seems like adding the class on the server-side with PHP seems solving the system easier, so I'm going to use that way. Thanks a lot — kk1991
– kk1991, Commented Jul 20, 2012 at 13:10

hjpotter92 · Accepted Answer · 2012-07-20 13:06:51Z

6

<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 might not be the best method, but it does the task serverside.

edited Jul 20, 2012 at 13:06

answered Jul 20, 2012 at 12:51

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jonathan Over a year ago

Pretty sure it has to be $_SERVER['PHP_SELF'] == "/index.php" and so on though.

hjpotter92 Over a year ago

@MrAzulay depends on the location of the files. If they are accessed as: http://localhost/index.php, then it'll be as I stated.

hjpotter92 Over a year ago

@MrAzulay Thanks for pointing that out. I was so wrong about that.

Michael Giovanni Pumo · Accepted Answer · 2012-07-20 12:53:08Z

I use something like this on one of my static HTML websites, which 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!

CBaker · Accepted Answer · 2012-07-20 12:49:38Z

2

Create unique id for each of the li tags, the when the link is click on change the class if using jquery .attr function

answered Jul 20, 2012 at 12:49

CBaker

8502 gold badges11 silver badges26 bronze badges

Comments

Alexander Wigmore · Accepted Answer · 2012-07-20 12:55:12Z

2

<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 to your DOM structure. Such as if your wrapper div has a class of menu, do:jQuery('.menu li')

answered Jul 20, 2012 at 12:55

Alexander Wigmore

3,1864 gold badges41 silver badges60 bronze badges

1 Comment

Jonathan Over a year ago

This is a great client side solution. Although I wouldn't do a task like this client side, good answer though.

Sree · Accepted Answer · 2012-07-20 13:04:38Z

2

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

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

in header,

<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>

answered Jul 20, 2012 at 13:04

Sree

6354 silver badges10 bronze badges

Comments

Jonathan · Accepted Answer · 2012-07-20 13:07:36Z

2

Using shorthand if for 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>

answered Jul 20, 2012 at 13:07

Jonathan

3,0093 gold badges28 silver badges36 bronze badges

Comments

gaurang171 · Accepted Answer · 2012-07-20 13:54:09Z

For Above issue, i have done solution on codebins using jQuery.

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

Here i have mentioned steps for executing above solution.

1) Include latest jQuery.js and querystring-0.9.0.js javascript files in 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);
    });

});

On above solution, i have to set href link like #?page= because on bins to run java script with new page redirection is not possible on bins as well as i have to use setTimeout function because currently page is not redirected just change its query string on same page by #?page=.

If you want to use above solution in your project then put above jQuery script on common place so that it will executes on each menu links and sets current page link with active class.

Note: Remove setTimeout function Wrapper just keep there code line scripts inside it. It's look like as below:

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

Collectives™ on Stack Overflow

adding a class in the navigation menu

7 Answers 7

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related