Slide Out Navigation | HTML, CSS & JavaScript

This Tutorial Gives You The Basic Idea How You Can Create Your Own Custom Sliding Navigation By Writing Only Couple Of Lines JavaScript Code !!
--------------- Social Media ---------------
Facebook : / codegridweb
Instagram : / codegridweb
Twitter : / codegridweb
Thank You For Watching !
Music :
LAIRE - Final Coming : • [Chillstep] LAIRE - Fi...
Credits :
LAIRE :
/ laire
/ laire_music
/ lairemusic

[@braien8158]

Thanks! I was searching for tutorials of it and all the others were too complicated and would need bigger changes on my css. Keep doing your great work!

[@brandonikjoo]

Thanks a lot for the post. Your posts are very helpful!

[@nomdplume6166]

Excellent video. Thanks for the consistently great work.

[@codegrid]

Thanks bro!

[@majedbrinki]

workedd thanks dude

[@jahongirbektemirov6516]

Thanks a lot. I found it.

[@slr4456]

So if I want to put a picture as the three bar menu instead, I just define the width and height of the btn-toggle and set the image as a background-image on css?

[@Mitchyugan]

Nice short and simple 👏

[@enginsama]

Many thanks

[@ArtOfFun]

*Thx for link in description!*
Yes...

[@techblog1491]

Codes:

* {
margin: 0px;
padding: 0px;
}
#sidebar {
position: absolute;
width: 300px;
height: 100%;
background: #000;
left: -300px;
transition: .4s;
}
#sidebar ul li {
list-style: none;
color: #fff;
font-size: 20px;
padding: 26px 24px;
}
#sidebar .toggle-btn {
position: absolute;
top: 30px;
left: 330px;
}
.toggle-btn span {
width: 45px;
height: 4px;
background: #000;
display: block;
margin-top: 4px;
}
#sidebar.active {
left: 0;
}





Home
Work
About
Contact

function show() {
document.getElementById('sidebar').classList.toggle('active');
}

[@sushmitabasumatary57]

thanks for saving my time dude💗

[@tankerone8090]

What is the problem when it saids show is not defined

[@NoorpreetBrar]

Run nhi ho rhi notepad++ sr

[@darkagent9457]

Try this, it is the fixed version:


* {
margin: 0px;
padding: 0px;
}

#sidebar {
position: absolute;
width: 300px;
height: 100%;
background: #000;
left: -300px;
transition: .4s;
}

#sidebar ul li {
list-style: none;
color: #fff;
font-size: 20px;
padding: 26px 24px;
}

#sidebar .toggle-btn {
position: absolute;
top: 30px;
left: 330px;
}

.toggle-btn span {
width: 45px;
height: 4px;
background: #000;
display: block;
margin-top: 4px;
}

#sidebar.active {
left: 0;
}











Home
Work
About
Contact



function show() {
document.getElementById('sidebar').classList.toggle('active');
}


*Not to take his credits*

[@jayraldp.arquisola2034]

thanks man

[@westfield90]

Brilliant

[@adityakalra768]

Very nice video but which IDE are you using here

[@7073shea]

Thank you!

[@adeola.]

Thanks 😊

[@OMARALI-fs2nw]

Thanks

[@scholarsedigh362]

Nice👌

[@itsmeanyway]

great video bruh

[@atultechnologyskills2631]

Which IDE you used?

[@moritzpfeffer9290]

is it possible that the button to 'extend out' remains in the same place?

[@eraze4137]

My JS won't work, do I need another package than "script" (atom)

[@nirajdeshmukh7514]

But what about when we scroll the body? wouldn't menu will stick position? we need follow menu div while we scroll on view.

[@rahulgaik999]

Tnx

[@duxteh2]

code doesnt work, the button thingy wont open my slide menu, ive written everything as it is and TRIPPLE checked EVERYTHING. idk whats up but if anyone can help lmk

[@awszr]

it works but the scroll bar never hides . the whole block goes to the side and the scrollbar appears what to do?

[@pss6141]

Really! did you can find out how hides it?

[@user-sl5ft9md3m]

Change the Following
on the #sidebar, change position to *position:fixed;* and add a line * overflow-x:hidden; *
on the #sidebar.active add a line *position:absolute*
This is a fix on the current code but there are more efficient ways to create menus like this

[@Home_films_]

my sidebar come only when i press it. how i can solve tis problem?

[@zeeshhashmi6795]

Can't be download. ...
M a Student and can't afford net.. 😕
But you. ...😥
. Can't understand...

[@twitchplus3593]

code me dont working

[@thehuman6932]

Why ain't my js working

[@twitchplus3593]

yes me to

[@goldenstar8910]

add this below head tag

[@daudwaqas3550]

I want to find a video where it comes from the TOP of the screen

[@GeckoMemory]

Hey I am also looking for an example of a vertical slide menu. Did you already found a solution?

[@Digital963]

You can do it this code just change the transform property accordingly. Also here’s a piece of advice - if you want to get good at this don’t just copy code. Once you complete tutorial project mess around with it and make it how you want it. It’s the only way you’ll get good using this format. YW

[@utsavpoudel2021]

three dots is not showing . what to do????

[@freedomgabriel]

Same here also

[@lyndonjc9677]

@@freedomgabriel It will probably be your class & ID element in html. It needs to be id for the sidebar and class for the toggle-btn

[@gamershub4310]

pls use human frndly music and volume also

[@codegrid]

Noo

[@psilocybin-]

@@codegrid xD

[@mikeee2139]

@@codegrid chad

[@RealRyan95]

How come my's not workiing dude there is something missing?

[@techsauce2706]

🙄

[@marimbayavatsonga]

Thanks