Skip to content

Instantly share code, notes, and snippets.

@dhendo

dhendo/gist:1676534

Created January 25, 2012 14:34
Show Gist options
  • Save dhendo/1676534 to your computer and use it in GitHub Desktop.
Save dhendo/1676534 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Nav Test
Raw
gistfile1.html
<html class="no-js" lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"type="text/javascript"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"type="text/javascript"></script>
<meta charset="utf-8">
<title>Responsive Nav Test</title>
</head>
<body>
<header id="navigation" class="navbar navbar-static">
<section class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".menu3" style="color: white;">
<b>3</b>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".menu2" style="color: white;">
<b>2</b>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".menu1" style="color: white;">
<b>1</b>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse menu1">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Menu">
<b style="color:#fff;">1</b>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#" title="Dashboard">Dashboard</a>
</li>
<li>
<a href="#" title="Link 2">Link 2</a>
</li>
<li>
<a href="#" title="Link 3">Link 3</a>
</li>
<li>
<a href="#" title="Link4">Link 4</a>
</li>
<li>
<a href="#" title="Link 5">Link 5</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="nav-collapse menu2">
<ul class="nav">
<li>
<a href="#">Link A</a>
</li>
<li>
<a href="#">Link B</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><b style="color:#fff;">2</b> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#" title="Link C">Link C</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="nav-collapse menu3">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Settings">
<b style="color:#fff;">3</b>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#" title="Sign out">Sign out</a>
</li>
<li class="divider"></li>
<li>
<a href="#" title="Settings">Something Else</a>
</li>
</ul>
</li>
</ul>
</div>
<br>
</div>
</section>
</header>
<div class="container">
<div class="">
<div class="breadcrumbs">
<ul class="breadcrumb">
<li><a href="#">path1</a> |</li>
<li><a href="#">path2</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment