CODEWITHSUNDEEP
phpjavascriptcsshtml
GitKidd
GitKidd

Reputation: 262

How to have the class="selected" depending on what the current page/url is

This is my first post so forgive as I am just new in the world of web development.

Normally, when I try to make a website, I create a file called header.html and footer.html so that I only change data once in all of the pages rather than having multiple same headers on many html files. And include them all in a php file together with the content and the php codes that comes per page.

Now my problem is because I only have 1 header, the css is designed in a way that whatever the current menu/tab is, it will be marked as "selected" so that its obvious to the user what page they are currently in.

My question is how do I solve this problem:

1.) To have the class="selected" depending on what the current page/url is.

<!--Menu Starts-->
        <div class="menu">
            <div id="smoothmenu" class="ddsmoothmenu">
                <ul>
                    <li><a href="index.php" class="selected">Home</a></li>
                    <li><a href="about.php">About</a> </li>
                    <li><a href="services.php">Services</a> </li>
                    <li><a href="features.php">Features</a></li>
                    <li><a href="#">Support</a>
                        <ul>
                            <li><a href="support1.php">Support 1</a></li>
                            <li><a href="support2.php">Support 2</a></li>
                         </ul>
                    </li>
                </ul>
             </div>
        </div>
<!-- Menu Ends--!>

Thank You :)

Upvotes: 9

Views: 20519

Answers (6)

Chris Moutray
Chris Moutray

Reputation: 18389

If you're looking for a non-javascript / php approach...

First you need to determine which nav-link should be set as active and then add the selected class. The code would look something like this

HTML within php file

Call a php function inline within the hyperlink <a> markup passing in the links destination request uri

<ul>
    <li><a href="index.php" <?=echoSelectedClassIfRequestMatches("index")?>>Home</a></li>
    <li><a href="about.php" <?=echoSelectedClassIfRequestMatches("about")?>>About</a> </li>
    <li><a href="services.php" <?=echoSelectedClassIfRequestMatches("services")?>>Services</a> </li>
    <li><a href="features.php" <?=echoSelectedClassIfRequestMatches("features")?>>Features</a></li>
    <li><a href="#">Support</a>
        <ul>
            <li><a href="support1.php" <?=echoSelectedClassIfRequestMatches("support1")?>>Support 1</a></li>
            <li><a href="support2.php" <?=echoSelectedClassIfRequestMatches("support2")?>>Support 2</a></li>
         </ul>
    </li>
</ul>

PHP function

The php function simply needs to compare the passed in request uri and if it matches the current page being rendered output the selected class

<?php
function echoSelectedClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="selected"';
}
?>

Upvotes: 13

adnanmn
adnanmn

Reputation: 21

You can do it from simple if and PHP page / basename() function..

<!--Menu Starts-->
    <div class="menu">
        <div id="smoothmenu" class="ddsmoothmenu">
            <ul>
                <li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="selected" <?php } ?>>Home</a></li>
                <li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="selected" <?php } ?>>About</a> </li>
                <li><a href="services.php" <?php if (basename($_SERVER['PHP_SELF']) == "services.php") { ?> class="selected" <?php } ?>>Services</a> </li>
                <li><a href="features.php" <?php if (basename($_SERVER['PHP_SELF']) == "features.php") { ?> class="selected" <?php } ?>>Features</a></li>
            </ul>
         </div>
    </div>

Upvotes: 1

Umair Hamid
Umair Hamid

Reputation: 3557

Sorry for my bad English, however may be it could help. You can use jQuery for this task. For this you need to match the page url to the anchor of menu and then add class selected to it. for example the jQuery code would be

    jQuery('[href='+currentURL+']').addClass('selected');

Upvotes: 0

Matt Gibson
Matt Gibson

Reputation: 38238

One variant on Chris's approach is to output a particular class to identify the page, for example on the body element, and then use fixed classes on the menu items, and a CSS rule that targets them matching. For example, this page:

<DOCTYPE HTML>
<head>
  <title>I'm the about page</title>
  <style type="text/css">
         .about .about,
         .index .index,
         .services .services,
         .features .features {
           font-weight: bold;
         }
  </style>
</head>
<body class="<?php echo basename(__FILE__, ".php"); ?>">
  This is a menu:
  <ul>
    <li><a href="index.php" class="index">Home</a></li>
    <li><a href="about.php" class="about">About</a> </li>
    <li><a href="services.php" class="services">Services</a> </li>
    <li><a href="features.php" class="features">Features</a></li>
  </ul>
</body>

...is pretty light on dynamic code, but should achieve the objective; if you save it as "about.php", then the About link will be bold, but if you save it as "services.php", then the Services link will be bold, etc.

If your code structure suits it, you might be able to simply hardcode the page's body class in the page's template file, rather than using any dynamic code for it. This approach effectively gives you a way of moving the "logic" for the menu system out of the menu code, which will always remain the same for every page, and up to a higher level.

As an added bonus, you can now use pure CSS to target other things based on the page you're on. For example, you could turn all the h1 elements on the index.php page red just using more CSS:

 .index h1 { color: red; }

Upvotes: 1

Rick Calder
Rick Calder

Reputation: 18705

Give each link a separate id then use jQuery on the individual pages.

 <li><a href="index.php" id="home">Home</a></li>
 <li><a href="about.php" id="about">About</a> </li>
 <li><a href="services.php" id="services">Services</a> </li>
 <li><a href="features.php" id="features">Features</a></li>
 <li><a href="#" id="support">Support</a>
     <ul>
         <li><a href="support1.php">Support 1</a></li>
         <li><a href="support2.php">Support 2</a></li>
     </ul>
 </li>

On the services page:

$(document).ready(function(){
    $("#services").addClass("selected");
});

Or even better as robertc pointed out in the comments, there is no need to even bother with the id's just make the jquery this:

$(document).ready(function(){
    $("[href='services.php']").addClass("selected");
});

Upvotes: 1

ajtrichards
ajtrichards

Reputation: 30565

You could ID each link and use JavaScript/Jquery to add the selected class to the appropriate link.

<!--Menu Starts-->
        <div class="menu">
            <div id="smoothmenu" class="ddsmoothmenu">
                <ul>
                    <li id="home-page"><a href="index.php" class="selected">Home</a></li>
                    <li id="about-page"><a href="about.php">About</a> </li>
                    <li id="services-page"><a href="services.php">Services</a> </li>
                    <li id="features-page"><a href="features.php">Features</a></li>
                    <li id="support-page"><a href="#">Support</a>
                        <ul>
                            <li id="support1-page"><a href="support1.php">Support 1</a></li>
                            <li id="support2-page"><a href="support2.php">Support 2</a></li>
                         </ul>
                    </li>
                </ul>
             </div>
        </div>
<!-- Menu Ends--!>

On your content page use jQuery to do something like:

$(document).ready(function(){
    $("#features-page").addClass("selected");
});

Another method you could use is:

Add class element based on the name of the page

Upvotes: 1

Related Questions