Geek Answers Handbook

Navigation highlight for current page

I was wondering how I would add the ability to add a highlighted field to the navigation bar on the page you are currently on. You know that people know which page they are on.

I really like this site with a white box on the active page: https://woodycraft.net/home/

Here is the CSS for my navigation 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
source share
2 answers

If you have the same navigation bar on each HTML page of your site, you can do the following:
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>

status.html class= ' , :

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

.

, css :

#nav_bar ul li a.active-page
{
  background-color:blue;
}
+1

jquery window.location.href, , , href <a> . , "index.html":

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

href <a> . "active" addClass ('active') <a> , CSS. html .

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

css, , :

#nav_bar .active {
    color:            #F8F8F8;
    background-color: #4f81bd;
}
+7

More articles:


All Articles