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

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

КОМЕНТАРІ • 104

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

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

  • @sharpshooter--00
    @sharpshooter--00 21 день тому +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

  • @azzido851
    @azzido851 15 днів тому

    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 місяці тому +9

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

  • @p_o_z_e
    @p_o_z_e 28 днів тому

    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!

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

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

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

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

  • @OZTutoh
    @OZTutoh 9 днів тому

    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!

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

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

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

    The grid trick was amazing.

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

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

  • @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

  • @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.

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

    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!

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

    my favorite coding channel
    thank you Fabian

  • @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.

  • @djspikeone
    @djspikeone 23 дні тому

    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

  • @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 Місяць тому +1

      indeed. i noticed it too.

    • @m.attila2864
      @m.attila2864 28 днів тому +1

      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 20 днів тому

      @@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 16 днів тому +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

  • @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.

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

    bro the transition are smooth 🔥🔥😎😎

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

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

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

    I want more videos like this

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

    Underrated channel ❤️

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

    My man was cooking 🔥🔥

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

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

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

    Super informative and useful video! Thank you :)

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

    This looks beautiful 🔥

  • @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.

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

    Perfect for learning more and more....❤

  • @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!

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

    You are great
    Thanks

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

    please upload more of these videos :)

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

    Waiting for this tutorial🔥🔥🔥

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

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

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

      Glad to hear that

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

    Thanks a lot!

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

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

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

    Really helpful
    Thank you

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

    The way you explain everything is amazing

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

    Could you please do it in reactjs and plain css

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

    thanks, it worked.

  • @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.

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

    Worth it 😊😊😊

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

    Thank you very much

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

    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

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

    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

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

    excellent ☺♥

  • @alfin_efendi
    @alfin_efendi 20 днів тому

    nice

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

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

  • @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

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

    Next video on creating a smooth FAQ using grid

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

    Use , tags to create nav bar, easy😅

  • @rowansteve-ng3fs
    @rowansteve-ng3fs 23 дні тому

    what the name of the course on udemy

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

    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...

  • @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 Місяць тому

      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 Місяць тому +1

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

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

    cool

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

    First :))))

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

    please css Box-Sizing

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

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

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

    nice video

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

    I ❤ you

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

    Nice nice nice ❤

  • @farhankhamran
    @farhankhamran 22 дні тому

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

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

    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?

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

    Why remove " " from onclick attribute?

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

    Plz translate your videos in hindi🥰😍🤩😘

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

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

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

    i completed 1k like

  • @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

  • @stringers4441
    @stringers4441 21 день тому

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

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

    Hi

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

    WaaaAaaaooO

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

    Pin bro first comment❤❤

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

      No, You are not :)

  • @joaolucasmuller5651
    @joaolucasmuller5651 2 дні тому

    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 19 днів тому

    Holle you are too fast

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

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

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

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