Instantly share code, notes, and snippets.
Last active
May 1, 2018 01:31
Nav that must be clicked to activate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="container navbar navbar-default"> | |
<!-- Non-collapsing part of nav --> | |
<div class="navbar-header"> | |
<!-- Button that toggles collapsing part of nav bar --> | |
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#site-nav"> | |
<span class="sr-only">Toggle navigation</span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<!-- Brand navigation (links to home page) --> | |
<a class="navbar-brand" href="index.html" title="Home">Colors</a> | |
</div> | |
<!-- Collapsing part of nav --> | |
<div class="collapse navbar-collapse" id="site-nav"> | |
<!-- Core content nav --> | |
<ul class="nav navbar-nav"> | |
<li class="dropdown"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></a> | |
<ul class="dropdown-menu"> | |
<li><a href="#">Red</a></li> | |
<li><a href="#">Blue</a></li> | |
<li><a href="#">Yellow</a></li> | |
</ul> | |
</li> | |
<li class="dropdown"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Secondary <span class="caret"></span></a> | |
<ul class="dropdown-menu"> | |
<li><a href="#">Green</a></li> | |
<li><a href="#">Purple</a></li> | |
<li><a href="#">Orange</a></li> | |
</ul> | |
</li> | |
<li class="dropdown"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tertiary <span class="caret"></span></a> | |
<ul class="dropdown-menu"> | |
<li><a href="#">Amber</a></li> | |
<li><a href="#">Violet</a></li> | |
<li><a href="#">Magenta</a></li> | |
</ul> | |
</li> | |
</ul> | |
<!-- Utility Nav --> | |
<ul class="nav navbar-nav navbar-right"> | |
<li><a href="#">Search</a></li> | |
</ul> | |
</div> <!-- End collapsing nav --> | |
</nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment