Hay ..
Pada kesempatan kali ini saya membagikan sebuah tutorial mengenai cara membut side menu dengan jQuery ..
Untuk head nya seperti ini
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<title> ASEPIT.COM</title>
<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." />
<meta property="og:title" content="jSide Menu - jQuery Plugin" />
<meta property="og:image" content="https://codehimblog.github.io/jquery-jside-
menu/img/preview.jpg" />
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Questrial&display=swap"
rel="stylesheet">
<!--Material Design Iconic Font-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<!--jSide Menu CSS-->
<link rel="stylesheet" href="https://codehimblog.github.io/jquery-jside-
menu/css/jside-menu.css">
<!--jSide Skins-->
<link rel="stylesheet" href="https://codehimblog.github.io/jquery-jside-
menu/css/jside-skins.css">
</head>Untuk body nya
<body>
<!-- Start jside Menu -->
<menu class="menubar">
<menuitem>
<button class="menu-trigger"> <i class="material-icons">menu</i> </button>
</menuitem>
<menuitem class="logo" title="Your Logo Goes Here">
<a href="#1"><img src="https://codehimblog.github.io/jquery-jside-
menu/img/jside-menu.png" alt="jSide Menu" /> </a>
</menuitem>
</menu>
<div class="menu-body visibility">
<div class="menu-head">
<span class="layer">
<div class="col">
<div class="row for-pic">
<div class="profile-pic">
<img src="https://www.asepit.com/frontend/images/logo.png"
alt="ASEPIT.COM" />
</div>
</div>
<div class="row for-name">
<h3 title="User Name"> AsepIT </h3>
<span class="tagline"> Tutorial Menu</span>
</div>
</div> <!--//col-->
</span>
</div> <!--//menu-head-->
<nav class="menu-container">
<ul class="menu-items">
<li><a href="#1"> <i class="material-icons">widgets</i> Main item one
</a></li>
<li><a href="#1"> <i class="material-icons">bar_chart</i> Main item two
</a></li>
<li class="has-sub"> <span class="dropdown-heading"> <i class="material-
icons">collections</i> Item three with dropdown </span>
<ul>
<li> <a href="#2">dropdown sub item 1 </a> </li>
<li> <a href="#2"> dropdown sub item 2 </a> </li>
<li> <a href="#2"> dropdown sub item 3 </a> </li>
<li> <a href="#2"> dropdown sub item 4 </a> </li>
<li> <a href="#2"> dropdown sub item 5 </a> </li>
<li> <a href="#2"> dropdown sub item 6 </a> </li>
<li> <a href="#2"> dropdown sub item 7 </a> </li>
</ul>
</li>
<li class="has-sub"> <span class="dropdown-heading">
<i class="material-icons">camera</i> Item four with dropdown </span>
<ul>
<li> <a href="#2">sub item 1 </a> </li>
<li> <a href="#2">sub item 2 </a> </li>
<li> <a href="#2">sub item 3 </a> </li>
<li> <a href="#2">sub item 4 </a> </li>
</ul>
</li>
<li> <a href="#1"> <i class="material-icons">color_lens</i> Main item
four </a></li>
<li> <a href="#1"> <i class="material-icons">pie_chart</i> Main item
five </a></li>
<li> <a href="#1"> <i class="material-icons">highlight</i> Main item
five </a></li>
<li> <a href="#1"> <i class="material-icons">format_size</i> Main item
six </a></li>
</ul>
</nav>
</div>
<!--End jSide Menu-->
<!--Introduction and Demo Only -->
<header class="intro">
<h1>jQuery Responsive jSide Menu with Dropdowns</h1>
</header>
<main>
<article>
<h3> 1. jSide Menu Skin </h3>
<p> Choose the theme for the menu: </p>
<div class="theme-tray">
<section class="pl-color">
<h4> Plain Color</h4>
<span title="Love Red" class="red"> </span>
<span title="Clover Green" class="green"> </span>
<span title="Dodger Blue" class="blue"> </span>
<span title="Bright Neon Pink" class="bnp"> </span>
<span title="Pumpkin Orange" class="orange"> </span>
<span title="Black" class="black"> </span>
<span title="Neon Pink" class="pink"> </span>
<span title="Golden Brown" class="gol-b"> </span>
<span title="Greenish Blue" class="greenish"> </span>
<span title="Wood" class="wood"> </span>
</section>
<div style="margin:10px">
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7089100907045419"
data-ad-slot="7782420780"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<section class="gr-color">
<h4> Gradient Color</h4>
<span title="Flickr" class="flickr"> </span>
<span title="Facebook Messenger" class="fb-messenger"> </span>
<span title="Moonlit Asteroid" class="moonlit"> </span>
<span title="Park Life" class="park-life"> </span>
<span title="Dance to Forget" class="d2f"> </span>
<span title="Man of the Steel" class="steel-man"> </span>
<span title="Amethyst" class="amethyst"> </span>
<span title="Between the Clouds" class="between-clouds"> </span>
<span title="Crazy Orange"class="crazy-orange"> </span>
<span title="Endless River" class="endless-river"> </span>
</section>
</div>
<h3>2. Menubar Position</h3>
<p> Choose the menubar position:</p>
<ol>
<li> <input type="radio" id="set-top" name="radio" checked/><label for="set-
top"> Fixed on Top</label> </li>
<li> <input type="radio" name="radio" id="set-st"/><label for="set-st">
Static</lable> </li>
</ol>
</article>
</main>Untuk script nya
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--jSide Menu Js-->
<script src="https://codehimblog.github.io/jquery-jside-
menu/js/jquery.jside.menu.js">
</script>
<script>
$(function(){
$(".menu-container").jSideMenu({
jSidePosition: "position-left", //possible options position-left or position-
right
jSideSticky: true, // menubar will be fixed on top, false to set static
jSideSkin: "default-skin", // to apply custom skin, just put its name in this
string
});
});
</script>
<!--DEMO ONLY FILES-->
<!--Demo CSS-->
<link rel="stylesheet" href="https://codehimblog.github.io/jquery-jside-
menu/docs/demo-only.css" />
<script src="https://codehimblog.github.io/jquery-jside-menu/docs/demo-only.js"></script>
</body>
</html>Done !!!
Hasilnya seperti ini dibawah ini
Comments