Highlight the current element based on the page that is currently active

Question

Highlight the current element based on the page that is currently active

After searching for similar questions without success, I am turning to you for help. This is what I need:

When a user visits the "about" page, I want the li element to become active so that the CSS styles will apply. The same should happen when they click on "service," and so on.

Note 1: This menu is included in the main body using require_once("path/to/navmenu.php"), and I am not sure if this has any impact.

Note 2: I understand that jQuery is the solution here, but I have tried codes from similar questions on Stack Overflow with no luck. A JSFiddle demonstration would be greatly helpful.

HTML CODE:

<nav class="flexy-menu">
    <li class="active"><a href="index.php">home</a><div  class="menu-space"></div></li>
    <li><a href="about-us-style1.php">about</a><div class="menu-space"></div></li>
    <li><a href="service-style2.php">service</a><div class="menu-space"></div></li>
</nav>

CSS CODE:

 .flexy-menu li:hover > a,
 .flexy-menu li.active a {
   background: #c68f50;
   color: #fff;
 }

jquery html css

Answer 1

Answer №1

One way to customize your menu using PHP is by defining a PHP variable on each page. For example, you can set a variable for the about page like this:

$about_page = 1;

Then, you can use this variable to highlight the menu item when the user is on that specific page:

<li><a href="about-us-style1.php" class="<?php if($about_page == 1) { echo 'highlighted'; } ?>">about</a><div class="menu-space"></div></li>

Make sure to define the highlighted class in your CSS:

.highlighted {
   background: #c68f50;
   color: #fff;
}

This is just one approach to achieve this effect, but there are more advanced solutions out there!

Answer 2

One way to customize your menu using PHP is by defining a PHP variable on each page. For example, you can set a variable for the about page like this:

$about_page = 1;

Then, you can use this variable to highlight the menu item when the user is on that specific page:

<li><a href="about-us-style1.php" class="<?php if($about_page == 1) { echo 'highlighted'; } ?>">about</a><div class="menu-space"></div></li>

Make sure to define the highlighted class in your CSS:

.highlighted {
   background: #c68f50;
   color: #fff;
}

This is just one approach to achieve this effect, but there are more advanced solutions out there!

Answer 3

Answer №2

Personally, I find using PHP for separate files like the NavBar is a good practice. However, with JQuery, you can achieve the same result with the following code snippet:

function updateMenu()
{
   var checked = false;
   $(".flexy-menu li").removeClass('active').each(function()
   {
       if(checked == false && window.location.href.indexOf($(this).find('a').attr('href')) != -1)
       {
           $(this).addClass('active');
           checked = true;
       }
   });       
}

You can invoke updateMenu(); at any point after the menu is displayed. It's recommended to call it within the $(document).ready() function.

Answer 4

Personally, I find using PHP for separate files like the NavBar is a good practice. However, with JQuery, you can achieve the same result with the following code snippet:

function updateMenu()
{
   var checked = false;
   $(".flexy-menu li").removeClass('active').each(function()
   {
       if(checked == false && window.location.href.indexOf($(this).find('a').attr('href')) != -1)
       {
           $(this).addClass('active');
           checked = true;
       }
   });       
}

You can invoke updateMenu(); at any point after the menu is displayed. It's recommended to call it within the $(document).ready() function.

Answer 5

Answer №3

If you are directing your user to a different page, it’s important to include server-side code that checks the current page and applies the appropriate class to the link.

However, if you are not redirecting, just let me know and I can provide the necessary code for that scenario.

// Server Side Code

<?php
    $page_name = str_replace('.php', '', $_SERVER['PHP_SELF']);

    $page_array = array(
            'index'=>'',
            'about'=>''
    );
    $page_array[$page_name] = 'active';
?><html>
    <head>
        <title>Active Menu</title>
    </head>
    <body>
        <nav>
            <a href="#" class="<?php echo $page_array['index']?>">Home</a>
            <a href="#" class="<?php echo $page_array['about']?>">About</a>
        </nav>
    </body>
</html>

Note: This example is purposely kept simple to help grasp the main concept of what we are trying to accomplish. There are various ways this can be enhanced, but for beginners, this serves as a good starting point.

Answer 6

If you are directing your user to a different page, it’s important to include server-side code that checks the current page and applies the appropriate class to the link.

However, if you are not redirecting, just let me know and I can provide the necessary code for that scenario.

// Server Side Code

<?php
    $page_name = str_replace('.php', '', $_SERVER['PHP_SELF']);

    $page_array = array(
            'index'=>'',
            'about'=>''
    );
    $page_array[$page_name] = 'active';
?><html>
    <head>
        <title>Active Menu</title>
    </head>
    <body>
        <nav>
            <a href="#" class="<?php echo $page_array['index']?>">Home</a>
            <a href="#" class="<?php echo $page_array['about']?>">About</a>
        </nav>
    </body>
</html>

Note: This example is purposely kept simple to help grasp the main concept of what we are trying to accomplish. There are various ways this can be enhanced, but for beginners, this serves as a good starting point.

Answer 7

Answer №4

When redirecting users, it's important to check the page name and highlight the li element with an anchor link that matches the value of the href attribute once the page has loaded. The code snippet below can help achieve this:

$(document).ready(function () {
    var pagename = location.pathname.split('/').slice(-1)[0];
    $(".flexy-menu li a").each(function (index) {
        if($(this).attr("href").indexOf(pagename)==0){
            $(this).parent().addClass("active");
        }
        else{
            $(this).parent().removeClass("active");
        }
    });
});

To implement this functionality, save the following code as an HTML file named test2.html:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>
  <style type='text/css'>
    .flexy-menu li:hover > a, .flexy-menu li.active a {
         background: #c68f50;
         color: #fff;
    }
  </style>

<script type='text/javascript'>
$(document).ready(function () {
    var pagename = location.pathname.split('/').slice(-1)[0];
    $(".flexy-menu li a").each(function (index) {
        if($(this).attr("href").indexOf(pagename)==0){
            $(this).parent().addClass("active");
        }
        else{
            $(this).parent().removeClass("active");
        }
    });
});
</script>

</head>
<body>
  <nav class="flexy-menu">
    <li class="active"><a href="index.php">home</a>

        <div class="menu-space"></div>
    </li>
    <li><a href="test2.html">about</a>

        <div class="menu-space"></div>
    </li>
    <li><a href="service-style2.php">service</a>

        <div class="menu-space"></div>
    </li>
</nav>
</body>
</html>

In the provided HTML, the first li element has the active class set by default. However, in the browser, the second link will be highlighted when the file is saved as test2.html.

Answer 8

When redirecting users, it's important to check the page name and highlight the li element with an anchor link that matches the value of the href attribute once the page has loaded. The code snippet below can help achieve this:

$(document).ready(function () {
    var pagename = location.pathname.split('/').slice(-1)[0];
    $(".flexy-menu li a").each(function (index) {
        if($(this).attr("href").indexOf(pagename)==0){
            $(this).parent().addClass("active");
        }
        else{
            $(this).parent().removeClass("active");
        }
    });
});

To implement this functionality, save the following code as an HTML file named test2.html:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>
  <style type='text/css'>
    .flexy-menu li:hover > a, .flexy-menu li.active a {
         background: #c68f50;
         color: #fff;
    }
  </style>

<script type='text/javascript'>
$(document).ready(function () {
    var pagename = location.pathname.split('/').slice(-1)[0];
    $(".flexy-menu li a").each(function (index) {
        if($(this).attr("href").indexOf(pagename)==0){
            $(this).parent().addClass("active");
        }
        else{
            $(this).parent().removeClass("active");
        }
    });
});
</script>

</head>
<body>
  <nav class="flexy-menu">
    <li class="active"><a href="index.php">home</a>

        <div class="menu-space"></div>
    </li>
    <li><a href="test2.html">about</a>

        <div class="menu-space"></div>
    </li>
    <li><a href="service-style2.php">service</a>

        <div class="menu-space"></div>
    </li>
</nav>
</body>
</html>

In the provided HTML, the first li element has the active class set by default. However, in the browser, the second link will be highlighted when the file is saved as test2.html.

Answer 9

Answer №5

Greetings once again! I have carefully reviewed all of your comments and responses. I must say, everything you suggest seems to be working perfectly. However, since I am not very familiar with JS/Jquery and CSS3 selectors, I opted for the PHP route :)

Here's what I did: I added a variable on each page such as $about_page=1; for instance, when someone visits the index page. Next, in the navigation.php file, I implemented some if statements to echo the "active" class.

<li <?php if($about_page==1){echo 'class="active"';}?>><a href="about-us-style1.php">about</a><div class="menu-space"></div>
            </li>

Answer 10

Greetings once again! I have carefully reviewed all of your comments and responses. I must say, everything you suggest seems to be working perfectly. However, since I am not very familiar with JS/Jquery and CSS3 selectors, I opted for the PHP route :)

Here's what I did: I added a variable on each page such as $about_page=1; for instance, when someone visits the index page. Next, in the navigation.php file, I implemented some if statements to echo the "active" class.

<li <?php if($about_page==1){echo 'class="active"';}?>><a href="about-us-style1.php">about</a><div class="menu-space"></div>
            </li>

Highlight the current element based on the page that is currently active

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Can a shake event be utilized to indicate necessary form fields?

Updating an added row with jeditable and the on() method in jQuery version 1.7 triggered by a button click

Enhance the performance of jQuery and CSS on your WordPress site

Display an image when the cursor hovers over a text

After the initial rendering, JQuery can dynamically search through the DOM elements and seamlessly replace keys with their respective values

Matching the heights of div-containers within cards

Web page saving fails to preserve images!

What is the best way to remove bootstrap when transitioning to a new microfrontend?

Is jQuery's click-to-remove-row functionality not functioning properly?

When trying to make a selection from a dropdown menu on my mobile device, no action is taken

Create a stylish Bootstrap 4 layout with a scrollable row that elegantly fills the remaining height

Translate a portion of a painting by utilizing context.putImageData()

Incorporate AJAX into your Javascript code for ordering

In Bootstrap 5, the anchor tag is causing a shift in the background color of surrounding tags upon being clicked

Bootstrap 4 radio buttons are not aligning properly with the padding

Conceal all alphabetical characters exclusively within paragraph content

No wrapping of columns in Bootstrap 4

Display visuals from Contentful in Angular

To add a code snippet to the right side of a paragraph using CSS, place it at the end of the

Center the content within the div