13

I was wondering how I would add the ability to add a highlight box the nav bar on the page your currently on. You know so people know what page their on.

Very much like this site with the white box on the active page:https://woodycraft.net/home/

Here is the CSS for my nav bar:

/*TOP NAV BAR SECTION*/

*{margin: 0px;
  padding: 0px;}

#nav_bar {background-color: #a22b2f;
          box-shadow: 0px 2px 10px;
          height: 45px;
          text-align: center;}

#nav_bar > ul > li {display: inline-block;}

#nav_bar ul > li > a {color: white;
                      display: block;
                      text-decoration: none;
                      font-weight: bold;
                      padding-left: 10px;
                      padding-right: 10px;
                      line-height: 45px;}

#nav_bar ul li ul {display: none;
                   list-style: none;
                   position: absolute;
                   background: #e2e2e2;
                   box-shadow: 0px 2px 10px;
                   text-align: left;}

#nav_bar ul li a:hover {background: #8e262a;}


#nav_bar a:active {background: white;}

#nav_bar ul li:hover ul {display: block;}

#nav_bar ul li ul li a {color: #252525;
                        display: block;}

#nav_bar ul li ul li a:hover {background: #4485f5;
                              color: #fff;}

Here is the HTML for one of my pages:

<!--TOP NAV BAR SECTION-->

                <div id="nav_bar">
                                <ul>
                                  <li><a href="index.html">Home</a></li>
                                  <li><a href="status.html">Status</a></li>
                                  <li><a href="info.html">Info</a></li>

                                  <li><a href="#">Gamemodes</a>                                      
                                <ul>
                                  <li><a href="survival.html">Survival</a></li>
                                  <li><a href="pure-pvp.html">Pure-PVP</a></li>
                                  <li><a href="gamesworld.html">Gamesworld</a></li>
                               </ul>
                                  </li>                                    

                                  <li><a href="rules.html">Rules</a></li>
                                  <li><a href="vote.html">Vote</a></li>
                                  <li><a href="contact.html">Contact</a></li>
                               </ul>
                           </div>

4 Answers4

29

You can use the jquery function window.location.href to compare the site you are on right now with your href of < a > in the list element. For example, "index.html":

<li><a href="index.html">Home</a></li>

The code below searches for the href of the active page in the list elements < a >. Then adds the class "active" with addClass('active') to the active pages < a > so that you can now call it via CSS. Put this code in the head of your html file.

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $(function(){
        $('a').each(function(){
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('active'); $(this).parents('li').addClass('active');
            }
        });
    });
</script>

You can now add your css conditions like changing the color:

#nav_bar .active {
    color:            #F8F8F8;
    background-color: #4f81bd;
}
thomas0721
  • 442
  • 4
  • 12
4

If you have the same navigation bar in each HTML page of your website, then you can do like this:
For example in index.html add class='active-page' to the first menu item:

<div id="nav_bar">
    <ul>
        <li><a href="index.html" class='active-page'>Home</a></li>
        <li><a href="status.html">Status</a></li>
        <li><a href="info.html">Info</a></li>

Then in the status.html add class='active-page' again but for the second item:

<div id="nav_bar">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="status.html" class='active-page'>Status</a></li>
        <li><a href="info.html">Info</a></li>

And do this for all of your pages.

Finally in your css write a class for active-page like this:

#nav_bar ul li a.active-page
{
  background-color:blue;
}
Mohi
  • 1,776
  • 1
  • 26
  • 39
  • I get the CSS bit, but I'm confused about the class on the html. I'm new to coding you see –  Nov 08 '14 at 17:15
  • How you create you navigation bar? It different depends on your language. Is it just HTML? PHP, ASP? you can even highlight the current page with javascript or jquery – Mohi Nov 08 '14 at 17:18
  • Oh it's all HTML would you like to see one of the pages? –  Nov 08 '14 at 17:48
  • On that site, active item in the menu has the **navLink** class. you just should try to give this class to one of your items that you want. Language is not important, Its logic is all with your. – Mohi Nov 08 '14 at 18:07
  • I still don't understand I need to see an example on my own code, i'm a visual learner. I'll add the html code to my post. –  Nov 08 '14 at 18:39
2

I somewhere found a pretty simple code to do it.

<script>
    $(function () {
        $('nav li a').filter(function () {
            return this.href === location.href;
        }).addClass('active');
    });
</script>
Umesh
  • 21
  • 1
0
    $(function (){
        $('a').each(function(){
            if ($(this).prop('href') === window.location.href) {
                $(this).css({"background": "linear-gradient(to left, #f58D28 0, #f58D28 66%, #ba5c00 100%)", "border-radius": "30px"});
    
            }
        })
    })
Odhran
  • 1
  • 1
  • I liked the idea thomas0721 had, I had a similar issue and added to it using the jquery css() feature, if your using PHP on your site i.e. you have only one nave that you "include", add this line of code into a separate js file src it in the headers – Odhran Dec 07 '21 at 21:32