i trying add vertical lines appear left animated based on hover action (this functionality exists uncollapsed menu items, horizontal underlines transition between scalex(0) , scalex(1) states). wanting these lines happen on dropdown menu items on uncollapsed dropdown menu items , collapsed menu items sm , xs screens. take @ have now. trying pull effect off using a:before , background-color scaley proving difficult. appreciated.
/* navbar */ .navbar-default { background-color: #ffffff; border-bottom: 1px solid #777; } /* title */ .navbar-default .navbar-brand { } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { } /* link */ .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { position: relative; font-weight: bold; color: #777; } .navbar-default .navbar-nav > li > a:before { background-color: #1c86ee; content: ""; height: 3px; position: absolute; bottom: 0; left: 0; width: 100%; visibility: hidden; -webkit-transform: scalex(0); transform: scalex(0); -webkit-transition: 0.3s ease-in-out 0s; transition: 0.3s ease-in-out 0s; } .navbar-default .navbar-nav > li > a:hover:before, .navbar-default .navbar-nav > li > a:focus:before { visibility: visible; -webkit-transform: scalex(1); transform: scalex(1); } .navbar-default .navbar-nav > li > a.active:before{ background-color: #ffa500; visibility: visible; -webkit-transform: scalex(1); transform: scalex(1); } .navbar-default .navbar-nav > .open > { color: #777; font-weight: bold; background-color: #ffffff; } .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #ffffff; } /* caret */ .navbar-default .navbar-nav > .dropdown > .caret { border-top-color: #000000; border-bottom-color: #000000; } .dropdown-menu > li > { color: #777; font-weight: bold; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{ color: #777; font-weight: bold; } .dropdown-menu > li > a.active { color: #777; font-weight: bold; }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href="main.css" rel="stylesheet"/> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-brand navbar-brand-centered">brand</div> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#"><span class="vertical-line"></span>action</a></li> <li><a href="#"><span class="vertical-line"/>another action</a></li> <li><a href="#"><span class="vertical-line"/>something else here</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> <script> $(document).ready(function () { $('ul.nav > li > a').click(function (e) { e.preventdefault(); $('ul.nav > li > a').removeclass('active'); $(this).addclass('active'); }); }); </script> </html> </body> <script> $(document).ready(function () { $('ul.nav > li > a').click(function (e) { e.preventdefault(); $('ul.nav > li > a').removeclass('active'); $(this).addclass('active'); }); }); </script> </html>
Comments
Post a Comment