Skip to content

Commit a62a784

Browse files
CodeHimBlogCodeHimBlog
authored
Create index.html
1 parent 4e15be6 commit a62a784

File tree

1 file changed

+210
-0
lines changed

1 file changed

+210
-0
lines changed

‎index.html

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<meta charset="UTF-8" />
6+
<title> jQuery Responsive Side Menu with Dropdowns - jSide Menu </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 Font -->
10+
<link href="https://fonts.googleapis.com/css?family=Questrial&display=swap" rel="stylesheet">
11+
<!--Material Design Iconic Font-->
12+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
13+
14+
<!--jSide Menu CSS-->
15+
<link rel="stylesheet" href="css/jside-menu.css">
16+
<!--jSide Skins-->
17+
<link rel="stylesheet" href="css/jside-skins.css">
18+
19+
20+
</head>
21+
<body>
22+
<!-- Start jside Menu -->
23+
<menu class="menubar">
24+
<menuitem>
25+
<button class="menu-trigger"> <i class="material-icons">menu</i> </button>
26+
</menuitem>
27+
28+
<menuitem class="logo" title="Your Logo Goes Here">
29+
<a href="#1"><img src="img/jside-menu.png" alt="jSide Menu" /> </a>
30+
</menuitem>
31+
</menu>
32+
<div class="menu-head">
33+
<span class="layer">
34+
<div class="col">
35+
<div class="row for-pic">
36+
<div class="profile-pic">
37+
<img src="img/asif-mughal.jpg" alt="Asif Mughal" />
38+
</div>
39+
</div>
40+
<div class="row for-name">
41+
<h3 title="User Name"> Asif Mughal </h3>
42+
<span class="tagline"> Web Developer</span>
43+
</div>
44+
</div> <!--//col-->
45+
</span>
46+
</div> <!--//menu-head-->
47+
<nav class="menu-container">
48+
<ul class="menu-items">
49+
<li><a href="#1"> <i class="material-icons">widgets</i> Main item one </a></li>
50+
<li><a href="#1"> <i class="material-icons">bar_chart</i> Main item two </a></li>
51+
<li class="has-sub"> <span class="dropdown-heading"> <i class="material-icons">collections</i> Item three with dropdown </span>
52+
<ul>
53+
<li> <a href="#2">dropdown sub item 1 </a> </li>
54+
<li> <a href="#2"> dropdown sub item 2 </a> </li>
55+
<li> <a href="#2"> dropdown sub item 3 </a> </li>
56+
<li> <a href="#2"> dropdown sub item 4 </a> </li>
57+
<li> <a href="#2"> dropdown sub item 5 </a> </li>
58+
<li> <a href="#2"> dropdown sub item 6 </a> </li>
59+
<li> <a href="#2"> dropdown sub item 7 </a> </li>
60+
</ul>
61+
</li>
62+
<li class="has-sub"> <span class="dropdown-heading"> <i class="material-icons">camera</i> Item four with dropdown </span>
63+
<ul>
64+
<li> <a href="#2">sub item 1 </a> </li>
65+
<li> <a href="#2">sub item 2 </a> </li>
66+
<li> <a href="#2">sub item 3 </a> </li>
67+
<li> <a href="#2">sub item 4 </a> </li>
68+
</ul>
69+
</li>
70+
<li> <a href="#1"> <i class="material-icons">color_lens</i> Main item four </a></li>
71+
<li> <a href="#1"> <i class="material-icons">pie_chart</i> Main item five </a></li>
72+
<li> <a href="#1"> <i class="material-icons">highlight</i> Main item five </a></li>
73+
<li> <a href="#1"> <i class="material-icons">format_size</i> Main item six </a></li>
74+
</ul>
75+
</nav>
76+
<!--End jSide Menu-->
77+
78+
79+
<!--Introduction and Demo Only -->
80+
<header class="intro">
81+
<h1>jQuery Responsive jSide Menu with Dropdowns</h1>
82+
<p>
83+
jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.
84+
<br />
85+
<br />
86+
<b> Written in:</b><i> HTML, CSS, JS</i><br>
87+
<b> Dependency: </b> <i> jQuery 3.3.1 &amp; Material Design Iconic Font 2.0 </i>
88+
</p>
89+
<div class="action">
90+
<a class="btn github" href="https://github.com/CodeHimBlog/jquery-jside-menu"> Fork on GiHub </a>
91+
<a class="btn down" href="https://github.com/CodeHimBlog/jquery-jside-menu/archive/master.zip"> Download </a>
92+
93+
</div>
94+
</header>
95+
96+
97+
<main>
98+
<article>
99+
100+
<h2> Main Features </h2>
101+
<ul>
102+
<li>Fully Responsive and Customizable.</li>
103+
<li>Unlimited main items and sub items can be added. </li>
104+
<li>Sticky Profile.</li>
105+
<li> CSS3 and jQuery Animations Enabled. </li>
106+
<li>Material Design Iconic Fonts. </li>
107+
<li> Background dim-overlay when menu open </li>
108+
<li> Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported. </li>
109+
<li> User Friendly and Easy to Implement. </li>
110+
</ul>
111+
112+
113+
<h2> Save Time to Quickly Customize </h2>
114+
<p>
115+
You can highly customize this navigation system without investing time in modifications of code.
116+
</p>
117+
118+
<h3> 1. jSide Menu Skin </h3>
119+
120+
<p> Choose the theme for the menu: </p>
121+
122+
<div class="theme-tray">
123+
<section class="pl-color">
124+
<h4> Plain Color</h4>
125+
<span title="Love Red" class="red"> </span>
126+
<span title="Clover Green" class="green"> </span>
127+
<span title="Dodger Blue" class="blue"> </span>
128+
<span title="Bright Neon Pink" class="bnp"> </span>
129+
<span title="Pumpkin Orange" class="orange"> </span>
130+
<span title="Black" class="black"> </span>
131+
<span title="Neon Pink" class="pink"> </span>
132+
<span title="Golden Brown" class="gol-b"> </span>
133+
<span title="Greenish Blue" class="greenish"> </span>
134+
<span title="Wood" class="wood"> </span>
135+
</section>
136+
<section class="gr-color">
137+
<h4> Gradient Color</h4>
138+
<span title="Flickr" class="flickr"> </span>
139+
<span title="Facebook Messenger" class="fb-messenger"> </span>
140+
<span title="Moonlit Asteroid" class="moonlit"> </span>
141+
<span title="Park Life" class="park-life"> </span>
142+
<span title="Dance to Forget" class="d2f"> </span>
143+
<span title="Man of the Steel" class="steel-man"> </span>
144+
<span title="Amethyst" class="amethyst"> </span>
145+
<span title="Between the Clouds" class="between-clouds"> </span>
146+
<span title="Crazy Orange"class="crazy-orange"> </span>
147+
<span title="Endless River" class="endless-river"> </span>
148+
</section>
149+
</div>
150+
<!--//theme-tray-->
151+
152+
<h3>2. Menubar Position</h3>
153+
<p> Choose the menubar position:</p>
154+
<ol>
155+
<li> <input type="radio" id="set-top" name="radio" checked/><label for="set-top"> Fixed on Top</label> </li>
156+
<li> <input type="radio" name="radio" id="set-st"/><label for="set-st"> Static</lable> </li>
157+
158+
</ol>
159+
160+
<h3>3. Menu Container Position </h3>
161+
<p> Choose the suitable position for menu container. </p>
162+
<select class="menu-position">
163+
<option> position-left </option>
164+
<option> position-right </option>
165+
</select>
166+
167+
<h2>Generated Script</h2>
168+
<p>
169+
Copy and paste it into document ready function.
170+
</p>
171+
<pre class="prettyprint">
172+
$(".menu-container").jSideMenu({
173+
<span class="j-pos">jSidePosition: "position-left",</span>
174+
<span class="j-sticky">jSideSticky: true, </span>
175+
<span class="j-skin">jSideSkin: "default-skin", </span>
176+
});
177+
</pre>
178+
179+
<h2> Browsers Compatability</h2>
180+
<p>Best view on Google Chrome, Firefox, Opera and UC Desktop Browser</p>
181+
182+
</article>
183+
</main>
184+
185+
186+
187+
<!-- jQuery -->
188+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
189+
<!--jSide Menu Js-->
190+
<script src="js/jquery.jside.menu.js"></script>
191+
<script>
192+
$(function(){
193+
$(".menu-container").jSideMenu({
194+
jSidePosition: "position-left", //possible options position-left or position-right
195+
jSideSticky: true, // menubar will be fixed on top, false to set static
196+
jSideSkin: "default-skin", // to apply custom skin, just put its name in this string
197+
});
198+
});
199+
</script>
200+
201+
202+
<!--DEMO ONLY FILES-->
203+
<!--Demo CSS-->
204+
<link rel="stylesheet" href="docs/demo-only.css" />
205+
<script src="docs/demo-only.js"></script>
206+
<footer class="credit">
207+
Coded with <span title="Coffee"></span> by Asif Mughal &copy; 2019 - <a href="https://www.codehim.com" rel="dofollow" title="Awesome Web Projects and Tutorials" target="_blank"> Codehim.com </a>
208+
</footer>
209+
</body>
210+
</html>

0 commit comments

Comments
 (0)