Good day, gentlemen!

Could you tell me how to implement the selection of the active menu section on the site. As a guide, I chose this example here: http://bayguzin.ru/demo2016/synthetica/

I use the standard bootstrap menu without critical changes. Changes concern only appearance: width, color.

I would be extremely grateful to any draft of the menu selection implementation as an example, only the selection I need from above.

Dear Elena led the code snippet to implement such an underscore below, I do not quite understand what can be changed, so that it becomes a selection from above: D

Thank you in advance!

Elena code example:

.nav>li>a:after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #7AE2DE; transition: all .2s ease-in-out; transform: scaleX(0); } .custom-menu.navbar .navbar-nav>li>a:focus, .custom-menu.navbar .navbar-nav>li>a:hover{ color: #7AE2DE; } .custom-menu .nav>li>a:hover:after { transform: scaleX(1); } 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-2.0.3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-default custom-menu" > <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav>

    1 answer 1

     .nav>li>a:before { content: ''; position: absolute; left: 0; right: 0; top: 1px; height: 3px; background: #7AE2DE; transition: all .2s ease-in-out; transform: scaleX(0); } .custom-menu.navbar .navbar-nav>li>a:focus, .custom-menu.navbar .navbar-nav>li>a:hover{ color: #7AE2DE; } .custom-menu .nav>li>a:hover:before { transform: scaleX(1); } 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-2.0.3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-default custom-menu" > <div class="container-fluid"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav>

    just in the first style, replace bottom: -1px with top: 1px (well, after with before before - but this is a matter of taste). But as for me, the selection from above is less obvious and "beautiful" =)

    • Thank you very much! I agree with you, but unfortunately my customer for some reason rested on the idea of ​​selecting from above -_- - OldKitty