PHP/jQuery - Highlight the menu with current page
Hi
I am going to highlight a menu item according to the page that is reading currently, when user click on different page through the menu, that menu item will be highlighted, example is http://templates.joomlart.com/ja_pyrite/index.php?option=com_content&view=article&id=44&Itemid=53.If I use PHP/jQuery to check the url and highlight the menu, it will be good if the开发者_如何学JAVA url look like "http://example.com/contact", but the example above is bad.
If I don't going to check the url and highlight the menu item, could someone give me a idea/method that can be done with the same effect?
Thank you
I found this on 960 Development, been googling for a while for this, so happy when I finally found it!
<ul class="sub-nav" >
<?php
$full_name = $_SERVER['PHP_SELF'];
$name_array = explode('/',$full_name);
$count = count($name_array);
$page_name = $name_array[$count-1];
?>
<li><a class="<?php echo ($page_name=='where-to-buy.php')?'active':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li>
<li><a class="<?php echo ($page_name=='about.php')?'active':'';?>" href="about.php">ABOUT US</a></li>
<li><a class="<?php echo ($page_name=='contact.php')?'active':'';?>" href="contact.php">CONTACT US</a></li>
It is working fully for me, get the pages I need to be "active" to be active and dosent active any of thoes who got the class when I'm in another page!
Take a look at it!
Edit:
Even if you got a (in this example) contact.php?person=John, it will "active" the contact.php link!
do something like this
<div id="nav_menu">
<?php
$currentFile = $_SERVER['REQUEST_URI'];
$pages = array(
array("file" => "/index.php", "title" => "Home"),
array("file" => "/about.php", "title" => "About Us"),
array("file" => "/schedule.php", "title" => "Schedule")
);
$menuOutput = "<ul>";
foreach ($pages as $page) {
$activeAppend = ($page["file"] == $currentFile) ? " id='active' " : "class='nav_button'";
$currentAppend = ($page["file"] == $currentFile) ? " id='current' " : "class='nav_button'";
$menuOutput .= "<li " . $currentAppend . ">"
. "<a href='" . $page["file"] . "' id='".$page["id"]."'>" . $page["title"] ."</a>"
. "</li>";
}
$menuOutput .= "</ul>";
echo $menuOutput;
?>
</div>
i hope you get the idea, i had this on stackoverflow a while ago but i forgot what was the question
edit:
here i finnally found the original question
In the HTML code you use to generate your navigation, add some PHP logic that will add a selected class to the button of the page that you are currently on. Then just add some CSS for the selected class.
Can you do something like this? It should select any link that points at the current page - so you can apply whatever you like to highlight it.
$('a[href="'+window.location+'"]').addClass('menu-highlight');
A good technique is to add a specific class or id attribute to body element and then style it in CSS. It requires minimum of server side programming and keeps all the presentation logic in CSS as it should be done.
<style>
.contact #contact { background:#000; }
...
</style>
<body class="contact">
<ul>
<li id="homepage">Homepage</li>
...
<li id="contact">Contact</li>
</ul>
...
加载中,请稍侯......
精彩评论