Skip to content

Commit 1d25c95

Browse files
CodeHimBlogCodeHimBlog
authored
Add files via upload
1 parent ae730d4 commit 1d25c95

File tree

2 files changed

+281
-0
lines changed

2 files changed

+281
-0
lines changed

‎index.html

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<meta charset="UTF-8" />
6+
<title> jQuery Responsive jSide Menu with Dropdowns - Plugin by Asif Mughal </title>
7+
<meta name="description" content="jSide Menu is a free jQuery menu plugin that helps you create side vertical navigation menu with dropdowns, fully responsive and customizable." />
8+
9+
<!--Google Fonts-->
10+
<link href="https://fonts.googleapis.com/css?family=Hind|Oxygen" rel="stylesheet" />
11+
12+
<!--jQuery-->
13+
<script src="../js/jquery.min.js"></script>
14+
15+
<!--Material Design Iconic Font-->
16+
<link rel="stylesheet" href="material-design/css/material-design-iconic-font.css" />
17+
<!--jSide Menu Plugin-->
18+
<script src="js/jquery.jside.menu.js"></script>
19+
<!--jSide Menu CSS-->
20+
<link rel="stylesheet" href="css/jside-menu.css" />
21+
<!--jSide Skins-->
22+
<link rel="stylesheet" href="css/jside-skins.css" />
23+
24+
<script>
25+
$(document).ready(function(){
26+
27+
$(".menu-container").jSideMenu({
28+
jSidePosition: "position-left", //possible options position-left or position-right
29+
30+
jSideSticky: true, // menubar will be fixed on top, false to set static
31+
32+
jSideSkin: "default-skin", // to apply custom skin, just put its name in this string
33+
});
34+
});
35+
</script>
36+
37+
</head>
38+
<body>
39+
40+
<menu class="menubar">
41+
<menuitem>
42+
<button class="menu-trigger"> </button>
43+
</menuitem>
44+
45+
<menuitem class="logo" title="Your Logo Goes Here">
46+
<a href="#1"><img src="image/jside-menu.png" alt="jSide Menu" /> </a>
47+
</menuitem>
48+
</menu>
49+
50+
51+
<div class="menu-head">
52+
<span class="layer">
53+
<div class="col">
54+
<div class="row for-pic">
55+
<div class="profile-pic">
56+
<img src="image/asif-mughal.jpg" alt="Asif Mughal" />
57+
</div>
58+
</div>
59+
<div class="row for-name">
60+
<h3 title="User Name"> Asif Mughal </h3>
61+
<span class="tagline"> Tagline text goes here</span>
62+
</div>
63+
</div> <!--//col-->
64+
</span>
65+
</div> <!--//menu-head-->
66+
67+
<nav class="menu-container">
68+
69+
<ul class="menu-items">
70+
<li><span class="item-icon"><i class="zmdi zmdi-android"></i></span> <a href="#1">
71+
Main item one </a></li>
72+
73+
<li> <span class="item-icon"> <i class="zmdi zmdi-apple"></i> </span> <a href="#1">
74+
Main item two </a></li>
75+
76+
<li class="has-sub"> <span class="item-icon"> <i class="zmdi zmdi-windows"></i> </span>
77+
<span class="dropdown-heading">
78+
Item three with dropdown </span>
79+
<ul>
80+
<li> <a href="#2">dropdown sub item 1 </a> </li>
81+
<li> <a href="#2"> dropdown sub item 2 </a> </li>
82+
<li> <a href="#2"> dropdown sub item 3 </a> </li>
83+
<li> <a href="#2"> dropdown sub item 4 </a> </li>
84+
<li> <a href="#2"> dropdown sub item 5 </a> </li>
85+
<li> <a href="#2"> dropdown sub item 6 </a> </li>
86+
<li> <a href="#2"> dropdown sub item 7 </a> </li>
87+
</ul>
88+
</li>
89+
<li class="has-sub"> <span class="item-icon"> <i class="zmdi zmdi-devices"></i> </span>
90+
<span class="dropdown-heading">
91+
92+
Item four with dropdown </span>
93+
<ul>
94+
<li> <a href="#2">sub item 1 </a> </li>
95+
<li> <a href="#2">sub item 2 </a> </li>
96+
<li> <a href="#2">sub item 3 </a> </li>
97+
<li> <a href="#2">sub item 4 </a> </li>
98+
</ul>
99+
</li>
100+
101+
<li> <span class="item-icon"> <i class="zmdi zmdi-keyboard"></i> </span> <a href="#1">
102+
Main item four </a></li>
103+
104+
<li> <span class="item-icon"> <i class="zmdi zmdi-dock"></i> </span> <a href="#1">
105+
Main item five </a></li>
106+
107+
<li> <span class="item-icon"> <i class="zmdi zmdi-mouse"></i> </span> <a href="#1">
108+
Main item five </a></li>
109+
110+
<li> <span class="item-icon"> <i class="zmdi zmdi-tv"></i> </span> <a href="#1">
111+
Main item six </a></li>
112+
113+
</ul>
114+
115+
116+
</nav>
117+
<div class="dim-overlay"></div>
118+
119+
<!--End jSide Menu-->
120+
121+
122+
123+
124+
<!--Introduction and Demo Only -->
125+
<header class="intro">
126+
<h1>jQuery Responsive jSide Menu with Dropdowns</h1>
127+
<p>
128+
jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.
129+
<br />
130+
<br />
131+
<b> Written in:</b><i> HTML, CSS, JS</i><br>
132+
<b> Frameworks: </b> <i> jQuery 3.3.1 &amp; Material-Design-Iconic-Font 2.0 </i>
133+
</p>
134+
<div class="action">
135+
<a class="btn github" href="#3"> Fork on GiHub </a>
136+
<a class="btn down" href="#3">Download </a>
137+
</div>
138+
</header>
139+
140+
141+
<main>
142+
<article>
143+
144+
<h2> Main Features </h2>
145+
<ul>
146+
<li>Fully Responsive and Customizable.</li>
147+
<li>Unlimited main items and sub items can be added. </li>
148+
<li>Sticky Profile.</li>
149+
<li> CSS3 and jQuery Animations Enabled. </li>
150+
<li>Material Design Iconic Fonts. </li>
151+
<li> Background dim-overlay when menu open </li>
152+
<li> Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported. </li>
153+
<li> User Friendly and Easy to Implement. </li>
154+
</ul>
155+
156+
157+
158+
159+
160+
<h2> Save Time to Quickly Customize </h2>
161+
<p>
162+
You can highly customize this navigation system without investing time in modifications of code.
163+
</p>
164+
165+
<h3> 1. jSide Menu Skin </h3>
166+
167+
<p> Choose the theme for the menu: </p>
168+
169+
<div class="theme-tray">
170+
<section class="pl-color">
171+
<h4> Plain Color</h4>
172+
<span title="Love Red" class="red"> </span>
173+
<span title="Clover Green" class="green"> </span>
174+
<span title="Dodger Blue" class="blue"> </span>
175+
<span title="Bright Neon Pink" class="bnp"> </span>
176+
<span title="Pumpkin Orange" class="orange"> </span>
177+
<span title="Black" class="black"> </span>
178+
<span title="Neon Pink" class="pink"> </span>
179+
<span title="Golden Brown" class="gol-b"> </span>
180+
<span title="Greenish Blue" class="greenish"> </span>
181+
<span title="Wood" class="wood"> </span>
182+
</section>
183+
<!--Do not Remove The following Ad Unit if you distribute this Plugin to others-->
184+
<div style="margin: 10px;">
185+
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
186+
<ins class="adsbygoogle"
187+
style="display:block; text-align:center;"
188+
data-ad-layout="in-article"
189+
data-ad-format="fluid"
190+
data-ad-client="ca-pub-7089100907045419"
191+
data-ad-slot="7782420780"></ins>
192+
<script>
193+
(adsbygoogle = window.adsbygoogle || []).push({});
194+
</script>
195+
</div>
196+
<section class="gr-color">
197+
<h4> Gradient Color</h4>
198+
<span title="Flickr" class="flickr"> </span>
199+
<span title="Facebook Messenger" class="fb-messenger"> </span>
200+
<span title="Moonlit Asteroid" class="moonlit"> </span>
201+
<span title="Park Life" class="park-life"> </span>
202+
<span title="Dance to Forget" class="d2f"> </span>
203+
<span title="Man of the Steel" class="steel-man"> </span>
204+
<span title="Amethyst" class="amethyst"> </span>
205+
<span title="Between the Clouds" class="between-clouds"> </span>
206+
<span title="Crazy Orange"class="crazy-orange"> </span>
207+
<span title="Endless River" class="endless-river"> </span>
208+
</section>
209+
</div>
210+
<!--//theme-tray-->
211+
212+
<h3>2. Menubar Position</h3>
213+
<p> Choose the menubar position:</p>
214+
<ol>
215+
<li> <input type="radio" id="set-top" name="radio" checked/> Fixed on Top </li>
216+
<li> <input type="radio" name="radio" id="set-st"/> Static </li>
217+
218+
</ol>
219+
220+
<h3>3. Menu Container Position </h3>
221+
<p> Choose the suitable position for menu container. </p>
222+
<select class="menu-position">
223+
<option> position-left </option>
224+
<option> position-right </option>
225+
</select>
226+
227+
<h2>Generated Script</h2>
228+
<p>
229+
Copy and paste it into document ready function.
230+
</p>
231+
<pre class="prettyprint">
232+
$(".menu-container").jSideMenu({
233+
<span class="j-pos">jSidePosition: "position-left",</span>
234+
<span class="j-sticky">jSideSticky: true, </span>
235+
<span class="j-skin">jSideSkin: "default-skin", </span>
236+
});
237+
</pre>
238+
239+
240+
<h2> Browsers Compatability</h2>
241+
<p>Best view on Google Chrome, Firefox, Opera and UC Desktop Browser</p>
242+
243+
244+
</p>
245+
246+
247+
</article>
248+
249+
</main>
250+
251+
252+
253+
<!--DEMO ONLY FILES-->
254+
<!--Demo CSS-->
255+
<link rel="stylesheet" href="docs/demo-only.css" />
256+
<script src="docs/demo-only.js"></script>
257+
258+
259+
260+
<footer class="credit">
261+
Coded with <span title="Coffee"></span> by Asif Mughal &copy; 2018 - <a href="https://www.codehim.com" rel="dofollow" title="Awesome Web Projects and Tutorials" target="_blank"> Codehim.com </a>
262+
</footer>
263+
264+
</body>
265+
</html>

‎info.txt

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
jQuery Plugin: jSide Menu (Responsive Side Menu) Developed by Codehim.
2+
3+
For more Awesome Web projects and plugins keep visiting us:
4+
5+
Codehim: https://www.codehim.com
6+
7+
GitHub: https://github.com/CodeHimBlog
8+
9+
For suggestions, help or feedback:
10+
https://www.codehim.com/p/contact.html
11+
Email: aasomughal@gmail.com
12+
13+
14+
Asif Mughal
15+
16+

0 commit comments

Comments
 (0)