|
|
| Рядок 2: |
Рядок 2: |
| <head> | | <head> |
| <script> | | <script> |
| (function($) { | | $('.navbar-toggler').on('mouseenter', function(){ |
| "use strict"; | | $('.collapse').addClass('show'); |
| // Dropdown on Hover
| | }); |
| $('.dropdown').hover(
| | |
| function () {
| | $('.pos-f-t').on('mouseleave', function(){ |
| $(this).toggleClass('open');
| | $('.collapse').removeClass('show'); |
| },
| | });</script> |
| function() {
| | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> |
| $(this).toggleClass('open');
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> |
| }
| | <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> |
| );
| | |
| // Dropdown on Hover End
| |
| })(jQuery);</script>
| |
| </head> | | </head> |
| <body> | | <body> |
| <nav class="navbar navbar-default"> | | <div class="pos-f-t"> |
| <div class="container-fluid"> | | <div class="collapse" id="navbarToggleExternalContent"> |
| <!-- Brand and toggle get grouped for better mobile display --> | | <div class="bg-dark p-4"> |
| <div class="navbar-header">
| | <ul class="navbar-nav mr-auto"> |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
| | <li class="nav-item active"> |
| <span class="sr-only">Toggle navigation</span>
| | <a class="nav-link" href="#">Home</a> |
| <span class="icon-bar"></span>
| | </li> |
| <span class="icon-bar"></span>
| | <li class="nav-item"> |
| <span class="icon-bar"></span>
| | <a class="nav-link" href="#">Agency</a> |
| </button>
| | </li> |
| <a class=" navbar- brand" href="#"> Brand</a> | | <li class="nav-item"> |
| | <a class="nav-link" href="#">Work</a> |
| | </li> |
| | <li class="nav-item"> |
| | <a class="nav-link" href="#">Careers</a> |
| | </li> |
| | <li class="nav-item"> |
| | <a class=" nav- link" href="#"> Contact US</a > |
| | </li> |
| | </ul> |
| </div> | | </div> |
| | | </div> |
| <!-- Collect the nav links, forms, and other content for toggling -->
| | <nav class="navbar navbar-dark bg-dark"> |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
| | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> |
| <ul class="nav navbar-nav">
| | <span class="navbar-toggler-icon"></span> |
| <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
| | </button> |
| <li><a href="#">Link</a></li>
| | </nav> |
| <li class="dropdown">
| | </div> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
| |
| <ul class="dropdown-menu">
| |
| <li><a href="#">Action</a></li>
| |
| <li><a href="#">Another action</a></li>
| |
| <li><a href="#">Something else here</a></li>
| |
| <li role="separator" class="divider"></li>
| |
| <li><a href="#">Separated link</a></li>
| |
| <li role="separator" class="divider"></li>
| |
| <li><a href="#">One more separated link</a></li>
| |
| </ul>
| |
| </li>
| |
| </ul> | |
| <form class="navbar-form navbar-left" role="search">
| |
| <div class="form-group">
| |
| <input type="text" class="form-control" placeholder="Search">
| |
| </div>
| |
| <button type="submit" class="btn btn-default">Submit</button>
| |
| </form>
| |
| <ul class="nav navbar-nav navbar-right">
| |
| <li><a href="#">Link</a></li>
| |
| <li class="dropdown">
| |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
| |
| <ul class="dropdown-menu">
| |
| <li><a href="#">Action</a></li>
| |
| <li><a href="#">Another action</a></li>
| |
| <li><a href="#">Something else here</a></li>
| |
| <li role="separator" class="divider"></li>
| |
| <li><a href="#">Separated link</a></li>
| |
| </ul>
| |
| </li>
| |
| </ul>
| |
| </div><!-- /.navbar-collapse --> | |
| </div><!-- /.container-fluid --> | |
| </nav> | |
| </body> | | </body> |
| </html> | | </html> |