How To Make a Slide Out Navigation with HTML/CSS (No JavaScript)

Показать описание

Official site

Twitter

Рекомендации по теме

Комментарии

The beginning of this is great, but the end just takes it to the next level. This is crazy cool and I'll probably try something like this on an upcoming project.

samwebb

Would've been better if zoomed in...

geekybench

Wow, thank you... It has been a while since I've done any programming. I learned in Pascal and on the job I used Delphi, Basic, Hex, Forth and stuff like that. I was pretty good at HTML back in 2000. Mostly when ever I build my site I keep it real simple. Every once in a while I help one of my end users get a site started then they want a higher level of coding than I've been doing. So, it's time to start learning more web development stuff.

I read Laura Lemay and watch youtube videos. Your lessons are compact and direct. The sidebar menu is an element that I need for a project I have right now. I am going to check you out on Patreon, a number of people have been telling me that I should set up on there also.

jaigaines

Did it again. It's a smart way and avoiding JS, by a smart google-guy. Made a slide-down now for a -768px mobile screen hamburger menu. Responsive fancyyyy.. makes me happy!

roodjos

left -100px, SOOOO WHAT I WANTED!! I am using a fixed cover background, with the white body only going up to a certain width. So I wanted to be able to do a translucent sidebar, and this is something you totally cannot do with the 100% width method lol.

THANK YOU :D

JaseWolf

Wow, good stuff man. I made the sidebar full screen and used CSS instead of Sass. It took some fiddling to get working, but it looks good on mobile and desktop. Cheers again.

arinarjani

A fantastic tutorial. Clearly (not to mention charismatically) presented, as always. What would be involved in making the sidebar close automatically on selection of a menu item?

ssilverm

Thanks for this.. watched it originally back in May, but just finally had the time to go through your CSS series to be able to use this one. Already using it on a couple of projects. :)

Haladmer

These videos are so exciting! I can't wait till I get to the point where I can make this stuff up

stephenkbolton

Just thought I'd try this with the #sidebartoggler to create a page slide effect a bit like the Facebook app:

#sidebartoggler {
display: none; }
#sidebartoggler:checked + .page-wrap .toggle {
left: 200px; }
#sidebartoggler:checked + .page-wrap .page-content {
right: -200px; }
#sidebartoggler:checked + .page-wrap {
overflow: hidden; }

Worked a treat!

watchandlol

Hey +codecourse, I love your videos. But I think the screencast for this video you used a 4k or very high resolution displays (Mac or something).That looks sharp but doesn't appear clearly on my laptop, even in 1080p. The video of the speaker was nice but not the code. Please take care in coming videos.

himanshub

Just watched it to the very end. LOL that's some awesome coding!

NicholasBurgher

I've found it way easier to do the following:

Create a menu, create a wrapper. Wrap every content but the menu in it.
Then create two classes: 1 for the padding for the wrapper and 1 for the padding for the menu. Add the width of the menu as padding to the wrapper.

Whenever one clicks the bars, a negative padding will be added to the menu equal to it's width. Also a negative margin will be added to the wrapper resulting in: 1) The menu will dissapear due to a negative margin of it's own width. 2) The wrapper will fill fullscreen because it's margin - equal to menu's width - is being removed.
It just requires 2 additional classes with both 1 line and 2 lines of jQuery.

What are your thoughts on this :)?

Dannywage