lintel-contrib-navbar
Version:
Navbar for lintel.
85 lines (79 loc) • 3.25 kB
HTML
<html>
<head>
<link rel="stylesheet" href="../../bower_components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="../../bower_components/lintel/dist/lintel.css">
<link rel="stylesheet" href="../../bower_components/lintel-contrib-buttons/dist/buttons.css">
<link rel="stylesheet" href="../../bower_components/lintel-contrib-dropdowns/dist/dropdowns.css">
<link rel="stylesheet" href="../../dist/navbar.css">
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/lintel-contrib-dropdowns/dist/dropdowns.js"></script>
<script src="../../dist/navbar.js"></script>
</head>
<body class="has-navbar-left has-navbar-collapsed">
<nav class="navbar navbar-inverse navbar-left navbar-mobile">
<div class="navbar-brand">
<a href="#" class="navbar-toggle" data-toggle="navbar" aria-label="Open main menu">
<div class="navbar-toggle-bar" aria-hidden="true"></div>
</a>
<a href="/" class="navbar-brand-link">
<h1 class="navbar-title">Lintel</h1>
<img class="navbar-logo" src="http://placehold.it/100x35" alt="Logo">
</a>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-left" id="navbar">
<div class="navbar-brand">
<a href="#" class="navbar-toggle" aria-label="Close main menu">
<div class="navbar-toggle-bar" aria-hidden="true"></div>
</a>
<a href="/" class="navbar-brand-link">
<h1 class="navbar-title">Lintel</h1>
<img class="navbar-logo" src="http://placehold.it/44x40" alt="Logo">
</a>
</div>
<ul class="navbar-list">
<li>
<a href="#">
<i class="fa fa-home navbar-list-icon" aria-hidden="true"></i> <span class="navbar-tooltip">Home</span>
</a>
</li>
<li class="active">
<a href="#">
<i class="fa fa-user navbar-list-icon" aria-hidden="true"></i> <span class="navbar-tooltip">Profile</span>
</a>
</li>
<li class="btn-group">
<a href="#" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="fa fa-tasks navbar-list-icon" aria-hidden="true"></i> <span class="navbar-tooltip">Dropdown <span class="btn-caret" aria-hidden="true"></span></span>
</a>
<ul class="dropdown navbar-dropdown" role="menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</li>
</ul>
<ul class="navbar-list navbar-list-right">
<li>
<a href="#">
<i class="fa fa-sign-in navbar-list-icon" aria-hidden="true"></i> <span class="navbar-tooltip">Log In</span>
</a>
</li>
<li>
<a href="#" data-toggle="navbar-collapse">
<i class="fa fa-arrow-right navbar-list-icon" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
<script>
$('#navbar').navbar({
toggle: false,
collapsible: true,
toggleCollapse: false
});
</script>
<p class="pad">Body</p>
</body>
</html>