Learn how to create a animated sidebar menu with HTML, CSS and JavaScript. In this video we’ll walk you through step-by-step on how to add sidebar in websites/webpages.
Original source
Learn how to create a animated sidebar menu with HTML, CSS and JavaScript. In this video we’ll walk you through step-by-step on how to add sidebar in websites/webpages.
Original source
50 responses to “How to Create a Animated Sidebar Menu using HTML, CSS & JavaScript.”
nope !!!!
Hi, can you share source codes please?
Ha can u help me I getting this error
togglesidebar is defined but never used.[no-unused-vars]
woooh finally i code for 2 hours lol
Super awesome, cool, and concise
Send our code bro sirigireddyr44@gmail.com
It's 2:00 am and you saved my project and my life, thank u! ;^; <3
Here you guys go, here is the correct code:
<style>
*{
margin: 0px;
padding: 0;
font-family: sans-serif;
}
#sidebar {
position: fixed;
width: 25%;
height: 100%;
background: #151719;
left: -25%;
transition: all 500ms linear;
}
#sidebar.active {
left: 0px;
}
#sidebar ul li {
color: White;
list-style:none;
padding: 15px 10px;
border-bottom: 1px solid rgba(100,100,100,0.3);
}
#sidebar .toggle-btn {
position: absolute;
Left: 400px;
top: 20px;
}
#sidebar .toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #151719;
margin: 5px 0px;
}
</style>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<script>
function toggleSidebar(){
document.getElementById("sidebar").classList.toggle('active');
}
</script>
working code here :
<!DOCTYPE html>
<html>
<head>
<title>Hide/show menu</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
#sidebar{
position: fixed;
width: 200px;
height: 100%;
background: #151719;
left: -200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li{
color: rgba(230,230,230,0.9);
list-style: none;
padding: 15px 10px;
border-bottom: 1px solid rgba(100,100,100,0.3);
}
#sidebar .toggle-btn{
position: absolute;
left: 230px;
top: 20px;
}
#sidebar .toggle-btn span{
display: block;
width: 30px;
height: 5px;
background: #151719;
margin: 5px 0px;
}
</style>
<script type="text/javascript">
function toggleSidebar(){
document.getElementById("sidebar").classList.toggle('active');
}
</script>
</head>
<body>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()"><a>
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul>
<li>Explore</li>
<li>Sell</li>
<li>Buy</li>
</ul>
</div>
</body>
</html>
Bro loved your work can you just make a short video on Youtube side bar mechanics im new to java and want to learn that youtube side bar
CHUCHA VENDES HUMO RECONCHAUMTARE
videonya yelas banget coba dosen saya mengajar kaya gini saya tidak susah deh…..
thanks, it's work!! This is my practice code, help u self.
https://lihi.cc/851s9
cool tutorial bro i appreciate to learn from you
im using Visual studo code but my JS wont link to my html
I'm so grateful I want to suck your Mexican 🍖 meat
add the link of the code man
thank you for the tutorial. does any one know if we can implement this into a SharePoint page ?
I have wanted to make the same menu, but on the right side, so instead of "left", I added "right". But somehow, on my web page there only list of the menu is visible, nothing more (I mean that css and js function does not work) :/ could someone advise what to do?
sir can you help me? how to appear the content of the link in the right side if i click the nav?
the javascript in sublime won't work
nice
nice
It doesn't work to me :/
Where to get this code
in java script the classlist.toggle('active') where is no identity html or css where is it come from toggle
big thanks
Awesome tutorial bro !!!
Give me your whatsapp number
good video
Hey, can you help me please? I have a problem with hamburger button.once I clicked it, it jist vanished and didnt see the menu bar also. I have code the exact code what you code here
Nice bro jhakkas..luved it..simple and effective..👌👏
for your kind information i'm the web devloper so you need to show full html code for new students cause new students can be confused
What do u do when ur site is responsive ?
Thank u so much.
if we want to swipe to show/hide the navigation menu, how do we do that? using touch event…..
is this responsive on mobile?
which editor is used??
Look this code i think is good :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
Very nice explanation
Short and sweet
Thanks, man. This past 3 years I always do my assignment in Java and designing GUI was never been an issue. Then I tried CSS and I hate it on the first sight. Turns out I just need more time to 'get' how it works because its very different from FXML (JavaFX way of defining UI, based on XML).
bro can u help me this js part is not working
here is the code
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
#sidebar{
background-color: rgba(0,0,0,.5);
width:200px;
height:100%;
position: fixed;
left:-200px;
}
#sidebar ul li{
color:rgba(230,230,230,0.9);
list-style-type: none;
padding: 15px 30px;
border-bottom: 1px solid rgba(100,100,100,0.3);
}
#sidebar .toggle-btn{
position: absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span{
display: block;
width:30px;
height:5px;
background:red;
margin: 5px 0px;
}
#slidebar.active{
left:0px;
}
</style>
</head>
<body>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
function toggleSidebar(){
document.getElementById("sidebar").classList.toggle('active');
}
</script>
</body>
</html>
Awesome bro please do upload this kind of stuff which web application layouts like topnav,sidenav and content page.
Thanks it works perfectly
VERYYYYYY GOOOD THANKS MANNNNNNNNN
Hi my sidebar is long, it's not showing all links. how can i show my all links.
didn't work:"(
i think i already following all the code and the menu list still not open when i click the hamburger menu:""""
fuck you stupid no why u past in descritpion bitch hoe
https://jsbin.com/pijoleziwo/1/edit?html,css,js,output Thank You for this video its not working for me, but i see for lots it did work! So i guess its something im doing wrong, can you please check my code the link is on js Bin, or i can copy and paste here THANK YOU AGAIN!
Thanks