how to highlight menu link of current page?

Question

this is a very common problem, but i couldn't find any solutions to my situation. i'm making a pretty big website with hundred of pages, so i created a header page and a footer page that are the same in every page. now i want to highlight the menu button of the current page, but my menu is in the header that i include in every page using <?php include("header.php");?> so everything i try doesn't work. i tried this method but works only if there's the menu code in every page(so without using php include). any suggestions?

this is the code of my menu bar

nav {
    height: 40px;
    background: black;
    border-radius: 0 0 10px 10px;
}
#navblock {
    margin-left: 160px;  
}
nav ul{
    list-style: none; 
    position: relative; 
    display: inline-table;
    }
nav ul li{ 
    float: left; 
    font-size: 20px;
    }
nav ul li:hover {
    background: #666;
    }
nav ul li:hover a {
    color: #fff;
    text-decoration: none;
    }
nav ul li a {
    display:block; 
    padding-top: 6px; 
    padding-left: 30px; 
    padding-right: 30px; 
    padding-bottom: 6px; 
    text-decoration: none;
    color: white;
    }
nav ul ul {
    display: none; 
    background: #101010; 
    padding: 5px 5px 5px 5px;
    width: auto;
    position: absolute; 
    z-index: 1;
    top: 40px;}
nav ul li:hover > ul {
    display:block;
    }
nav ul ul li {
    float: none; 
    position: relative; 
    font-size: 14px; 
    margin-left: 0px;
    }
nav ul ul li a:hover {
    background: #666;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<nav>
    <div id="navblock">
        <ul>
            <li><a href="/index.html">Home</a></li>
            <li><a href="/anime/index.html">Anime</a>
                <ul>
                    <li><a href="/anime/listaepisodi.html">Lista episodi Anime</a></li>
                    <li><a href="/anime/episodio00.html">episodio00</a></li>
                </ul>
            </li>
            <li><a href="/serietv/index.html">Serie TV</a>
                <ul>
                    <li><a href="">Lista completa Serie TV</a></li>
                    <li><a href="">Cerca Anime</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </nav>

Answer 1

You can do one thing from your PHP page, take one $active class and asign value that from PHP file, i will explain you with example :-

You are in home page then just set $active class as following.

$active = "home";

Now in common header file make condition on each

like following :-

<ul>
    <li class="<?php echo ($active == "home") ? "active" : ""; ?>"><a href="/index.html">Home</a></li>
    <li class="<?php echo ($active == "anime") ? "active" : ""; ?>"><a href="/anime/index.html">Anime</a>
        <ul>
            <li><a href="/anime/listaepisodi.html">Lista episodi Anime</a></li>
            <li><a href="/anime/episodio00.html">episodio00</a></li>
        </ul>
    </li>
    <li class="<?php echo ($active == "serietv") ? "active" : ""; ?>"><a href="/serietv/index.html">Serie TV</a>
        <ul>
            <li><a href="">Lista completa Serie TV</a></li>
            <li><a href="">Cerca Anime</a></li>
        </ul>
    </li>
</ul>

Upvotes: 0

Answer 2

You can highlight the current page using JavaScript. Using window.location.href, JavaScript gives you the url of the currently loaded page. So, on window load, you can do something like this (assuming jQuery installed):

var pg = window.location.href.substring(window.location.href.lastIndexOf("/"));
$("a[href=" + pg + "]").parent('li').addClass('active');

Of course, this is also assuming that you do have a css class called active pre-defined which takes care of decorating the active link!

Answer 3

try this script..

var url = window.location;
$('a[href="'+url+'"]').parent('li').addClass('active');

Hope this helps..