-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
133 lines (126 loc) · 4.08 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HR Navigation Responsive Menu - Md Hidaytullah Rahmani</title>
<meta name="viewport" content="width=device-width">
<meta name="keyword" content="Responisve menu, multilevel menu, mobile navigation menu, free responsive menu, HR Navigation Responsive Menu, Hidayt Rahman, Md hidaytullah Rahmani">
<meta name="description" content="HR Navigation Responsive Menu - HR Navigation Responsive Menu for all type of Web Applications, NATIVE Mobile App with very less code and easy to implement with all possible options">
<meta name="author" content="Md Hidaytullah Rahmani, Hidayt Rahman">
<link rel="stylesheet" type="text/css" href="css/hr.nav.res.menu.min.css">
<link rel="stylesheet" type="text/css" href="css/style1.css">
<script src="js/1.11.2.jquery.min.js"></script>
<script src="js/hr.nav.res.menu.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".hr-nav-wrapper").hrNavMenu({
speed:800, //integer in milliseconds 1000,2000
menuType :"fromTop", //fromLeft, fromTop
desktopListWidth : "fluid", // fluid, default
openEvent : "click", //click, mouseover
multiple : false // true, false
});
});
</script>
</head>
<body>
<div class="plugin-content">
<h1>HR Navigation Responsive Menu</h1>
<h4>HR Navigation Responsive Menu for all type of Web Applications, NATIVE Mobile App with very less code and easy to implement with all possible options</h4>
<h4 class="mhead">Features</h4>
<ul class="hr-features">
<li>Responsive all devices support</li>
<li>Handle events with 2 option (Click and Mouseover)</li>
<li>All major browsers compatible</li>
<li>Toggle from left side and top side</li>
<li>Multilple open menu option (Open one at a time or multiple)</li>
<li>Equal width of menu list on Desktop</li>
<li>Custom speed option</li>
<li>LESS compatible</li>
<li>Lightweight js only (2 kb)</li>
</ul>
<h2>Live Demo</h2>
<!-- Navigation section start-->
<nav class="hr-nav-wrapper">
<div class="navigation hr-navigation">
<ul>
<li><a href="#">Nav</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Menu 4.1</a>
<ul>
<li><a href="#">Menu 4.2</a></li>
<li><a href="#">Menu 4.2</a></li>
</ul>
</li>
<li><a href="#">Menu 4.1</a>
<ul>
<li><a href="#">Menu 4.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</ul>
</div>
<!-- Navigation end -->
</nav>
<h2>Documentation</h2>
<div class="introPlugin">
<span>Include these files mandatory</span>
<ol class="html-tag">
<li><link rel="stylesheet" href="hr.nav.res.menu.min.css"></li>
<li><script src="1.11.2.jquery.min.js"> </script></li>
<li><script src="hr.nav.res.menu.min.js"> </script></li>
</ol>
</div>
<h4 class="mhead">HTML</h4>
<pre>
<nav class="hr-nav-wrapper">
<div class="navigation hr-navigation">
<ul>
<li> <a href="#">Nav 1</a > </li>
<li> <a href="#">Nav 2</a > </li>
</ul>
</div>
</nav>
</pre>
<h4 class="mhead">jQuery</h4>
<pre>
$(".hr-nav-wrapper").hrNavMenu({
speed:800,
menuType :"fromLeft"
});
</pre>
<h2> Mobile Device Demo</h2>
<br />
<div class="examples">
<div class="exm">
<h3>Demo 1</h3>
<iframe src="example1.html" width="480" height="500"></iframe>
</div>
<div class="exm">
<h3>Demo 2</h3>
<iframe src="example2.html" width="480" height="500"></iframe>
</div>
</div>
</div>
<footer>
<div class="pluginAuthor">
<div class="author-url">
<a href="http://www.github.com/hidaytrahman" class="social plugins" target="_blank" rel="nofollow">More Plugins</a>
<a href="http://www.webtechpie.com" class="social plugins" target="_blank">Provide Work?</a>
<a href="mailto:[email protected]" class="social plugins" >Any Query ?</a>
</div>
</div>
</footer>
</body>
</html>