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. Those. appearing underscore.

Thank you in advance!

    1 answer 1

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