Responsive HTML & CSS Side Menu From Scratch

48
64



In this video we will build a responsive collapsible side menu using HTML5, CSS3 and just a bit of JavaScript. We will not be using any 3rd party frameworks or libraries, everything is from scratch

CODE: Code for this video

CHEAP WEB HOSTING: Check out eHost

SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:

FOLLOW TRAVERSY MEDIA:

Nguồn: https://quydinh.com

Xem thêm bài viết khác: https://quydinh.com/cong-nghe

48 COMMENTS

  1. When I try this, the SVG in the HTML disappears on my live server after applying some styling… I'm not sure at what point it goes away, it was there for a bit, but then gone…

  2. Also am I imagining it because it's really late at night? Or are there birds chirping in the background around the 20:56 minute mark lol

  3. Here's a challenge: How would we make it so after opening the slide menu, clicking anywhere on the screen would make the menu close? Does anyone know?

  4. Great vids sir! One question though: when I press ! then Tab I get the same head & body as you except '<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie-edge">'. I have to manually enter that in myself. Is there a way I can change that? Your help is greatly appreciated. Thank You 😀

  5. Since last April Ive been learning web designing in order to find a job in Germany. I dont have any knowledge in IT neither have I ever learned anything else than basic math. I am still struggling to understand the topic but your channel has become an ispiration for me to keep moving. May Allah reward you!

  6. Hi! i can't get style.width to work:/ can someone help me? i'm using sublime text 3 btw
    9:27
    this is what the google said: Uncaught TypeError: Cannot read property 'style' of null
    at openSlideMenu (index.html:40)
    at HTMLAnchorElement.onclick (VM35 index.html:10)

  7. Hello,

    I noticed that when using this menu the anchor links don't work on the iPad. Importantly the ones on the side menu.

    Do you know of a solution for this?

    Some people on google suggest using the full path on the anchor link rather than just the #Home or #Gallery. They suggest using http://www.website.com/#Home for example. I tried that but it didn't work either.

    Thank you!

  8. when I close the side-nav, the main content snaps back into position rather than sliding smoothly like in the video. Can anyone give me a tip as to how to fix this?

  9. New subscriber bro. I really really like your video. Hmm, can you make a chart online update to your next video

  10. A couple of questions.
    1) Is it possible to have the sidebar menu always visible if the screen is wide enough to show it?
    2) Can the x close button be removed from the sidebar menu and selecting a sidebar menu item closes the sidebar on mobile screens?
    3) Is it possible that a click / press on the main panel closes the sidebar menu on the mobile screen?

  11. #Traversary #media your approach is best approach in this YouTube history ,,,many people making YouTube video earning money but this guy make us really knowledgeable thank you so much may live long ….may God gives u all success

  12. brand the cleanest way to add the icon is using the pseudo-class adding the css entitie

    .icon:after {
    content: ' 2261';
    }

  13. Hey, so how do we do this same process, but have the side navigation pop up out of the right side instead of the left? I'm having trouble figuring that out

  14. Hi, Brad. What if i want to add a logo on the left? For some reason i can't get it to work because the hamburger menu is also on the left. Any help appreciated.

  15. this was a great tutorial, I am in the middle of doing an End of Module assignment for Uni and this is what I was looking for, thanks!

  16. According to Intellij, it seems that it's better to close the path tag like so:
    <path d="M0,5 30,5" stroke="#000" stroke-width="5"></path>
    <path d="M0,14 30,14" stroke="#000" stroke-width="5"></path>
    <path d="M0,23 30,23" stroke="#000" stroke-width="5"></path>

  17. so if the video says Brad, You first like, then comment then watch then come back and say thank you again. Thanks for the image slider video Brad it was amazing

  18. I am not able to make the collapsible menu to appear with this code. Is there something that I am missing or need to install?
    <nav class="navbar"
    <span class="open-slide">
    <a href="#">
    <svg width="30" height="30">
    <path d="MO,5 30,5" stroke="#A52A2A"
    stroke-width="5"/>
    <path d="MO,14 30,14" stroke="#A52A2A"
    stroke-width="5"/>
    <path d="MO,23 30,23" stroke="#A52A2A"
    stroke-width="5"/>
    </svg>
    </a>
    </span>

    <ul class="navbar-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="skills.html">skills</a></li>
    <li><a href="user.html">User</a></li>
    <li><a href="sandbox.html">Sandbox</a></li>
    </ul>
    </nav>

  19. I like how you preview each part of this.
    Html5/CSS/Little bit of vanilla JS, for certain components like nav bar etc. .
    These make the perfect tutorials for practicing fundamentals and actually knowing what's going on.

LEAVE A REPLY

Please enter your comment!
Please enter your name here