locked
Active navbar not highlight RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-591159780 posted

    I'm a new to this website and for coding, i m trying to highlight active menu. i have been search almost of two weeks. still not resolved. i have tried with jquery cdn, it works, but when i upload all this to web, it doesn't work. when i click the menu it highlight and disappear suddenly. so it didnt succes with jquery cdn. here is the jquery cdn i have used.

     

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
              <script  type="text/javascript">
                    $(document).on('click', 'ul li', function(){
                        $(this).addClass('active').siblings().removeClass('active')
                        })
                </script>

    please help. here are my codes. if css wrong can someone of you please correct this?

    <div id="main-wrap">
        <nav class="navbar navbar-default ">
          <div class="container">
            <div class="navbar-header">
              <a class="navbar-brand" href="/">

              <div class="sidebar-pinner">
                <button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
              </div>
            </div>
            <div id="scrollNav">
              <ul class="nav navbar-nav navbar-left-block">
                <li><a href="/"><span class="ico"><i class="fas fa-home"></i></span> Home</a></li>
                <li class="currentPage"><a>Home</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right navbar-right-block">
                            <li class="user-balance"><a href="/addfunds"><span class="ico"><i class="material-icons">attach_money</i></span> <span class="nav-text">$0.00</span><span class="hidden badge" style="background-color: #fea621;">$0.00</span></a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="ico"><i class="fas fa-user-cog"></i></span> <span class="nav-text">newuserpanel</span> <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="/account">Account</a></li>
                    <li><a href="/privacy">API</a></li>
                    <li><a href="/logout">Logout</a></li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                                              <li  ><a href="/"><span class="ico"><img src="/home.png" alt="Home" /></span> Home</a></li>
                                                            <li ><a href="services.html"><span class="ico"><img src="/Services.png" alt="Services" /></span> Services</a></li>
                                                            <li ><a href="history.html"><span class="ico"><img src="/history.png" alt="History" /></span> history</a></li>
                                                            <li ><a href="Support.html"><span class="ico"><img src="/Support.png" alt="Support" /></span> Support</a></li>
                                                            <li ><a href="faq.html"><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</a></li>
                                                            <li ><a href="/api"><span class="ico"><img src="/API.png" alt="API" /></span> API</a></li>
                                                            <li ><a href="/terms"><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</a></li>
                                            </ul>
            </div>
          </div>
        </nav>
        <div class="nav-bottom">
          <div class="container">
              <ul class="nav page-navigation">
                                        <li ><a href="/"><span class="ico"><img src="home.png" alt="Home" /></span> Home</a></li>
                                                    <li ><a href="services.html"><span class="ico"><img src="Services.png" alt="Services" /></span> Services</a></li>
                                                    <li ><a href="history.html"><span class="ico"><img src="history.png" alt="Orders" /></span> History</a></li>
                                                    <li ><a href="#api"><span class="ico"><img src="/API.png" alt="API" /></span> API</a></li>
                                        <li class="dropdown ">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="ico"><img src="/dggher5t.png" alt="chaman" /></span> Support <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                                                  <li ><a href="Support.html"><span class="ico"><img src="/Support.png"/></span> Support</a></li>

                                                  <li ><a href="faq.html"><span class="ico"><img src="/FAQ.png" alt="FAQ" /></span> FAQ</a></li>

                                                  <li ><a href="terms.html"><span class="ico"><img src="/Terms.png" alt="Terms" /></span> Terms</a></li>

                                                                                  </ul>
                </li>
              </ul>
          </div>
        </div>

    here is the css

    }
    .dahshat-board .navbar-default {
        background-color: transparent;
        border-color: transparent;
        padding: 10px 0;
        margin: 0;
        background-image: none;
    }
    .nav-bottom {
        ;
        z-index: 3;
    }
    .nav.page-navigation {
        background: #fad534;
        border-radius: 500px;
        display: flex;
        width: 100%;
        ;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
        justify-content: center;
    }
    .nav.page-navigation li {
        display: inline-flex;
        width: auto;
        align-items: center;
        flex: 0 0 10.85%;
        flex-grow: 1;
    }
    .nav-bottom .nav .dropdown li {
        display: block;
        width: auto;
        text-align: left;
    }
    .nav-bottom .nav li .ico {
        margin-right: 4px;
        width: 28px;
        height: 28px;
        background: #2b1f60;
        border-color: #2b1f60;
    }
    .nav-bottom .nav li.active .ico {
        background: #fad534;
        border-color: #fad534;
    }
    .nav-bottom .nav li.active .ico img {
        filter: invert(1) brightness(100%) saturate(0);
    }
    .nav-bottom .nav li a {
        font-size: 13px;
        line-height: 44px;
        color: #2a1e5e;
        display: flex;
        justify-content: center;
        ;
        align-items: center;
        padding: 2px 9px;
        border-radius: 500px;
        white-space: pre;
        width:100%;
    }
    .nav-bottom .nav li.dropdown.open a.dropdown-toggle {
        /* background: transparent;
        border: none; */
    }
    .nav-bottom .nav li a:hover,
    .nav-bottom .nav li a:active,
    .nav-bottom .nav li a:focus {
        background: transparent;
        outline: none;
    }
    .nav-bottom .nav .dropdown li a {
        line-height: 18px;
        display: block;
        padding: 4px 10px;
        ;
    }
    .nav-bottom .nav .dropdown li a .badge {
        ;
        right: 8px;
        top: 13px;
        padding: 3px 7px;
        font-size: 10px;
    }
    .nav-bottom .nav li.active a {
        color: #fad534;
        background-color: #270044;
    }
    .nav-bottom .nav .dropdown li a::after,
    .nav-bottom .nav .dropdown li a::before {
        display: none;
    }
    .navbar-collapse.mobileNav{
        padding:0;
    }
    .navbar-collapse.collapse.mobileNav ul.navbar-nav.nav {
        display: none;
    }
    .nav-bottom .nav li.dropdown.open .dropdown-menu a {
        background: transparent;
        border-radius: 0;
        color: #2a1e5e;
    }
    .dahshat-board .navbar-default .navbar-nav > li > a {
        color: #ffffff;
        font-size: 14px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 34px;
    }
    .dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav > li > a {
        color: #4d0e88;
    }
    .dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav > li > a .ico {
        background: #480d80;
        color: #efe9f5;
        border: 1px solid #480d80;
    }
    .dahshat-board .navbar-default .navbar-nav > li > a:hover,
    .dahshat-board .navbar-default .navbar-nav > li > a:focus{
        color: #ffffff;
        background-color:transparent;
    }
    .dahshat-board .navbar-default .navbar-nav > .open > a,
    .dahshat-board .navbar-default .navbar-nav > .open > a:hover,
    .dahshat-board .navbar-default .navbar-nav > .open > a:focus{
        background: transparent;
    }
    .dahshat-board .navbar-default .navbar-nav.navbar-left-block .currentPage {
        ;
    }
    .dahshat-board .navbar-default .navbar-nav.navbar-left-block .currentPage::before {
        content: '/';
        color: #ffffff;
        display: inline-block;
        ;
        top: 17px;
        left: 0;
    }
    .dahshat-board .navbar-default #scrollNav.fixedNav .navbar-nav.navbar-left-block .currentPage::before{
        color: #480d80;
    }
    .navbar-nav li.mobileSearch{
        display: none;
    }     

    Saturday, June 20, 2020 1:52 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-474980206 posted

    this should really be done server side. the server (which knows the url), can update the nav bar. but you can write javascript to do it on page load:

    $(function(){
    var siteRoot = "/"; // if subsite this must be the name, include pre and post /
    var path = window.location.pathname;

    $('ul li').each(function() {
       var $this = $(this);
       var $a = $this.children('a');

       // if li has <a> get href
       if ($a.length) {
           var link = $a[0].href;
           // handle relative link
           if (!link.startsWith('/'))
               link = siteRoot + link;
       }

       // if match set active
       if (path == link)
          $this.addClass('active');
    });
});

    just air code, also does not handle case where "/" redirects to page rather than using routing or url rewrite. on windows you might want case insensitive match.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 24, 2020 3:25 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-474980206 posted

    because clicking on the <a> navigates to a new page, any changes made to the old page by the click event are lost.

    Saturday, June 20, 2020 8:56 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-591159780 posted

    can you please correct the incorrect lines. please.

    Sunday, June 21, 2020 4:39 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-474980206 posted

    There are no lines to correct. All changes are list when the new page loads. You should fix the server code to set the active link.

    Sunday, June 21, 2020 8:02 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1535942433 posted

    Hi lukeroy73,

    Accroding to your codes,I don't understand your requirment clearly.

    I create a test of your codes.And I reproduce your problems.When I click the menu,it highlight and it redirect to other page.So,the page event will be lost.

    What result do you want to have?Do you want to the menu highlight after back to this page?Or do you want to hover the menu and it will highlight?

    I suggest you could slip the menu and it highlight.

    Just like this:

      $(function () {
            $('ul li').hover(function () {
                $("ul li").removeClass('active');
            $(this).addClass('active');
                
            })
        })

    Best regards,

    Yijing Sun

    Monday, June 22, 2020 6:03 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-591159780 posted

    wow. i have learn something from you. I didn;t know about hover active method until you say.

    however, i want to the menu highlight after back to this page? can you please assist? 

    Wednesday, June 24, 2020 6:25 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-474980206 posted

    this should really be done server side. the server (which knows the url), can update the nav bar. but you can write javascript to do it on page load:

    $(function(){
    var siteRoot = "/"; // if subsite this must be the name, include pre and post /
    var path = window.location.pathname;

    $('ul li').each(function() {
       var $this = $(this);
       var $a = $this.children('a');

       // if li has <a> get href
       if ($a.length) {
           var link = $a[0].href;
           // handle relative link
           if (!link.startsWith('/'))
               link = siteRoot + link;
       }

       // if match set active
       if (path == link)
          $this.addClass('active');
    });
});

    just air code, also does not handle case where "/" redirects to page rather than using routing or url rewrite. on windows you might want case insensitive match.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 24, 2020 3:25 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-591159780 posted

    thank you very very much for your support. it worked.

    Thursday, June 25, 2020 6:29 AM