How to create sidebar collapse in jquery?
Custom collapse sidebar: An example for sidebar collapsible
without bootstrap, means you can create a sidebar using jquery and CSS. Here
used methods are toggleClass() and removeClass(). For the CSS using
pseudo-elements as :after and :before.
You can get code below for the collapsible sidebar example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.menuContainer {
background: #eee;
position: fixed;
top: 0;
right: -260px;
padding: 20px;
height: 100%;
width: 150px;
transition: all 0.5s
}
.dropdownContainer {
display: none;
position: absolute;
background: #fff;
border-radius: 5px;
}
.dropdownContainer::before {
content: '';
border-top: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
left: 0;
right: 0;
margin: auto;
text-align: center;
width: 0;
top: -20px;
}
.dropdownContainer a {
display: block;
font-size: 14px;
color: #333;
padding: 8px 10px;
font-family: arial, sans-serif;
text-decoration: none;
}
.dropdownContainer a:hover {
background: #0bf;
color: #fff;
}
.dropdownContainer a:hover:nth-of-type(1) {
border-radius: 5px 5px 0 0;
}
.dropdownContainer a:hover:last-child {
border-radius: 0 0 5px 5px;
background: #0bf;
}
.showSS {
display: inline-block;
}
.showMenu {
display: inline-block;
right: 0px;
transition: all 0.5s;
z-index: 10000;
}
.menuWrapper {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.navClick {
position: relative;
cursor: pointer;
right: 200px;
float: right;
}
.mainMenu ul {
list-style: none;
padding: 0;
}
.mainMenu ul>li {
text-align: left;
}
.mainMenu ul>li>a {
color: #333;
padding: 15px 0;
display: block;
text-decoration: none;
transition: all 0.5;
font-family: arial, sans-serif;
font-size: 16px;
}
.mainMenu ul>li>a:hover {
color: #0bf;
transition: all 0.5;
}
.navClick .bar1,
.navClick .bar2,
.navClick .bar3 {
width: 30px;
height: 4px;
background: #0bf;
margin: 7px 0;
transition: 0.4s;
display: block;
}
.menuBack {
cursor: pointer;
padding: 0;
position: absolute;
right: 20px;
top: 10px;
}
.menuBack::after {
content: '';
width: 15px;
height: 15px;
border-right: 3px solid #333;
border-bottom: 3px solid #333;
position: absolute;
transform: rotate(-45deg);
right: 20px;
top: 20px;
}
.menuBack:hover::after {
border-right: 3px solid #0bf;
border-bottom: 3px solid #0bf;
}
.menuBack:hover {
color: #0bf;
}
.dropdowntoggleSS {
position: relative;
}
.dropdowntoggleSS::after {
content: '';
position: absolute;
border-left: 7px solid transparent;
border-top: 7px solid #333;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
width: 0;
margin-left: 6px;
top: 22px;
}
.dropdowntoggleSS:hover::after {
border-top: 7px solid #0bf;
}
</style>
</head>
<body>
<div class="navClick"><span class="bar1"></span><span class="bar2"></span><span class="bar3"></span></div>
<div class="menuWrap"></div>
<div class="menuContainer">
<div class="mainMenu">
<div class="menuBack"></div>
<ul>
<li><a href="https://www.anythinglearn.com/">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#" class="dropdowntoggleSS">Tutorial</a>
<div class="dropdownContainer">
<a href="#">HTML</a>
<a href="#">React</a>
<a href="#">Angular</a>
<a href="#">Latest Angular</a>
<a href="#">Javascript</a>
</div>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
$('.navClick').click(function () {
$('.menuContainer').toggleClass('showMenu');
$('.menuWrap').toggleClass('menuWrapper');
});
$('.menuWrap').click(function () {
$(this).removeClass('menuWrapper');
$('.menuContainer').removeClass('showMenu');
});
$('.menuBack').click(function () {
$('.menuWrap').removeClass('menuWrapper');
$('.menuContainer').removeClass('showMenu');
});
$('.dropdowntoggleSS').click(function () {
$('.dropdownContainer').toggleClass('showSS');
});
});
</script>
</body>
</html>
You will found result as given screenshot below:
No comments:
Note: Only a member of this blog may post a comment.