-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
89 lines (80 loc) · 5.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu - Fixed header</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.4/css/jquery.mmenu.all.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.4/js/jquery.mmenu.all.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
// Only loads mmenu if less than 768 px
if (parseInt(jQuery(window).width()) < 768) {
// Initializes mmenu
$('#navbar').mmenu({
slidingSubmenus: false
});
// Rewires the default bootstrap hamburger to point to mmenu.
$(".navbar-header button").removeAttr("data-toggle data-target")
.removeClass('collapsed')
.wrap( "<a href='#navbar'></a>" );
// Pulls removes classes for dropdown menus/submenus
// TODO: toggle classes instead of remove to make development easier
$("#navbar li.dropdown").removeClass('dropdown');
$("#navbar ul.dropdown-menu").removeClass('dropdown-menu');
$("#navbar .caret").toggleClass('caret');
}
});
</script>
</head>
<body>
<div id="page">
<div class="navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<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 id="navbar" class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
<a id="drop4" role="button" data-toggle="dropdown" href="#">Blank link <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First sub-item</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Second sub-item</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Third sub-item</a></li>
</ul>
</li>
<li><a href="index.html">Fixed header</a></li>
<li><a href="horizontal-submenus.html">Horizontal submenus</a></li>
<li><a href="left-right-mmenu.html">Left/Right menu</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="padd-content"></div>
<div class="page-header">
<h1>Example - Fixed header <small>Resize window</small></h1>
</div>
<div class="col-lg-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, dolorem, amet, sit accusantium aperiam adipisci deleniti iure soluta officiis eligendi earum velit itaque totam rem distinctio culpa laborum. Aliquid, alias, doloremque, dicta sed natus recusandae fuga cum rerum quaerat explicabo nostrum quis eaque iste facere corporis soluta earum veniam voluptatem quasi possimus minima modi fugiat repudiandae blanditiis ducimus dignissimos ea nam? Asperiores, quo suscipit similique consequatur facilis veniam distinctio quasi necessitatibus ducimus alias pariatur in eum aliquam eveniet tenetur sapiente nostrum corporis delectus facere rem sed illo perferendis perspiciatis. Asperiores, ad, fugiat, ducimus laborum temporibus aliquid deleniti ipsam sint aperiam necessitatibus dolorum delectus perspiciatis quod beatae veniam. Repudiandae, aliquam, quisquam, quo, nulla neque at nesciunt sequi officia placeat aut unde iusto vel molestiae maiores fugit? Unde, dolores adipisci totam ad explicabo consequatur fuga quaerat placeat praesentium asperiores! Obcaecati, sequi expedita explicabo odit laborum consequatur consequuntur placeat magni dolorem minus architecto mollitia ipsa ad perspiciatis itaque cum non id quidem veritatis error. Neque, obcaecati impedit officiis quaerat voluptatem repudiandae recusandae accusamus tempore! Dicta, eveniet, nihil, mollitia, dolores sunt dignissimos sit officiis neque molestias nesciunt veritatis praesentium molestiae consequuntur tempore quam totam repudiandae voluptatem inventore hic impedit aut quaerat nulla voluptatibus. Repudiandae.</p>
</div>
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, expedita, consectetur, modi qui quos at tenetur veritatis harum ipsam dolorum libero autem molestiae dolores ducimus repellat cupiditate commodi. Explicabo, repellendus animi obcaecati dolore corporis doloribus nobis laborum voluptas aliquid temporibus. Quod, saepe, quas aut in odio tempore quam debitis? Nulla.</p>
<a href="#">lorem ipsum</a>
</div>
</div>
</div>
</body>
</html>