Dynamic Body Class for Active menu styling

0
votes

I want to use this menu in my web page. So I include this to index.php

But everytime I click a menu and load a new page, active menu style (.active class) is gone and it turns to its initial style. So users can't figure out which page they are visiting right then.

I wonder if I can figure this out with body classes? For example, can I say "if body class is this than make that menu class active" So I could change active menu style and understand which page I am visiting.

I have 3 menu and each menu has at least 5 submenu.

		<?php 
	$pages = array('pageA','pageB','pageC');

		if (!empty($_GET['page'])) {
			
			if(in_array($_GET['page'], $pages)) {
		 		 $page = $_GET['page']; 
				 $id = $_GET['id']; }
			else {
				header("Location:error.php"); 
				} }
		else	{ $page='empty';}		
		?>
	
	<body class = "<?php echo $page $id?>">

This is my menu structure:

<ul>
	<li class="active">
	  <h3>pageA</h3>
		<ul>
	    	<li><a href="index.php?pageA&id=1">1</a></li>
			<li><a href="index.php?pageA&id=2">2</a></li>
			<li><a href="index.php?pageA&id=3">3</a></li>
			<li><a href="index.php?pageA&id=4">4</a></li>
			<li><a href="index.php?pageA&id=5">5</a></li>
		</ul>
     </li>
	<li>
	  <h3>pageB</h3>
		<ul>
	    	<li><a href="index.php?pageB&id=1">1</a></li>
			<li><a href="index.php?pageB&id=2">2</a></li>
			<li><a href="index.php?pageB&id=3">3</a></li>
			<li><a href="index.php?pageB&id=4">4</a></li>
			<li><a href="index.php?pageB&id=5">5</a></li>
		</ul>
     </li>    
</ul>
2
javascriptphpjqueryhtmlcss
<body class="<?php echo $page . "_" . $id; ?>"> – GrafiCode

2 Answers

0
votes

You can try it with jQuery.

on $(document).readyyou can:

var currentPage = window.location.href;
alert(currentPage);// just a test

if(currentPage == "www.stackoverflow.com/rocks"){
    // style the body
}
0
votes

I don't know much about PHP, but you should do something like this:

Set a global PHP variable that sets which page you are on.

Something like $Global_Page = "Home";

Give each list item a unique id to match the page name.

<ul id="nav">
    <li id="Home">
      <h3>pageA</h3>
    </li>
 </ul>

Then use JS to apply the active class to the correct tab, by passing it the PHP var. You should include this little script in the nav include file.

<script>
$(function(){
var x= //However you render you php var. $Global_Page
$("ul$nav li#"+x).addClass("active");
});
</script>