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


Tags: php,javascript,html,css,html5

Problem :

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



Solution :

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"';
}
?>

    CSS Howto..

    How to create triple div border in CSS

    JS manipulation on CSS and how it result on page rendering

    How to position a div in the absolute center of a page?

    How do check the Css properties for an element when pressed in Google Chrome Developer Tools

    Sublime - CSS - how to auto add .class for each section in the whole code?

    How to make
    , , or list display tabular data as a table?

    How to load the embeded video only after some click-event was triggered. jQuery

    How to set numerous links in a single line with CSS?

    What is default z-Index of
    element in HTML, and how to get it using JavaScript?

    jQuery - CSS DropDown Navigation Items - How to build a Carrot Dropdown

    How to reveal content behind a div with pure css?

    how to change css style for every second data (picture) from database?

    How to show/hide big image by clicking on thumbnails?

    Using CSS, how do I change the font color of parent
  • tag if child
  • tag is hovered over
  • CSS: How to lay an image on top of a table

    How to create correct .css for Html.TextBoxFor

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How can I achieve this layout using CSS only?

    How do I use a variable to get CSS info on an element?

    how to achieve facebook mobile site buttons menu scroll effect?

    CSS: How to limit length of the border-bottom div?

    How to add offset border to image of unknown size?

    How to only make a css element appear on one page?

    How can I set one style to override another conflicting style in CSS?

    How to put a css tag in an element if another has this element [closed]

    How to avoid background image tile when browser window resizes

    how to get a css that does not cause overflow of words beyond box [closed]

    How to align an icon to the right of content

    How to create Rectangle With Gradient Color Stripes Border via CSS?

    hide show div using nav html5 query javascript