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.
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!
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.
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
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.
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!
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 :)?
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?
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.
Because this leads him to use position instead of transform, which is bad and for small stuff like this it's just unnecessary. If he uses plain CSS it's even easier to adopt in other projects, when they use another transpiler.
Brilliant tutorial, hats of you dear. Kindly teach pure css not sass or less, i was just following your steps with CSS, u were added sass in between your video, I was stacked in that section, couldnt follow further. kindly add video with pure CSS. Kindly add html file in your website to refer the code.
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. :)
wow! Glad I watched this one! I'll use it on an architectal site, happens to be my brother ;-) I hope he 'll buy it, cause he thinks he is a designer all over ... It's so pure css, i'm impressed. hey-hey, how cool is that ;-)
This looks like something I can us for a mobile/tablet site I'm working. However my nav menu has sub menus. Any idea how I can include them using this method?
Nice video. I like how you make it entertaining and useful. I wasn't bored once during the whole 28 minutes. I also feel smart for having already created a drop down menu using the checkbox approach. Anyway i look forward to the rest of your videos.
I had to travel allll the way from DevTips over here just to find your video Travis ;D. Awesome video man! I am thinking that maybe I will try this so that when a label is clicked the content (I'm thinking a calendar) will slide out from underneath it. Wish me luck!
Thanks RAWKNtoni Hope the trip was worth it! Good luck on your experiment, that's the whole idea: take something we discussed into a whole new direction! Awesome. While you are here (on the phpAcademy channel) take a look around. Alex (The guy who runs this channel) is awesome and has a ton of great videos. Be sure to sub!
Hello, can I ask which software do u use that when u save a css the browser doesn't all refresh but it animates the new css ( for example in 7:25) thank you.
Hey man, its a great video it seems quite easy. I am new in this field and know css and html to quite an extent but have completely no idea about "bourbon", kindly put a tutorial on how to set up Bourbon on windows!
I have managed to do this and get the sidebar to work. Only think is, is that the whole page outside of the side bar checks the box. how do I fix this?
i thought the :checked class could only be used on Opera. That's what W3schools says. But MDN says it's been supported for a while so i'm really confused. help please!
Hey Travis noticed your last videos have been recorded on full resolution, please consider increasing the font size on you text editor, since it's pretty hard to read on the newer videos, thanks a lot for the content and keep on hacking from Colombia!
This was really cool, Travis. And with jade I can make this html snippet as an include. Way cool. Thank you for the bonus clip at the end credits like a Marvel Movie. Keep hacking!
hi was successful with making the side out navigation but i noticed that when i added javscript to the page for the menu the toggle stopped working do you know how i can prevent this problem. thanks looking forward to your response
Great video. Love your entertaining teaching style. Only one recommendation, please make your code larger. It's really hard to see. Thanks! I've subscribed to your channel. :)
I know this is old, anyway thanks a lot for the tutorial, was very helpful even tho I had to put up with your sass especially in the last section when you're doing the easy sass thing with indents, I was like where the fuck do I put my brackets now xD, but after a while of itching and stitching I finally got it together and it's great, love the pure css menu! Thanks for sharing again, very much appreciated. Keep it up T!
great video but its 2017 is this still the best way to do it or simple jquery is better because i always like css over jquery and i dont know if im right hehe also i got a wrapper which inside has a container then a header and a header-inner div should i put my toggle haburger menu inside the header or just like in the video bc things look a lil crazy for me for some reason
One criticism i have is to zoom/crop into the area of where you're designing only a certain place of a website..I really couldn't see what the menu look liked when you added it and what antialiased did to the font. You really don't need to show the whole site.. only after you competed the initial task.
Hey up… excellent work on the tuts. I can't believe I've only just found you! I've been looking for months for something like this! I ended up using a jQuery version which caused all sorts of clashes with other jQuery driven content such as a slideshow and maps, but I got there in the end. Then I go and find this which is just awesome. Anyways, you're using SASS, but I have just started out with LESS, can this be used with LESS? Essentially they're the same, right?
I loved this tutorial, I learned a lot! I did have a question though. I am creating a nav menu for a mobile device and I have not just 1, but 2 menus that I need to slide in and out. I tried just duplicating everything and giving them different id names. The only problem is that the only checkbox that will work is the one that is listed last in my html. Can you have more than one of these in an html doc? Thanks for any help in advance!
Hi, do you have any tutorial on how to create buttons that perform a scroll down to a specific part of the page? I want to click a button and it goes down to a specific part and not opening another page, but I can´t seem to find tutorials for that. Cheers and thanks
+Jorge Marques Here is an example of what you are asking for: Just replace your buttons tag with the second one above. Put the tag wherever you want to assign the jump location.
Good video, suprised to see you here at PHP. Congrats. Presentation GREAT! as usual. Font size kinda small for my old eyes. Music ok, not distracting like a lot of youtubes. So thanks, hope this does not slow DevTips. bob
Nice :) I like your delivery, nice tutorial. I'll be looking through your tut's later looking for some good tips. I'm always looking at speeding up the loading time so any tips on that would be great, especially image loading time.
Performance is always a big deal. My tip on that would be to just use less images. And the ones you do use, optimize as much as you can. Thanks for the comment man!
DevTips ***** I am so so so happy right now. Its only been a while i started to watch your tutorials and I cant believe how ideas already starting to trigger in my mind. Thank you guys. Love you. You guys are aaawwwwwesome. I am super excited to share a sidebar that i created and also the solution to my 1 week older question. (pure css) jsfiddle.net/jdb4umqh/7/embedded/result/
Arindam Chakraborty just make=== .toogler:checked { left: (your sidebar width); top:0px;bottom: 0px;right: 0px;background:(you can add come color here if you want);} It will stretch it to full width and height.
"I like that, it makes me happy!" eheheh.. I loved that! Thank you very much for the awesome tutorial and for the useful links I didn't know about xD Keep up the great work and I hope to see you again soon ^__^
This is a really nice solution, however, as I don't use SASS or SCSS, I'm having trouble getting the CSS code exactly right because you don't show the actual generated CSS - too many assumptions here! Specifically, from 17:40 you say 'in the case of the side bar toggler being checked, look at it's sibling"…. but how do you do that in normal css? everything up to there I've managed to replicate, so would be great if you can explain this. many thanks
The Sibling selector would be the same in Sass and CSS. it would be #sidebartoggler:hover + .page-wrap I have put the source code on a github repo for you to reference the sass + css: github.com/DevTips/HTML-and-CSS-slide-out-navigation good luck!
DevTips Thanks. I did some googling after my comment and managed to find out how to get it working. I hadn't been aware of the + selector, in fact this made me look at selectors all over again so I did learn a lot all thanks to this video. However, I think it would still be better if you did these videos zoomed more on the code so we can actually see it without having to load up the 1080p option, and also with standard CSS so those of us who don't use Sass can follow more easily. Of course that's your call and I find your videos very interesting and helpful anyway, but I'd hazard a guess it would appeal to a wider audience if more people can follow without confusion. In any case, keep the good work coming, I enjoyed this video and have sub'd to your own channel. Something I'd like to see in future is a pure HTML/CSS simpe paralax tutorial, one that follows scrolling the page up/down rather than on a auto animate as many seem to be.
Cool arumdevil! Thanks for subscribing. The videos I make from now on will have better readability, it's a work in progress. But I can't say that I wont be using sass. It's just to prevalent. Working in the industry you will see that it's a reality. So if some people are pushed to go learn a bit about it as a result of these videos, I'd say that's a positive thing. Thanks for your comment!
DevTips Well I do agree, however I also think that it's best to learn the raw code in order to understand things better, then by all means use other tools to make the coding process more efficient. It just seems to add an extra layer of obscurity between the video and those watchers who don't use such tools. Of course it's your decision whether that's a reasonable trade-off or not and I'm sure your videos will continue to be useful regardless, just bear it in mind and monitor feedback.
![[DOKKAN BATTLE] Worldwide Campaign Announcement Video Part 2!](http://i.ytimg.com/vi/JpT5Voak6WA/mqdefault.jpg)
Would've been better if zoomed in...
Copy that, Future vids will be zoomed, thanks!
attach please the original link
+Elliot Hindman Check out the GitHub Repo for the code: github.com/DevTips/HTML-and-CSS-slide-out-navigation
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.
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!
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.
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
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.
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!
Love the way video is recorded.
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 :)?
Sorry, but please zoom in next time. The only way for me to see your code is if I fullscreen and I can't multitask well in fullscreen.
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?
Who else likes the Ubuntu font? I LOVE it!
me! :D
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.
Can this be done with Dreamweaver CSS instead of Sass.
Coz i tried doing it but my slide bar is not being shown.
the toggle appears though?
Added to favorites.
@DevTips, you're my new css Guru
Just watched it to the very end. LOL that's some awesome coding!
that was some slick css trickery! I really liked this approach of doing things.. clever thinking right there!
You are so good at teaching. I love your style, you make learning fun.
could you do one tutorial WITHOUT the sass/scss thing...pls??
why? its easy to install.
Because this leads him to use position instead of transform, which is bad and for small stuff like this it's just unnecessary.
If he uses plain CSS it's even easier to adopt in other projects, when they use another transpiler.
Because some people are not as clever as you. You little shit.
These videos are so exciting! I can't wait till I get to the point where I can make this stuff up
Brilliant tutorial, hats of you dear. Kindly teach pure css not sass or less, i was just following your steps with CSS, u were added sass in between your video, I was stacked in that section, couldnt follow further. kindly add video with pure CSS. Kindly add html file in your website to refer the code.
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. :)
Sooo Coool++ the best option I have seen so far
It would be awesome if you do a slide out navigation tutorial using original CSS version not SASS. SASS is cool!. Thanks
You can see the output css here: github.com/DevTips/HTML-and-CSS-slide-out-navigation/blob/master/css/sidebar-style.css
Thank You Travis. I've already nailed it.
ruclips.net/video/uyT3NSHhke8/видео.html
I think I need to learn SASS fast.
Thank You
oh! Look at that!
Cheers!
wow! Glad I watched this one! I'll use it on an architectal site, happens to be my brother ;-) I hope he 'll buy it, cause he thinks he is a designer all over ...
It's so pure css, i'm impressed. hey-hey, how cool is that ;-)
Does the sidebar need to go at the bottom of the page-wrap??? or could it just be the first thing under it??
This looks like something I can us for a mobile/tablet site I'm working. However my nav menu has sub menus. Any idea how I can include them using this method?
You are a piece of Pure Awesomeness!
they should make an ascii grafity of you somewhere, oneday!
Peace!
Hey, can't see the code. can't you zoom in so we can see the code you're writing? and there's no link in the description too.
Nice video. I like how you make it entertaining and useful. I wasn't bored once during the whole 28 minutes. I also feel smart for having already created a drop down menu using the checkbox approach. Anyway i look forward to the rest of your videos.
Wow, I didn't come up with this technique, I'm not that smart. I found it on my internet journeys somewhere along the way...
devtip video is such a amazing thing to under stand to anything like html css php etc
Is the code available somewhere? The fonts are too small on the video ...
Totally going to apply this to my photography page. It will be a while though.
Thank you for being the best one to explain this amazing and diverse way of styling!
How To Make a Slide Out Navigation with HTML/CSS (No JavaScript)
I had to travel allll the way from DevTips over here just to find your video Travis ;D. Awesome video man! I am thinking that maybe I will try this so that when a label is clicked the content (I'm thinking a calendar) will slide out from underneath it. Wish me luck!
Thanks RAWKNtoni Hope the trip was worth it! Good luck on your experiment, that's the whole idea: take something we discussed into a whole new direction! Awesome.
While you are here (on the phpAcademy channel) take a look around. Alex (The guy who runs this channel) is awesome and has a ton of great videos. Be sure to sub!
Also, it would be great to have the code shared on some website like jsbin or jsfiddle where we can tinker and learn more with the code.
Nice video, learnt a new concept about using pseudo with checkbox and label!
Thanks Lakaf Lee , I'm glad you liked it!!
Hello, can I ask which software do u use that when u save a css the browser doesn't all refresh but it animates the new css ( for example in 7:25) thank you.
+Johny Manuelli browser-sync
Hi Travis,
Thanks for another great video.
I just have one question, is there a possibility to make the menu slide out from the right side?
Background music was freaking me out :o
Pretty smart with the checkbox :D
lol, freaking you out? It was scary? That's hilarious. Thanks for watching ... and listening.
No problem, it was more like.. annoying me, yeah.. my English isn't the best sorry :s
awww, sorry to annoy.. :(
so i tried to make this on my website but its not work. it toggles but doesnt do anything. any help?
Hey man, its a great video it seems quite easy. I am new in this field and know css and html to quite an extent but have completely no idea about "bourbon", kindly put a tutorial on how to set up Bourbon on windows!
I have managed to do this and get the sidebar to work. Only think is, is that the whole page outside of the side bar checks the box. how do I fix this?
+Jamie Catalog same here! :/
+Jamie Catibog add the following to your .toggle class-
width: 0px
height: 0px
Thanks +allwyn
i thought the :checked class could only be used on Opera. That's what W3schools says. But MDN says it's been supported for a while so i'm really confused. help please!
MDN > W3Schools
I was using chrome in the video, so it's not just opera. I think its only lower than IE9 that will have issues.
Hey, is there anyway once you make the navigation list items into links to overwrite the anchor tags styling with the li styling?
It's amazing! Looking forward to learning more
hey dev, trying to make that menu style but hard to read small text , are able to make it bigger ? will help a lot ) , Thanks in advanced ...
For the complicated selector, since I'm not using the same coding program, is there a way to write in text editor form?
This was very helpful. So awesome... thank you.
Hey Travis noticed your last videos have been recorded on full resolution, please consider increasing the font size on you text editor, since it's pretty hard to read on the newer videos, thanks a lot for the content and keep on hacking from Colombia!
wat happens as you place links in the blog?
will the sidebar stay as you klick one of those links? (links in the bloig to items in the blog)
You will go to another website. Is that what you are asking?
This guy is awesome! Made this video super fun! We want to see more!
YAY!
DevTips Already subbed to your channel!
Yo trav is it faster to do the trigger like this with a checkbox rather than with jquery ? specially on mobile? thanks!
when you applied where are dots(.) infront of it?
Hey, I have problems to show the "Trigram for Heaven" Character, it only shows me "â~°" in my browser. Any suggestions how I can fix that?
I used copypastecharacter.com to get the character. But you can always use an img, or a word like "Menu" or something :)
Thank you sir! :)
The problem was in toggle positioning.... if u put just fixed with no 20px it works awsm
Thanks for the solution!
Wonderful tutorial. Thanks for making it.
Is there a place where We can view this code? or is there a link to the original lesson?
The music in the background reminds me of "human music" from Rick and Morty.
Nice video but I think you should make the code a little bit more visible (bigger) Perhaps with some zooming?
Egemen Kızılcan Great tip, I'll be sure to do that. Thanks!
This was really cool, Travis. And with jade I can make this html snippet as an include. Way cool. Thank you for the bonus clip at the end credits like a Marvel Movie. Keep hacking!
hi was successful with making the side out navigation but i noticed that when i added javscript to the page for the menu the toggle stopped working do you know how i can prevent this problem. thanks looking forward to your response
after i ahead jquery it is like the sidebar appears automatically
Ojoola yusuf the toggle(label) doesnt appear at all
Great video. Love your entertaining teaching style. Only one recommendation, please make your code larger. It's really hard to see. Thanks! I've subscribed to your channel. :)
Thanks 98impreza515, I'm making a note to make the code much larger in the future!
thanks sooo much bruh. your vid helped a lot 😊❤️
i can't read it so small how to make the video bigger so i can see code ?
All I can say "I love you". Michy from London.
is there a way to do this level 10 thing with a position: fixed fullscreen image?
You and your videos are best of the best of the best!)
I know this is old, anyway thanks a lot for the tutorial, was very helpful even tho I had to put up with your sass especially in the last section when you're doing the easy sass thing with indents, I was like where the fuck do I put my brackets now xD, but after a while of itching and stitching I finally got it together and it's great, love the pure css menu! Thanks for sharing again, very much appreciated. Keep it up T!
great video but its 2017 is this still the best way to do it or simple jquery is better because i always like css over jquery and i dont know if im right hehe also i got a wrapper which inside has a container then a header and a header-inner div should i put my toggle haburger menu inside the header or just like in the video bc things look a lil crazy for me for some reason
One criticism i have is to zoom/crop into the area of where you're designing only a certain place of a website..I really couldn't see what the menu look liked when you added it and what antialiased did to the font. You really don't need to show the whole site.. only after you competed the initial task.
It's an interesting little quirk no doubt. But i think i prefer JS as a class toggler. No need to add additional markup that way.
Yea, I would use JS in a production environment, fo sure.
I don't know why but all the things of 'bourbon' like +position doesn't work :(
Hey up… excellent work on the tuts. I can't believe I've only just found you! I've been looking for months for something like this! I ended up using a jQuery version which caused all sorts of clashes with other jQuery driven content such as a slideshow and maps, but I got there in the end. Then I go and find this which is just awesome. Anyways, you're using SASS, but I have just started out with LESS, can this be used with LESS? Essentially they're the same, right?
great vid, looks like i need to get into SASS too, loving the no semicolons and curly braces..Thanks Again. consider me subscribed!
Thanks Toby!
I loved this tutorial, I learned a lot! I did have a question though. I am creating a nav menu for a mobile device and I have not just 1, but 2 menus that I need to slide in and out. I tried just duplicating everything and giving them different id names. The only problem is that the only checkbox that will work is the one that is listed last in my html. Can you have more than one of these in an html doc? Thanks for any help in advance!
is these code work in css as same as it is here
You are awesome!!! Absolutely awesome!
Could you put other thing in the slide out besides navigation?
How to approach making it on hover rather than on click?
Hi, do you have any tutorial on how to create buttons that perform a scroll down to a specific part of the page? I want to click a button and it goes down to a specific part and not opening another page, but I can´t seem to find tutorials for that.
Cheers and thanks
+Jorge Marques Here is an example of what you are asking for:
Just replace your buttons tag with the second one above. Put the tag wherever you want to assign the jump location.
+Kameron Hazelrigg Also if you add smooth.pack.js just google it and link it to your web page itll have a smooth scroll down...
Great, thanks all, the js is a nice addition.
Good video, suprised to see you here at PHP. Congrats. Presentation GREAT! as usual. Font size kinda small for my old eyes. Music ok, not distracting like a lot of youtubes. So thanks, hope this does not slow DevTips.
bob
SUPRISE! Haha, Thanks Bob! DevTips will still hold its normal schedule, see ya there too!
Nice :) I like your delivery, nice tutorial. I'll be looking through your tut's later looking for some good tips. I'm always looking at speeding up the loading time so any tips on that would be great, especially image loading time.
Performance is always a big deal. My tip on that would be to just use less images. And the ones you do use, optimize as much as you can.
Thanks for the comment man!
Way too small. Hard to see code and get what is going on. Plus, he doesn't really narrate anything. No good here.
Nailed it. One question though, any idea of how to hide that sidebar if I click anywhere rather then the toggler. I am super excited for some reply !
JQuery lol sorry can't think of any other way
DevTips ***** I am so so so happy right now. Its only been a while i started to watch your tutorials and I cant believe how ideas already starting to trigger in my mind. Thank you guys. Love you. You guys are aaawwwwwesome.
I am super excited to share a sidebar that i created and also the solution to my 1 week older question. (pure css)
jsfiddle.net/jdb4umqh/7/embedded/result/
I like the animations you have there. great job. Good feel.
Arindam Chakraborty just make=== .toogler:checked { left: (your sidebar width); top:0px;bottom: 0px;right: 0px;background:(you can add come color here if you want);}
It will stretch it to full width and height.
Hi Arindam, did you ever solved that outside the toggler click to hide the sidebar again??
Great first video! I look forward to your next video.
Thanks mashtech! I'm excited to make more!
DevTips, np worth the sub :D
Any one got any idea how to fix this, it all works perfectly but the glyph does not activate when clicked on but instead 10px or so above
can i get the website with these codes?? reading the codes myself wud help me understand bettr
A very good tutorial
Awesome thnks
Great job! Thanks for the bonus material
I'm glad you liked it!
Sweet!
Thanks Dev, But what about CSS , if i dont want to use SASS i can do this in css ?
Absolutely, all SASS compiles down in the end to vanilla CSS, so anything you can do in SASS, you can do in CSS.
Same principals apply.
"I like that, it makes me happy!" eheheh.. I loved that!
Thank you very much for the awesome tutorial and for the useful links I didn't know about xD
Keep up the great work and I hope to see you again soon ^__^
Thanks for the warm welcome, You'll see more of me soon! :)
Great tutorial!
thanks for the topic! didnt know it could be done! its awesome :D
Yea! There are a few more interesting things to do with random input types I could spend some time on if you guys like it.
is it bad practice to make your own toggle button instead of using a simple character, which means using block elements inside a label tag?
+Alex Taietti why?
I don't know that's why I'am asking
This is a really nice solution, however, as I don't use SASS or SCSS, I'm having trouble getting the CSS code exactly right because you don't show the actual generated CSS - too many assumptions here! Specifically, from 17:40 you say 'in the case of the side bar toggler being checked, look at it's sibling"…. but how do you do that in normal css? everything up to there I've managed to replicate, so would be great if you can explain this. many thanks
The Sibling selector would be the same in Sass and CSS. it would be #sidebartoggler:hover + .page-wrap
I have put the source code on a github repo for you to reference the sass + css: github.com/DevTips/HTML-and-CSS-slide-out-navigation
good luck!
DevTips Thanks. I did some googling after my comment and managed to find out how to get it working. I hadn't been aware of the + selector, in fact this made me look at selectors all over again so I did learn a lot all thanks to this video. However, I think it would still be better if you did these videos zoomed more on the code so we can actually see it without having to load up the 1080p option, and also with standard CSS so those of us who don't use Sass can follow more easily. Of course that's your call and I find your videos very interesting and helpful anyway, but I'd hazard a guess it would appeal to a wider audience if more people can follow without confusion.
In any case, keep the good work coming, I enjoyed this video and have sub'd to your own channel. Something I'd like to see in future is a pure HTML/CSS simpe paralax tutorial, one that follows scrolling the page up/down rather than on a auto animate as many seem to be.
Cool arumdevil! Thanks for subscribing.
The videos I make from now on will have better readability, it's a work in progress. But I can't say that I wont be using sass. It's just to prevalent. Working in the industry you will see that it's a reality. So if some people are pushed to go learn a bit about it as a result of these videos, I'd say that's a positive thing.
Thanks for your comment!
DevTips Well I do agree, however I also think that it's best to learn the raw code in order to understand things better, then by all means use other tools to make the coding process more efficient. It just seems to add an extra layer of obscurity between the video and those watchers who don't use such tools. Of course it's your decision whether that's a reasonable trade-off or not and I'm sure your videos will continue to be useful regardless, just bear it in mind and monitor feedback.
Thanks arumdevil, I'll take this into consideration. :)
I love your videos but it's getting really hard to read with such tiny fonts, try zooming in a bit next... thanx mate!