INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<title>Responsive Side Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link rel="stylesheet" href="css/side-menu.css" />
</head>
<body>
<menu class="menubar">
<menuitem>
<button class="menu-trigger"><i class="material-icons">menu</i></button>
</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="img/user.jpg" alt="Atech Seva" />
</div>
</div>
<div class="row for-name">
<h3 title="User Name">Your Name</h3>
<span class="tagline"> Web Developer</span>
</div>
</div>
</span>
</div>
<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">widgets</i> Main item two
</a>
</li>
<li class="has-sub">
<span class="dropdown-heading">
<i class="material-icons">widgets</i> Item three with dropdown
</span>
<ul>
<li><a href="javascript:void(0)">dropdown sub item 1 </a></li>
<li><a href="javascript:void(0)"> dropdown sub item 2 </a></li>
<li><a href="javascript:void(0)"> dropdown sub item 3 </a></li>
</ul>
</li>
<li class="has-sub">
<span class="dropdown-heading">
<i class="material-icons">widgets</i> Item four with dropdown
</span>
<ul>
<li><a href="javascript:void(0)">sub item 1 </a></li>
<li><a href="javascript:void(0)">sub item 2 </a></li>
<li><a href="javascript:void(0)">sub item 3 </a></li>
<li><a href="javascript:void(0)">sub item 4 </a></li>
</ul>
</li>
<li>
<a href="#1">
<i class="material-icons">widgets</i> Main item four
</a>
</li>
<li>
<a href="#1">
<i class="material-icons">widgets</i> Main item five
</a>
</li>
<li>
<a href="#1">
<i class="material-icons">widgets</i> Main item five
</a>
</li>
<li>
<a href="#1">
<i class="material-icons">widgets</i> Main item six
</a>
</li>
</ul>
</nav>
</div>
<script src="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>
<link rel="stylesheet" href="css/style.css" />
<script src="js/side-menu.js"></script>
</body>
</html>
STYLE.CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*{ margin: 0; padding: 0;}
body{
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 300;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 15px;
background: #eee;
}
.intro{
background: #ddd;
padding: 60px 30px;
color: #333;
margin-bottom: 15px;
line-height: 1.5;
text-align: center;
}
.intro h1 {
font-size: 18pt;
}
.intro p{
font-size: 14px;
}
.action{
text-align: center;
display: block;
margin-top: 20px;
}
a.btn {
text-decoration: none;
color: #666;
border: 2px solid #666;
padding: 10px 15px;
display: inline-block;
margin-left: 5px;
}
a.btn:hover{
background: #666;
color: #fff;
transition: .3s;
-webkit-transition: .3s;
}
.github:before,
.down:before{
font-family: FontAwesome;
font-weight: normal;
margin-right: 10px;
}
.github:before{content: "\f09b"}
.down:before{content: "\f019"}
.credit{
background: #fff;
padding: 12px;
font-size: 9pt;
text-align: center;
color: #333;
margin-top: 40px;
}
.credit span:before{
font-family: FontAwesome;
color: #e41b17;
content: "\f004";
}
.credit a{
color: #333;
text-decoration: none;
}
.credit a:hover{
color: #e41b17;
}
.credit a:hover:after{
font-family: FontAwesome;
content: "\f08e";
font-size: 9pt;
position: absolute;
margin: 3px;
}
main{
background: #fff;
margin: 20px;
}
article li{
color: #444;
font-size: 15px;
margin-left: 33px;
line-height: 1.5;
padding: 5px;
}
article h1,
article h2,
article h3,
article p{
padding: 10px;
color: #333;
}
article p{
font-size: 15px;
line-height: 1.5;
}
@media only screen and (min-width: 720px){
main{
width: 720px;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
margin-left: auto;
margin-right: auto;
background: #f9f9f9;
}
}
.set-overlayer,
.set-glass,
.set-sticky {
cursor: pointer;
height: 45px;
line-height: 45px;
padding: 0 15px;
color: #333;
font-size: 16px;
}
.set-overlayer:after,
.set-glass:after,
.to-active:after,
.set-sticky:after {
font-family: FontAwesome;
font-size: 18pt;
position: relative;
float: right;
}
.set-overlayer:after,
.set-glass:after,
.set-sticky:after {
content: "\f204";
transition: .6s;
}
.to-active:after {
content: "\f205";
color: #008080;
transition: .6s;
}
.set-overlayer,
.set-glass,
.set-sticky,
.source,
.theme-tray {
margin: 10px;
background: #f2f2f2;
border-radius: 5px;
border: 2px solid #f1f1f1;
box-sizing: border-box;
}
/* Syntax Highlighter*/
pre.prettyprint {
padding: 10px;
margin: 10px;
border: 0;
background: #f2f2f2;
overflow: auto;
}
.source {
white-space: pre;
overflow: auto;
max-height: 400px;
}
.theme-tray {
overflow: hidden;
background: #fff;
}
.theme-tray span {
border: 1px solid #f2f2f2;
width: 50px;
height: 50px;
display: inline-block;
border-radius: 4px;
cursor: pointer;
}
.pl-color,
.gr-color {
text-align: center;
}
.gr-color h4,
.pl-color h4 {
background: #f2f2f2;
padding: 10px;
margin-bottom: 6px;
color: #333;
}
.mesg{
margin: 10px;
background: #fff;
color: #347C2C;
padding: 15px;
border-radius: 4px;
animation: bounceIn 1s forwards;
z-index: 98;
display: none;
position: relative;
text-align: center;
}
code{
border:1px solid #ddd;
padding: 2px;
border-radius: 2px;
}
SIDE-MENU.CSS
:root {
--skin-hover: rgba(0, 0, 0, 0.1);
--skin-color: rgba(255, 255, 255, 0.7);
}
.default-skin {
font-weight: 300;
font-size: 14px;
font-smooth: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--skin: #486695;
--skin-hover: #d3af4b;
--skin-color: rgba(255, 255, 255, 0.8);
}
.light-skin {
--skin: #f0f0f0;
--skin-hover: #ddd;
--skin-color: #232323;
}
.menu-body.visibility {
visibility: hidden;
}
.menubar {
width: 100%;
height: 48px;
display: block;
background: var(--skin);
color: var(--skin-color);
line-height: 48px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
.menu-trigger {
position: absolute;
-webkit-appearance: none;
border: 0;
outline: 0;
background: transparent;
top: 10px;
padding: 0 5px;
color: var(--skin-color);
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
}
.menu-trigger:hover {
opacity: 0.8;
-webkit-opacity: 0.8;
}
.menu-trigger.left {
left: 20px;
}
.menu-trigger.right {
right: 20px;
}
.sticky {
position: fixed;
top: 0;
left: 0;
}
.menu-container {
font-family: "Questrial", sans-serif;
overflow: auto;
display: block;
top: 120px;
}
.menu-container::-webkit-scrollbar {
width: 4px;
}
.menu-container::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.2);
}
.menu-container::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.11);
}
.menu-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.position-left {
left: -270px;
}
.position-right {
right: -270px;
}
.position-left.open {
left: 0;
}
.position-right.open {
right: 0;
}
.menu-container,
.menu-head,
.menu-left,
.menu-left.open .menu-right,
.menu-right.open {
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
}
.menu-container,
.menu-head {
background: var(--skin);
position: fixed;
z-index: 1000;
width: 270px;
}
.menu-head .layer {
background: rgba(0, 0, 0, 0.2);
display: block;
padding: 15px;
}
.menu-head {
height: 120px;
box-sizing: border-box;
margin: 0px;
top: 0;
}
.menu-items {
list-style: none;
font-size: 14px;
}
.dropdown-heading,
.menu-items li a {
text-decoration: none;
padding: 10px;
display: block;
color: var(--skin-color);
border-bottom: 1px dotted rgba(255, 255, 255, 0.05);
margin: 0;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
text-transform: capitalize;
}
/* Icon Style */
.menu-items li i {
font-size: 16px;
margin-right: 10px;
}
.dropdown-heading {
-webkit-tap-highlight-color: transparent;
}
.dropdown-heading:hover,
.menu-items li a:hover {
background: var(--skin-hover);
}
@keyframes fadeIn {
from {
opacity: 0;
-webkit-opacity: 0;
}
to {
opacity: 1;
-webkit-opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
-webkit-opacity: 0;
}
to {
opacity: 1;
-webkit-opacity: 1;
}
}
/* Dropdowns */
.has-sub ul {
list-style: none;
overflow: hidden;
display: none;
background: #ddeaffcf;
text-transform: capitalize;
}
.has-sub ul li a {
display: block;
padding: 12px 33px;
border-bottom: 0;
font-size: 13px;
color: #444;
transition: 0.1s;
-webkit-transition: 0.1s;
border-bottom: 1px dotted #e1e1e1;
}
.has-sub ul li a:hover {
background: #dedede;
transition: 0.1s;
-webkit-transition: 0.1s;
}
.has-sub span {
display: block;
box-sizing: border-box;
}
.has-sub i.d-arrow {
float: right;
margin-right: 10px;
transition: 0.36s;
font-size: 16px;
}
.has-sub .d-arrow.d-down {
transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transition: 0.36s;
-webkit-transition: 0.36s;
-moz-transition: 0.36s;
}
.col {
display: table;
}
.row {
display: table-cell;
}
.for-name {
max-width: 140px;
padding: 10px;
color: var(--skin-color);
}
.for-pic {
max-width: 70px;
}
.profile-pic img {
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.01);
object-fit: cover;
}
.menu-head h3 {
top: -35px;
font-size: 13pt;
font-weight: 400;
}
.tagline,
.menu-head h3 {
display: block;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tagline {
font-size: 11px;
bottom: 32px;
display: block;
}
/* Dim background effect */
.dim-overlay {
display: none;
}
.dim-overlay:before {
content: "";
background-color: rgb(58 82 119 / 27%);
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
z-index: 2;
}
.logo {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 22px;
}
.logo img {
width: 130px;
margin-top: 10px;
height: auto;
}
.logo a {
text-decoration: none;
color: var(--skin-color);
}
.logo a:hover {
color: var(--skin-hover);
}
MAIN.JS
SIDE-MENU.JS
(function ($) {
$.fn.jSideMenu = function (options) {
var setting = $.extend(
{
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
jSideTransition: 400, //Define the transition duration in milliseconds
},
options
);
return this.each(function () {
var jSide, target, headHeight, devHeight, arrow, dimBackground;
target = $(this);
//Accessing DOM
jSide = $(".menu-container, .menu-head");
devHeight = $(window).height();
headHeight = $(".menu-head").height();
dHeading = $(".dropdown-heading");
menuTrigger = $(".menu-trigger");
arrow = $("<i></i>");
dimBackground = $("<div>");
// Set the height of side menu according to the available height of device
$(target).css({
height: devHeight - headHeight,
});
if (setting.jSideSticky == true) {
$(".menubar").addClass("sticky");
} else {
$(".menubar").removeClass("sticky");
}
$(".menubar").addClass(setting.jSideSkin);
$(jSide).addClass(setting.jSideSkin).addClass(setting.jSidePosition);
if ($(jSide).hasClass("position-left")) {
$(".menu-trigger").addClass("left").removeClass("right");
} else {
$(".menu-trigger").removeClass("left").addClass("right");
}
//Dropdown Arrow
$(arrow)
.addClass("material-icons d-arrow")
.html("keyboard_arrow_down")
.appendTo(dHeading);
//Dim Layer
$(dimBackground).addClass("dim-overlay").appendTo("body");
//Dropdowns
$(dHeading).click(function () {
$(this).parent().find("ul").slideToggle(setting.jSideTransition);
$(this).find(".d-arrow").toggleClass("d-down");
});
$(menuTrigger).click(function () {
$(jSide).toggleClass("open");
$(dimBackground).show(setting.jSideTransition);
$(".menu-body").removeClass("visibility");
});
//close menu if user click outside of it
$(window).click(function (e) {
if ($(e.target).closest(".menu-trigger").length) {
return;
}
if ($(e.target).closest(jSide).length) {
return;
}
$(jSide).removeClass("open");
if (!$(jSide).hasClass("open")) {
$(dimBackground).hide(setting.jSideTransition);
}
$(".menu-body").addClass("visibility");
});
});
};
})(jQuery);
