CODEWITHSUNDEEP
phpmenu
John Smith
John Smith

Reputation: 99

How make my menu active class

I looking for 2h over the net and I can't find nothing to work for my menu, to make the active page to look another way. Here's my code:

HTML

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Whats New!</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
<div class="clear"></div>
</ul>
</div>

if one of the li line is like that:

<li class="active"><a href="#">Home</a></li>

the button look different, i try with php, jquery, but nothing work, so i need something to put 'class=active' to my li from the current page.

Upvotes: 1

Views: 935

Answers (4)

aksu
aksu

Reputation: 5235

So you can put your current page name to your php script and then loop the menu.

$curr_page = 'Here is your current page name(one of the $pages)';

$pages = array('Home', 'About', 'Whats New!', 'Products', 'FAQ', 'Support');

echo '<div class="menu"><ul>';

foreach($pages as $page) {
    if($page == $curr_page) {
        echo "<li class="active"><a href="#">$page</a></li>";
    }
    else {
        echo "<li><a href="#">$page</a></li>";
    }
}

echo '<div class="clear"></div></div></ul>';

Another example in jQuery:

$(document).ready(function() {
    var curr_page = "Here is your current page name";

    $('.menu > ul > li').each(function() {
        if($(this).text() == curr_page) {
            $(this).addClass('active');
            return false;
        }
    });


});

Upvotes: 1

bayological
bayological

Reputation: 133

Check out this article that describes how to get the current page url: Get current page url

Then you can have logic like this, 

<?php 
  if ($currenturl == $Thisurl)
  echo "class=""active"";
?>

Upvotes: 0

Kodr.F
Kodr.F

Reputation: 14390

Try this full code

<!DOCTYPE html>

<head>

 <!-- javascript -->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
  $( document ).ready(function() {


  $('.menu ul li').click(function(){
        $('.menu ul li').removeClass('active');
       $(this).addClass('active');
     });

  });
 </script>

</head>

<body>

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Whats New!</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
<div class="clear"></div>
</ul>
</div>

</body>

click here to live demo http://jsfiddle.net/Yn2RY/2/

Upvotes: 1

Kudlas
Kudlas

Reputation: 659

In foreach statement you can see shorthand construction that decides, if that li is active or not. Variable currentPage holds name of page, that is same as one of the values in array. You can get currentPage for example from $_GET.

Code:

<?php $menu = array("Home",
                    "About",
                    "Whats New!",
                    "Products",
                    "FAQ",
                    "Support",) ?>

<div class="menu">
<ul>
<?php 

foreach($menu as $item)
{
  $active = ($item==$currentPage) ? " class='active'" : '';
  echo "<li><a href="$item"$active>$item</a></li>";
}
?>
<div class="clear"></div>
</ul>
</div>

Upvotes: 0

Related Questions