Skip to content

Instantly share code, notes, and snippets.

@owngeek

owngeek/Responsive_navigation_menu.css

Last active November 10, 2016 06:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save owngeek/9b376eb3409374ccdcd99b6234209e29 to your computer and use it in GitHub Desktop.
Save owngeek/9b376eb3409374ccdcd99b6234209e29 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Navigation Menu
Raw
Responsive_navigation_menu.css
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Animate -->
<link href="http://bootsnav.com/css/animate.css" rel="stylesheet">
<!-- Bootsnav -->
<link href="http://bootsnav.com/css/bootsnav.css" rel="stylesheet">
Raw
Responsive_navigation_menu.html
<!-- Start Navigation -->
<nav class="navbar navbar-default bootsnav" style="background-color:#000;">
<div class="container">
<!-- Start Header Navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu" style="background-color:#000 !important;">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#brand"><img src="http://1.bp.blogspot.com/-jhtHCfcfs3s/V1Z8Q6rZuqI/AAAAAAAAAds/yTYZ_oBaiJUIzOjnT8uZrgS8P1enuYhVQCK4B/s1600/OWNGEEK.png" class="logo"
style="width: 88px; background: black;padding: 10px; margin-top: -5px; float: left;"alt=""></a>
</div>
<!-- End Header Navigation -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeInUp">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>
<ul class="dropdown-menu" style="background-color:#000;">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
<ul class="dropdown-menu" style="background-color:#000;">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
<ul class="dropdown-menu" style="background-color:#000;">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</li>
<li><a href="#">Custom Menu</a></li>
</ul>
</li>
<li><a href="#">Custom Menu</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!-- End Navigation -->
Raw
Responsive_navigation_menu.js
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootsnavs -->
<script src="http://bootsnav.com/js/bootsnav.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment