Build a Responsive Sidebar Menu with Animated Dropdowns | HTML CSS JavaScript Project

Поділитися
Вставка
  • Опубліковано 24 лис 2024

КОМЕНТАРІ • 107

  • @lanzpppp
    @lanzpppp 2 місяці тому +26

    My new favorite channel when it comes to web development :)

  • @azzido851
    @azzido851 29 днів тому +1

    I used it at my job (not related to web dev) and got a salary raise!
    I bought your course on Udemy.
    Thanks so much!

  • @DanielUdechukwu00
    @DanielUdechukwu00 2 місяці тому +10

    This grid method of handling drop down will help my development a lot. So much easier.
    Thanks Fabian!

  • @sharpshooter--00
    @sharpshooter--00 Місяць тому +2

    the way you explain things is just what kept me until the end , this channel is gonna blow up and reach millions pretty fast

  • @p_o_z_e
    @p_o_z_e Місяць тому +1

    I've been a frontend dev for around 3.5years and am always looking for good channels too learn new things or get familiar with stuff i've not done in a long time and i gotta say this channel is amazing!

  • @leonardigweokolo2813
    @leonardigweokolo2813 4 дні тому

    I don't know if it was the JS but this tutorial was too advanced for me to understand. Great work your doing mate!!!

  • @isaidstream4547
    @isaidstream4547 2 місяці тому +4

    The grid trick was amazing.

  • @gamersgame43
    @gamersgame43 2 місяці тому +1

    I was surprised to see that how the semantic HTML was demonstrated and explained beatifully, nice video

  • @omardaanoun255
    @omardaanoun255 2 місяці тому +2

    favorite coding channel
    thank you, Fabian,
    i really need a page reveal animation tuto pls

  • @OZTutoh
    @OZTutoh 24 дні тому

    Great tutorial. It's awesome have an animated responsive website working on my phone. I tuned the media width from 800 to 700 so the desktop layout would appear on my phone in landscape.
    The active hi-lights do not work on the Create and Todo-Lists sub-menu icons and headings, only on their sub-menus themselves, but I bet you knew that. It looks amazing all the same!

  • @mustasinbillah-u7d
    @mustasinbillah-u7d 2 місяці тому

    my favorite coding channel
    thank you Fabian

  • @Adrian-1712
    @Adrian-1712 2 місяці тому +4

    That tutorial just broked 5 hours of trying and testing my old sidebar. Now it's gone! Thanks! :(

  • @radeveloper0
    @radeveloper0 2 місяці тому +1

    Before watching this informative video, I would say that you have a great 👍 😃 experience Fabian Sir ...
    Love from Pakistan...

  • @champx5
    @champx5 2 місяці тому

    I love that you made this video. I have been trying to make one myself for almost a year but in vain. Thanks a lot!

  • @wlockuz4467
    @wlockuz4467 2 місяці тому +1

    This is why I love and hate web.
    Love because there are people like you who share awesome resources like this.
    Hate because of random behaviours like height auto not animating.

  • @MithunNMogaveer
    @MithunNMogaveer 2 місяці тому

    Underrated channel ❤️

  • @allethu1773
    @allethu1773 2 місяці тому

    I didn't read all the comments, but a lil opti' would be to reuse the toggleSidebar function inside the if statement when toggleSubMenu is called, nothing that crazy but it was on my mind ^^, luv tha vid!

  • @doodhpati4906
    @doodhpati4906 День тому

    Thanks dear your code really help me in my project

  • @Silverdagger258
    @Silverdagger258 2 місяці тому +1

    Great video - only a very minor observation Since there is only 1 nav bar, I would simply use "nav" as the css selector and not a class

  • @djspikeone
    @djspikeone Місяць тому

    Didn't know position sticky can be used that way, I always did play with position fixed and then i shrinked main section using margin left. Also finally some quick and simple explanation on height auto transition, thank you

  • @waleedbinshabbir1542
    @waleedbinshabbir1542 2 місяці тому

    in the drop down menu, you could also use calc-size(auto) in height to make it transition automatically.
    edit: it's a experimental feature for now. so it was awesome seeing a solution.

  • @edsHTML
    @edsHTML 2 місяці тому +1

    bro the transition are smooth 🔥🔥😎😎

  • @Idkname709
    @Idkname709 2 місяці тому

    My man was cooking 🔥🔥

  • @subhajitP1999
    @subhajitP1999 2 місяці тому

    Perfect for learning more and more....❤

  • @Belladonna_khaday
    @Belladonna_khaday 2 місяці тому

    I've been always waiting for your new videos. Thank you❤❤

  • @daniels7250
    @daniels7250 2 місяці тому

    This looks beautiful 🔥

  • @deatho0ne587
    @deatho0ne587 Місяць тому

    Maybe a little late, but when you did this there was in a browser a way to transition a display. Think there is a way to do height: auto at roughly the same time.
    Do not even need JS for a toggle, but that is more advanced HTML, can even do the rotate with it. Now it might give you some of the bugs you show but still.

  • @rbcookingchannel-cg7xs
    @rbcookingchannel-cg7xs 24 дні тому

    I want more videos like this

  • @nickolaizein7465
    @nickolaizein7465 2 місяці тому

    Amazing! That what I am looking for! Thanks a lot!

  • @zaiblkhera
    @zaiblkhera 2 місяці тому

    The way you explain everything is amazing

  • @son7459
    @son7459 2 місяці тому +6

    One little "error" on this: If the sidebar is currently CLOSED and you resize your screen to be smaller (to mimic a mobile screen), the sidebar will collapse and stay at the bottom as expected, but it will only show the first "Home" icon instead of all the options within the sidebar. This will give mobile users hard time. Otherwise, great tutorial!

    • @JulyFranzClaridad-p5p
      @JulyFranzClaridad-p5p 2 місяці тому +1

      indeed. i noticed it too.

    • @m.attila2864
      @m.attila2864 Місяць тому +2

      Yeah but a mobile user wont resize the screen manually. If he opens the site it will check the screen width/height on loading and using the correct style. So u dont need to worry about it.

    • @YoshiToshi2
      @YoshiToshi2 Місяць тому

      @@m.attila2864 Mobile users can “resize”, just rotate your device in the landscape mode and back. Another example is “split mode” on tablets and some devices running Android. You can split screen into two or more panels, each one has a different size. And you can resize that panels moving a delimiter.

    • @hitmusicworldwide
      @hitmusicworldwide Місяць тому +1

      ​​@@m.attila2864 true it's just can be disconcerting when tweaking design ideas So it's good to know this behavior is not a script killer

  • @iandres_off
    @iandres_off День тому

    Thank you Fabian it really helpfull

  • @burhanuddinkauka792
    @burhanuddinkauka792 2 місяці тому

    Waiting for this tutorial🔥🔥🔥

  • @othmansmaili808
    @othmansmaili808 2 місяці тому

    Super informative and useful video! Thank you :)

  • @DineshVaidyaOfficial
    @DineshVaidyaOfficial 2 місяці тому

    Thank you so much it was amazing tutorial. Please keep it on and thanks once again!!🙂

    • @coding2go
      @coding2go  2 місяці тому

      Glad you liked it!

  • @relaxingbuddygaming8867
    @relaxingbuddygaming8867 2 місяці тому

    Thank sir it's give lots of value to my journey ❤

    • @coding2go
      @coding2go  2 місяці тому +1

      Glad to hear that

  • @mohammadselim1849
    @mohammadselim1849 26 днів тому

    You are great
    Thanks

  • @GamerDevIND
    @GamerDevIND 2 місяці тому

    Really helpful
    Thank you

  • @jimmymedia2049
    @jimmymedia2049 2 місяці тому

    Nice explanation, however using div inside of ul is invalid markup, also this solution needs some other a11y improvements. Using hidden radio buttons and labels you can avoid much of the JS here. I believe using animations with key frames can work with the dynamic height problem

    • @coding2go
      @coding2go  2 місяці тому +1

      Thanks for the info, but I think replacing js with hidden radio buttons is actually worse for accessibility.

  • @gizmogreedy1789
    @gizmogreedy1789 19 днів тому

    Thanks a lot!

  • @Al_faiz927
    @Al_faiz927 26 днів тому

    please upload more of these videos :)

  • @footballhighlights123-o7n
    @footballhighlights123-o7n 2 місяці тому

    Worth it 😊😊😊

  • @JulyFranzClaridad-p5p
    @JulyFranzClaridad-p5p 2 місяці тому

    thanks, it worked.

  • @farplayzwastaken
    @farplayzwastaken 2 місяці тому +1

    Hey sir, can you please create a video on scroll driven animations.

  • @nikhildhakal6235
    @nikhildhakal6235 2 місяці тому

    Thank you very much

  • @aktifkopyalamamerkezi3495
    @aktifkopyalamamerkezi3495 2 місяці тому

    excellent ☺♥

  • @whistlindevspace
    @whistlindevspace Місяць тому

    Could you please do it in reactjs and plain css

  • @michelribbens8014
    @michelribbens8014 Місяць тому

    Is there a Github repo for the code? I've got a problem with the sidebar when closing it by using the toggle button and can't figure out what I've been doing wrong. Would love to see the complete code to compare it with mine

  • @michaelgood5070
    @michaelgood5070 25 днів тому

    Hi. Sidebar resets itself when switching pages. How can I make save sidebar menu state, to keep currently open dropdown menu/page when switching pages? thank you

  • @alfin_efendi
    @alfin_efendi Місяць тому

    nice

  • @floyd1411
    @floyd1411 2 місяці тому

    will you guys put out a javascrip tutorial as well?

    • @coding2go
      @coding2go  2 місяці тому

      Yes, we are working on JavaScript videos and courses. Concept overviews, crash courses etc. are coming soon.

  • @HomeGo-f9x
    @HomeGo-f9x 2 місяці тому

    Use , tags to create nav bar, easy😅

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 2 місяці тому

    Nice nice nice ❤

  • @skymasseffect
    @skymasseffect 2 місяці тому

    nice video

  • @rayy5898
    @rayy5898 2 місяці тому

    Sorry to bother you, but could you consider creating a tutorial on scroll snapping?

  • @zenginellc
    @zenginellc 2 місяці тому

    8:35
    When I add "display: flex" here, the toggle-btn wraps to below the logo and I've been trying for 2 hours to fix this...
    I completely redid all of the work as you did again with the same results...
    I found that if I remove the DIV wrapping it, the issue goes away...

  • @rowansteve-ng3fs
    @rowansteve-ng3fs Місяць тому

    what the name of the course on udemy

  • @abdulhannan5672
    @abdulhannan5672 2 місяці тому +1

    In the sidebar, do you really think that wrapping an li element directly inside a div is a good idea? @coding2go
    Even though it works great, it is not valid HTML I guess. And would not be semantically right.
    I've also recently diccovered alc-size(auto) which does not have a greater browser support.

    • @zenginellc
      @zenginellc 2 місяці тому

      The DIV actually broke it for me, causing the 'toggle-btn' to be incorrectly positioned.
      Simply removing the DIV altogether appears to have corrected the issue with no issues so far.

    • @Moamal-Alaa
      @Moamal-Alaa 2 місяці тому +1

      Also, Using ul element inside li element is not valid and cause a weak accessibility performance.

  • @farhankhamran
    @farhankhamran Місяць тому

    This design is great. But the idea of using grid is terrible if you are planning on add a fixed top navbar.

  • @Fnydo
    @Fnydo 2 місяці тому

    Next video on creating a smooth FAQ using grid

  • @itsdmn1
    @itsdmn1 29 днів тому

    I have been coding with Phpstorm and I get this problem when I try to style multiple elements inside each other, for example, when I try to add a fill for the svg for being active the svg element just shows with a red underline and the error is: "Nested selector can't start with an identifier or a functional notation" and it does not work, is it only a problem with Phpstorm or how can I fix that?

  • @VermiNew8475
    @VermiNew8475 2 місяці тому

    Can I use your sidebar in my own project with MIT licence? Thank you! Also awesome work, better than mine :P

    • @coding2go
      @coding2go  2 місяці тому

      Sure thing! Go ahead. There is no copyright or anything on my code examples.

    • @VermiNew8475
      @VermiNew8475 2 місяці тому

      @@coding2go Thanks

  • @saeedxgholami
    @saeedxgholami Місяць тому

    cool

  • @dev-j1k
    @dev-j1k 2 місяці тому

    How do you make a form that can be integrated into Gmail or server.

  • @amaljose6374
    @amaljose6374 2 місяці тому +1

    I don't know why but the position sticky for the sidebar doesn't seem to work for me 😢

  • @Abdullahkhan-j2s4x
    @Abdullahkhan-j2s4x 2 місяці тому

    Plz translate your videos in hindi🥰😍🤩😘

  • @samubella
    @samubella Місяць тому

    Why remove " " from onclick attribute?

  • @balajis3843
    @balajis3843 2 місяці тому

    9:49 in my page "sidebar" is not sticking at top
    It is scrolled with "main" content
    Temporarily I try set margin-left: 250px for "main" Tag

  • @positivevibes8092
    @positivevibes8092 2 місяці тому

    I ❤ you

  • @vibewithharsh010
    @vibewithharsh010 2 місяці тому

    i completed 1k like

  • @prass111
    @prass111 Місяць тому

    please css Box-Sizing

  • @stringers4441
    @stringers4441 Місяць тому

    why i can't add a new js code in app.js it doesnt work why?

  • @rayy5898
    @rayy5898 2 місяці тому +1

    First :))))

  • @Hassanakora
    @Hassanakora 2 місяці тому

    WaaaAaaaooO

  • @MateoVargasGiraldo
    @MateoVargasGiraldo 2 місяці тому

    Hi

  • @mujammilmaldar7693
    @mujammilmaldar7693 2 місяці тому

    Pin bro first comment❤❤

    • @ireqkub
      @ireqkub 2 місяці тому

      No, You are not :)

  • @joaolucasmuller5651
    @joaolucasmuller5651 17 днів тому

    Can someone comment the code?

  • @KevinGeller
    @KevinGeller 2 місяці тому +2

    This code is so f**** dirty....
    List elements only have 4 possible parent elements ul, ol and menu. The last one is “dir” but this is obsolete. Div wrappers are technically wrong here.
    Furthermore, “nested css” is used, but only at a later stage. Either you start with it right from the beginning or you leave it out completely (here, however, it should be explained what the advantages and disadvantages are)
    The Javascript: Use quotes, especially if something can occur that may allow spaces. onclick='funct( this )'
    Then the javascript is loaded via defer. This has the consequence that a click on the button can cause an error, because the mentioned function does not yet exist. This can occur in particular if the JS file takes longer to load. The eventBinding should also be carried out with the JavaScript first. You should also not toggle the “close” class if you want to remove it. If something interferes with the process and the toggle interferes, there can be strange effects (but only as an optimization by the way)
    And last but not least: SVGs offer the possibility of being recycled. “SVG use” is the magic word here. Especially if icons are used frequently, you should consider this (e.g. the Chevon)

    • @coding2go
      @coding2go  2 місяці тому

      Feel free to explain politely what you would have done differently to improve the code, so that people can get an actual value from your comment.

    • @KevinGeller
      @KevinGeller 2 місяці тому

      ​@@coding2go sorry, forget to create the full responce on pc

    • @biigsmokee
      @biigsmokee Місяць тому

      @@KevinGellerwell where is it?

  • @kelechikk-xr7xh
    @kelechikk-xr7xh Місяць тому

    Holle you are too fast

  • @ImmoTheBest
    @ImmoTheBest 2 місяці тому

    It's a pity, I wasted my time for nothing.

  • @AMINULVIBES
    @AMINULVIBES 2 місяці тому

    I want to talk to you personally, how can I talk to you? @coding2go