mirror of
https://github.com/jasny/bootstrap.git
synced 2026-04-24 03:00:49 -04:00
Added examples for navmenu
This commit is contained in:
Arnold Daniels
76
examples/navmenu-push/index.html
Normal file
76
examples/navmenu-push/index.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
|
||||
|
||||
<title>Off Canvas Push Menu Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="navmenu-push.css" rel="stylesheet">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../../assets/js/html5shiv.js"></script>
|
||||
<script src="../../assets/js/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
|
||||
<a class="navmenu-brand" href="#">Project name</a>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="../navmenu/">Slide in</a></li>
|
||||
<li class="active"><a href="./">Push</a></li>
|
||||
<li><a href="../navmenu-reveal/">Reveal</a></li>
|
||||
</ul>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu navmenu-nav">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>Off Canvas Push Menu Template</h1>
|
||||
</div>
|
||||
<p class="lead">This example demonstrates the use of the offcanvas plugin with a push effect.</p>
|
||||
<p>You get the push effect by setting the <code>canvas</code> option to 'body'.</p>
|
||||
<p>Also take a look at the example for a navmenu with <a href="../navmenu">slide in effect</a> and <a href="../navmenu-reveal">reveal effect</a>.</p>
|
||||
</div><!-- /.container -->
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../assets/js/jquery.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../js/offcanvas.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
34
examples/navmenu-push/navmenu-push.css
Normal file
34
examples/navmenu-push/navmenu-push.css
Normal file
@@ -0,0 +1,34 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 50px 0 0 0;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navmenu.canvas-sliding,
|
||||
.navmenu.canvas-slid {
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
@media (min-width: 0px) {
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
.navbar {
|
||||
width: 0; /* Don't show the menu */
|
||||
height: 0;
|
||||
overflow: visible; /* Do show the contents (the button) */
|
||||
}
|
||||
}
|
||||
80
examples/navmenu-reveal/index.html
Normal file
80
examples/navmenu-reveal/index.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
|
||||
|
||||
<title>Off Canvas Reveal Menu Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="navmenu-reveal.css" rel="stylesheet">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../../assets/js/html5shiv.js"></script>
|
||||
<script src="../../assets/js/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navmenu navmenu-default navmenu-fixed-left">
|
||||
<a class="navmenu-brand" href="#">Project name</a>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="../navmenu/">Slide in</a></li>
|
||||
<li><a href="../navmenu-push/">Push</a></li>
|
||||
<li class="active"><a href="./">Reveal</a></li>
|
||||
</ul>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu navmenu-nav">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="canvas">
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>Off Canvas Reveal Menu Template</h1>
|
||||
</div>
|
||||
<p class="lead">This example demonstrates the use of the offcanvas plugin with a reveal effect.</p>
|
||||
<p>You get the reveal effect by wrapping the content in a div and setting the <code>canvas</code> option to target that div.</p>
|
||||
<p>Note that in this example, the navmenu doesn't have the <code>.offcanvas</code> class, but is placed under the canvas by setting the <code>z-index</code>.</p>
|
||||
<p>Also take a look at the examples for a navmenu with <a href="../navmenu">slide in effect</a> and <a href="../navmenu-push">push effect</a>.</p>
|
||||
</div><!-- /.container -->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../assets/js/jquery.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../js/offcanvas.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
44
examples/navmenu-reveal/navmenu-reveal.css
Normal file
44
examples/navmenu-reveal/navmenu-reveal.css
Normal file
@@ -0,0 +1,44 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navmenu {
|
||||
z-index: 1;
|
||||
}
|
||||
.navmenu.canvas-sliding,
|
||||
.navmenu.canvas-slid {
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 50px 0 0 0;
|
||||
background: #fff;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 0px) {
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
.navbar {
|
||||
width: 0; /* Don't show the menu */
|
||||
height: 0;
|
||||
overflow: visible; /* Do show the contents (the button) */
|
||||
}
|
||||
.canvas {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
77
examples/navmenu/index.html
Normal file
77
examples/navmenu/index.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
|
||||
|
||||
<title>Navmenu Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="navmenu.css" rel="stylesheet">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../../assets/js/html5shiv.js"></script>
|
||||
<script src="../../assets/js/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
|
||||
<a class="navmenu-brand visible-md visible-lg" href="#">Project name</a>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li class="active"><a href="./">Slide in</a></li>
|
||||
<li><a href="../navmenu-push/">Push</a></li>
|
||||
<li><a href="../navmenu-reveal/">Reveal</a></li>
|
||||
</ul>
|
||||
<ul class="nav navmenu-nav">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu navmenu-nav">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-default navbar-fixed-top visible-sm visible-xs">
|
||||
<button type="button" class="navbar-toggle visible-sm visible-xs" data-toggle="offcanvas" data-target=".navmenu">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Project name</a>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>Navmenu Template</h1>
|
||||
</div>
|
||||
<p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
|
||||
<p>Also take a look at the examples for a navmenu with <a href="../navmenu-push">push effect</a> and <a href="../navmenu-reveal">reveal effect</a>.</p>
|
||||
</div><!-- /.container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../assets/js/jquery.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../js/offcanvas.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
examples/navmenu/navmenu.css
Normal file
32
examples/navmenu/navmenu.css
Normal file
@@ -0,0 +1,32 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
padding: 50px 0 0 0;
|
||||
}
|
||||
|
||||
.navmenu {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
text-align: center;
|
||||
}
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
.navbar-toggle {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body {
|
||||
padding: 0 0 0 300px;
|
||||
}
|
||||
.navmenu {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
BIN
examples/screenshots/navmenu-push.jpg
Normal file
BIN
examples/screenshots/navmenu-push.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
examples/screenshots/navmenu-reveal.jpg
Normal file
BIN
examples/screenshots/navmenu-reveal.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
examples/screenshots/navmenu.jpg
Normal file
BIN
examples/screenshots/navmenu.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Reference in New Issue
Block a user