@sgalinski/responsive-side-menu
Version:
A simple and extendable slide-in menu
113 lines (102 loc) • 3.29 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>sg-side-menu Demo</title>
<!-- include Bootstrap from CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="../dist/responsive-side-menu.css">
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#homr">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="/foo/" 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">Action</a></li>
<li><a href="#another-action">Another action</a></li>
<li>
<a href="#smthelese">Something else here</a>
<ul>
<li><a href="/demo/">Something else here</a></li>
<li><a href="#hallo-test">Hallo Test</a></li>
<li><a href="#ein-weiterer-link">Ein weiterer Link</a></li>
<li><a href="#foobar">Foobar</a></li>
<li><a href="#baz">Baz</a></li>
<li><a href="#fafafafafafa">Fafafafafafa</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#separated-link">Separated link</a></li>
<li><a href="#one-more-separated-link">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#rsm"><span class="glyphicon glyphicon-menu-hamburger"></span><span class="sr-only">Menu</span></a></li>
</ul>
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
<script src="../dist/responsive-side-menu.js"></script>
<script>
menu = new ResponsiveSideMenu.default('navbar', {
menuTitle: 'My cool Menu',
orientation: 'right',
search: {
submitCallback: function(query) {
console.log('Search for ' + query);
}
},
topMenu: {
buttons: [
{
label: 'FOO',
href: '#foo'
},
{
label: 'BAR',
markup: '<select><option>Eins</option><option>Zwei</option></select>'
}
]
},
footerMenu: {
buttons: [
{
label: 'FOO',
href: '#foo'
},
{
label: 'BAR',
markup: '<select><option>Eins</option><option>Zwei</option></select>'
}
]
},
userProfileHeader: {
userImage: 'http://gravatar.com/avatar/b107dfc20d96924ee3123c94df96bf20?size=200',
userName: 'Philipp Nowinski',
href: '#login'
}
});
setTimeout(() => {
menu.open();
}, 2000);
</script>
</body>
</html>