Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY)

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 พ.ย. 2024

ความคิดเห็น • 72

  • @pizzaguyaz
    @pizzaguyaz 8 หลายเดือนก่อน +20

    You have no idea how useful this will be for me. I feel like I can write this from memory, now that I understand it all.

  • @stratfanstl
    @stratfanstl 3 หลายเดือนก่อน +4

    Amazingly useful demonstration. THANKS. For those having problems with your implementation getting "stuck" or looking "close" but not exactly as shown... Remember, CSS is like JavaScript. If anything -- ANYTHING -- is out of place, missing or lacking a comma or has a comma in a list where one doesn't belong, the parsing of the CSS just silently stops and the behavior you wanted with that style doesn't work. If something isnt working, check: 1) exact NAMES of styles, 2) exact names of entities within a style, 3) exact values / reserved words for entiteis , 4) check for commas in lists of valiues (some attriubtes USE commas, others DO NOT). All of these glitches can result in "half-working" HTML pages.

  • @aryankhandelwal15
    @aryankhandelwal15 13 วันที่ผ่านมา +1

    bro u r lifesaver i will gonna ask it in interviews 😂

  • @gp9342
    @gp9342 10 วันที่ผ่านมา +1

    Thank you for the great video. I have it up and running, and it works great for multiple-page websites. I am looking to use this technique on a single-page website that scrolls to the different sections. I will probably have to use a small JS script to close the menu after the user makes a selection.

  • @stanleeifeanyi4986
    @stanleeifeanyi4986 2 หลายเดือนก่อน +2

    Bro God bless you. I wonder why you don’t have a billion subscribers menn you are too good! I hope the world recognizes your unique teaching!

  • @sergeys885
    @sergeys885 3 หลายเดือนก่อน +4

    I watched both your videos about CSS menu and love them. Using flexbox is much nicer than using floats and manual positioning. And using hidden checkboxes is interesting idea for pure CSS menu which can handle clicks without JS. Also it is possible to achieve similar results with using _:focus_ and _:focus-within_ pseudo-classes instead of checkboxes. If use it with _tabindex_ html attribute, it will possible to create pure CSS clickable dropdown menu which will work even without mouse, using keyboard _Tab_ and _Enter_ buttons only. The only problem of _:focus_ pseudo-class menu it will close only when you click on any other element, it will not close when click on element itself, because focus will not lost when clicking on an element itself.

  • @frymc5351
    @frymc5351 16 วันที่ผ่านมา +1

    very helpful and well explained.thank you

  • @anudeepbj1496
    @anudeepbj1496 3 หลายเดือนก่อน +5

    Very Cleary taught , amazing video .

    • @coding2go
      @coding2go  3 หลายเดือนก่อน +1

      Thank you!

  • @herrenturnen
    @herrenturnen 6 หลายเดือนก่อน +2

    Beautiful! This was exactly what I was looking for! Ty for the great tutorial.

  • @luigidabro
    @luigidabro 3 หลายเดือนก่อน

    Very helpful, when everything I know is back-end specific

  • @MrX-cp8bo
    @MrX-cp8bo หลายเดือนก่อน

    Thank you so much Fabian!

  • @PhonkCoding
    @PhonkCoding 3 หลายเดือนก่อน

    Your channel is one of the best for learning CSS tricks 😎💥

    • @coding2go
      @coding2go  3 หลายเดือนก่อน

      That's nice 😁Thank you!

  • @sahinalam1761
    @sahinalam1761 4 หลายเดือนก่อน

    Just Amazing bro. Without Javascript 🥰🥰🥰

    • @coding2go
      @coding2go  4 หลายเดือนก่อน

      Glad you like it

  • @louloulala9954
    @louloulala9954 8 หลายเดือนก่อน +1

    Thank you very much ! I have a question how do I keep the link "home" or logo for exemple in the desktop navbar (on the right) and not inside the sidebar ?

  • @ElementoryMyDearWatson
    @ElementoryMyDearWatson 5 หลายเดือนก่อน

    That was simply terrific!! Thank you so much for your generosity in sharing your skills and knowledge. Chalk up another subscriber!

  • @Ultimateboat27
    @Ultimateboat27 3 หลายเดือนก่อน +1

    its great bro realy helpfull thank you so much

  • @FARAHDOU-o6s
    @FARAHDOU-o6s 3 หลายเดือนก่อน

    Thank you very much, your videos are very useful thanks again.

  • @lilcranky9455
    @lilcranky9455 3 หลายเดือนก่อน

    LOVE YOUUUU BROO! Amazing video, excellent explained.

    • @coding2go
      @coding2go  3 หลายเดือนก่อน

      Glad you liked it!

  • @engn5608
    @engn5608 3 หลายเดือนก่อน +1

    thanks! its help a lot

  • @hwangyeddeong5272
    @hwangyeddeong5272 5 หลายเดือนก่อน

    thanks, this is really useful, ive been looking for nav bar like this! 💖💖💖

  • @GorePulse
    @GorePulse หลายเดือนก่อน

    nav {position: fixed;} shrinks the bar width.

  • @pablovasconcelos9394
    @pablovasconcelos9394 หลายเดือนก่อน

    Great video!!!
    One ask, why do you always download SVG icons files from google, instead of using link + span code icon?
    Is it better?

  • @abubacarrjawune4210
    @abubacarrjawune4210 8 หลายเดือนก่อน +1

    You are amazing

  • @PicSta
    @PicSta 2 หลายเดือนก่อน

    I wonder why you haven't used an ul for accessibility reasons in this video. Beside of that fact, it's well taught at a good pace everyone can follow with ease.

  • @LukeDorny
    @LukeDorny 3 หลายเดือนก่อน

    I would say make a newer version that is even more accessible and go with mobile first to reduce extra rules in media queries. Love the label outside method.

  • @ShauryaTushar
    @ShauryaTushar 6 หลายเดือนก่อน +1

    You are underrated :(

  • @Ibrahim_webdeveloper
    @Ibrahim_webdeveloper 5 หลายเดือนก่อน

    This is amazing buh could you add code of logo display by right side . Like how how was displayed in large screen

  • @clouddev.
    @clouddev. 6 หลายเดือนก่อน +1

    this helped me so much. tsm ❤

  • @medandcare
    @medandcare 2 หลายเดือนก่อน

    Nvm, it works now. Just that my padding all crpped up. I can probably fix that after screwing around for a bit though.

  • @wahyuwijayanto
    @wahyuwijayanto 2 หลายเดือนก่อน

    Bro, thank you for the tutorial.
    it works just perfectly on my desktop with minimized screen layout to simulate mobile device
    But when i open it in my mobile device , the hamburger menu is not responding to the touch and the sidebar wont open..
    Could you please help me?

  • @Sca4let
    @Sca4let 8 หลายเดือนก่อน

    how would I implement the side bar without the need for mobile. i just want a side display like TH-cam has next to its logo. Thanks!

  • @lar_zzz
    @lar_zzz 3 หลายเดือนก่อน +17

    This solution is not accessible! Please do not use this checkbox trick for navigation toggles! Use the W3C Disclosure Pattern.

    • @sarthak290
      @sarthak290 2 หลายเดือนก่อน +1

      That's exactly what I wanted to know; if it's accessible or not. Saved my 5 minutes

    • @sarthak290
      @sarthak290 2 หลายเดือนก่อน

      15*

    • @abernier
      @abernier หลายเดือนก่อน

      you can use a js-library like radix-primitive for this (in order to be accessible) but you can easily adapt from the video example (which focus on css)

  • @chaudharinirav5625
    @chaudharinirav5625 หลายเดือนก่อน

    i Loved your work and i find this much helpfull.....But here's a problem.when we give id to the respective nav links using href it will work properly in laptop or larger devices, but when it comes to mobile devices when we click on bar icon it will open side bar but when we click on any link it will be scrolled and we reached to that section but this side bar will remain as it is. normaly on productioin websites, when we click on any links, the side bar will closed and we reached to that perticular section. so please make a solution for this also this will help me and others as well.....I'm waiting for your replies.

    • @coding2go
      @coding2go  หลายเดือนก่อน

      I see... I think it is because my navbar tutorial was meant for websites that link to other html pages. If you link to a section within the same html page (to scroll down) you would need to implement some javascript logic to close the navbar. Since in this case the navbar depends on the sidebar-active checkbox, you would need to uncheck the checkbox when a bookmark link is clicked (Meaning when a link is clicked that will scroll down the page).
      So in your javascript code write a function
      function closeSidebar(){
      document.getElementById('sidebar-active').checked = false
      }
      and then call the function in the onclick attribute of the bookmark links.
      About
      Hope that helps ✌️

  • @vcareline9232
    @vcareline9232 9 หลายเดือนก่อน +1

    🎉 great

  • @yehonamgeker
    @yehonamgeker 6 หลายเดือนก่อน

    Please, how do you make the home link on the navbar, join the other links to the right? Please help me

  • @KymanieLouis
    @KymanieLouis 5 หลายเดือนก่อน

    are we still able to see the logo even when the screen is smaller

  • @islamown6394
    @islamown6394 3 หลายเดือนก่อน +3

    I give up it doesn't work from here to me 9:37

  • @medandcare
    @medandcare 2 หลายเดือนก่อน +2

    My navbar won't hide. I keep placing "display: none;" but it won't hide or go off screen.

    • @lucasrodriguez7441
      @lucasrodriguez7441 หลายเดือนก่อน

      A mi me pasa lo mismo. Solo se esconde si le doy al icono de cerrar, y me envía a la página de inicio. 🤷‍♂️
      Lo has podido solucionar?

  • @fahadfahad5835
    @fahadfahad5835 6 หลายเดือนก่อน +3

    Bro I can't control the open and closing transaction speed why?

    • @raja_roy47
      @raja_roy47 6 หลายเดือนก่อน +1

      Use transition property

  • @everydayisfriday2404
    @everydayisfriday2404 6 หลายเดือนก่อน

    I can't get the elements inside of the links-container class to align to the flex start When using media query , can anyone tell me what could be wrong with my code?

  • @muhammadyounusmorty6160
    @muhammadyounusmorty6160 24 วันที่ผ่านมา

    can you share code?

  • @elwolffy_6825
    @elwolffy_6825 8 หลายเดือนก่อน

    and how you can close the sidebar whe you press the anchor element?

    • @coding2go
      @coding2go  8 หลายเดือนก่อน

      When you click an anchor element that links to another webpage (e.g., about.html), the browser reloads the entire page, effectively closing the sidebar. This is because the browser navigates to a new location and renders the new page from scratch, closing the previous page and its elements like the sidebar.

    • @elwolffy_6825
      @elwolffy_6825 8 หลายเดือนก่อน +1

      @@coding2go sorry i forgot to mention that my question is reffer to when you have anchors that link to another part of the same page, another div,class,id

    • @lucasrodriguez7441
      @lucasrodriguez7441 หลายเดือนก่อน

      @@elwolffy_6825tengo el mismo problema. Lo has podido solucionar?

  • @Tautviss777
    @Tautviss777 3 หลายเดือนก่อน

    where do you find browser developers' tools?

    • @coding2go
      @coding2go  3 หลายเดือนก่อน +1

      The Browser Developer Tools can be opened by right-clicking a website and then "inspect". On Windows you can also use the short cut CTRL + SHIFT + I

    • @Tautviss777
      @Tautviss777 3 หลายเดือนก่อน

      @@coding2go thanks

  • @Serean_Miles
    @Serean_Miles 8 หลายเดือนก่อน

    My menu icon (three line) got stucked in the middle of the nav bar. Can you please help me

    • @coding2go
      @coding2go  8 หลายเดือนก่อน +1

      Is it possible that you applied "justify-content: center;" in your nav element? This will center all the elements in your navbar (including the menu button). If you want your links to be centered but not your menu button, then you need to apply "justify-content: flex-end;" on your nav element inside the media query. Hope that helps ✌️
      If you want the source code to compare it check out our website: coding-kurzundknapp.com/coding2go.html

    • @Serean_Miles
      @Serean_Miles 8 หลายเดือนก่อน

      @@coding2go thank you!

  • @kikimuguza5941
    @kikimuguza5941 หลายเดือนก่อน

    I couldn't make it work because it wasn't made in a mobile first approach... 😢

  • @gamerstube7543
    @gamerstube7543 4 หลายเดือนก่อน

    When we scroll down navbar goes upward so when we scroll the body scroll is stop and when we hide navbar then our scrolling work. Please help me in this

    • @AXLtheOG
      @AXLtheOG 3 หลายเดือนก่อน

      The navbar itself is not fixed. So, if you scroll the body, it will go up. To achieve what you are trying to do, set the display of navbar to fixed and increase its z-index.

    • @gamerstube7543
      @gamerstube7543 3 หลายเดือนก่อน

      @@AXLtheOG position:fixed; krne se navbar gaayab ho jaa rha h

    • @AXLtheOG
      @AXLtheOG 3 หลายเดือนก่อน

      @@gamerstube7543 z index change krke dekho

  • @hectormartindama7371
    @hectormartindama7371 6 หลายเดือนก่อน +1

    top

  • @aryankhandelwal15
    @aryankhandelwal15 13 วันที่ผ่านมา

    +1

  • @WebDevXpert
    @WebDevXpert 6 หลายเดือนก่อน

    Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects: th-cam.com/video/WVICLYVUDes/w-d-xo.html

  • @KamilKrol-tx5vg
    @KamilKrol-tx5vg 5 หลายเดือนก่อน +1

    after that
    } doesnt work like shut be

    • @skully3661
      @skully3661 4 หลายเดือนก่อน

      Same, which I don't get why. It's not like this tutorial is super old.