PHP/jQuery - Highlight the menu with current page

Question

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

Svein Are Danielsen · Accepted Answer · 2012-10-27 04:29:28Z

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!

Community · Accepted Answer · 2017-05-23 12:18:40Z

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

zsalzbank · Accepted Answer · 2010-12-19 05:08:51Z

1

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.

answered Dec 19, 2010 at 5:08

zsalzbank

9,8611 gold badge28 silver badges39 bronze badges

Comments

sje397 · Accepted Answer · 2010-12-19 05:16:19Z

0

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');

answered Dec 19, 2010 at 5:16

sje397

41.9k9 gold badges90 silver badges106 bronze badges

6 Comments

Charles Yeung Over a year ago

so the idea to highlight the menu item should be checking url?

sje397 Over a year ago

@Charles: sorry, I don't understand. What are you asking?

Charles Yeung Over a year ago

I don't know what is the function/meaning of your code. Is it checking the url to know which page is reading by user and give the specific menu item a css class?

sje397 Over a year ago

@Charles: yes, that's the intention of my code. I think it's a better method than adding logic on the server side. But I have not tested this - you may need to url-encode or escape window.location so that the strings match.

Charles Yeung Over a year ago

thanks for the idea, but if I has many page, then the script of checking may very long. any idea for this situation?

|

MFix · Accepted Answer · 2012-02-27 13:22:59Z

0

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

answered Feb 27, 2012 at 13:22

MFix

2291 silver badge5 bronze badges

Collectives™ on Stack Overflow

PHP/jQuery - Highlight the menu with current page

5 Answers 5

Comments

Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related