Build A Responsive Sidebar Menu in HTML, CSS, & Javascript - Beginner

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 117

  • @SaintHanappi
    @SaintHanappi Год назад +5

    Jesus Christ, absolutely stunning as a beginner. Thank you so much, for your extraordinary and well explained content.

  • @zedolok4508
    @zedolok4508 11 месяцев назад +1

    man i was searching for something like this, you have no idea how long i search and now i finally learn, i am learning on my own tks man god bless you

  • @aboutselphy
    @aboutselphy 9 месяцев назад +5

    awesome sidebar :) but i would chage all the PX stylings into Rem
    for people with scrolling problems:
    insteat of position: absolute use fixed.
    for the tooltips also dont use position,top,left and transform.
    move the tooltip span into the and in css just add margin-left: 1rem;

    • @ershe
      @ershe 6 месяцев назад

      I'm wondering, do you keep the nav absolute, don't allow the body to scroll, but allow main-content to scroll with overflow? I think google analytics does something like this.

  • @geovanyhernandez8640
    @geovanyhernandez8640 Год назад +8

    Slight modification that I did to the styling for my specific use case.
    Since we are setting the nav-item name's opacity to 0, when collapsed, hovering above its position will trigger the tooltip.
    This took care of that:
    .sidebar .nav-item {
    display: none;
    }
    .sidebar.active .nav-item {
    display: inline-block;
    }
    My nav-item texts are long, so when the tooltip was being triggered, it would keep the 80px as width and increasing the width would increase all the tootips.
    This will help with the dynamic width, plus it helped with alignment:
    .sidebar ul li .tooltip {
    position: fixed;
    ...
    display: none;
    }
    .sidebar ul li:hover .tooltip {
    display: inline;
    }
    Hope this helps anyone who was experiencing the same issues!

    • @johnpaulmejia6259
      @johnpaulmejia6259 11 месяцев назад +1

      Wow! Thanks for sharing! I had the same issue when adding space on nav text (2 words).

  • @d21gauravbalodi98
    @d21gauravbalodi98 2 месяца назад

    wait up , just because u changed the opacity to 0 it means its just hidden i try to add like a container on the right side it will definetly effect the positioning of the main container , u should make those changes as well i think display none will work instead.

  • @iclx7844
    @iclx7844 Год назад +3

    When i go to another site and the sidebar is not active, or the other way, how can i keep it?

  • @AmazingCreationsStudio
    @AmazingCreationsStudio 11 месяцев назад +2

    lot's tutorial on this topic.. but unique in this channel is that with voice guide.. which is very important and also helpful..

  • @antoniogomezruiz2700
    @antoniogomezruiz2700 10 месяцев назад

    Man this tutorial is awesome! Currently I did a backend application, and I am not very familiar to the frontend development, therefore my server looks awful... But with this tutorial my server looks much much better in an instant. I´ve learned a lot with this video about div, classes and ids, now I am testing new views, thanks a lot again!!

  • @seorangorangyangsukaorang
    @seorangorangyangsukaorang Месяц назад

    Video ini sangat membatu saya sebagai pemula rpl, sangat mudah dipahami sekali, sukse selalu bang CC💪💪

  • @yashraj52_
    @yashraj52_ Месяц назад

    I am having an issue, when i'm adding container div and set the property as in video, i can see horizontal scrollbar

  • @peterbridge7519
    @peterbridge7519 6 месяцев назад +1

    Being a very beginner this is just what i was looking for!
    However can't get de script working when clicking on btn

  • @basse9914
    @basse9914 Год назад +2

    Great. How do we add pages though for each one?

  • @user-yz2ct2sy3l
    @user-yz2ct2sy3l 7 месяцев назад

    26:00 excellent 👌👍

  • @oscarrdy-old
    @oscarrdy-old Год назад

    How did you get your window controls next to the tabs on your mac?

  • @seancurrie-chicago
    @seancurrie-chicago Год назад +2

    I'd love to see how to make this kind of side bar in react. I've tried recreating and think im close. But would love to see how you do it.

  • @rexadvanture
    @rexadvanture Месяц назад

    somebody please help me my toglle bar dont want to closed, idk why cause im newbie at coding. please help me i cant put main content. if i put it the toggle bar is doesnt wanna closed. im so sory for my english cause iknow it worst

  • @klovvin
    @klovvin 24 дня назад +1

    Manually opening and closing it doesn't mean it's responsive... it needs to automatically pick the state based on screen size

  • @newfort970
    @newfort970 7 месяцев назад

    Brother, one issue, when i resize the height of the window, it clips the bottom menu links. Any fix?

  • @AmitKumar1150
    @AmitKumar1150 3 месяца назад

    Can you please extend this for mobile view, where sidebar will open on top of main content

  • @manjunathmyaleshi4399
    @manjunathmyaleshi4399 Год назад

    ​ @Code Commerce if side menu scroll added in the sense pop-up values are hiding behind the screen can you please help me regarding this?

  • @MrLDNTOWN
    @MrLDNTOWN Год назад

    how did you get the divs to fall under each other when writing .sidebar on css?

  • @4BroGame
    @4BroGame 4 месяца назад

    Hey hi, I have a website which is made by html css and js but I want to show that website in desktop view for all devices. Will you plz make a video on this topic or can you please share the code of desktop view for all devices.

  • @peacesoundsstuff
    @peacesoundsstuff Год назад

    I’m having issues with the overlay contents for each sidemenu item
    Where do I place the divs

  • @kelubboy
    @kelubboy 6 месяцев назад

    Awesome work
    How do I add a toogle button??

  • @arillavigne
    @arillavigne 11 месяцев назад

    Thanks for the tutorial bro!
    One question, how to make a dropdown on the sidebar?

  • @jekaterinakljukina9816
    @jekaterinakljukina9816 Год назад +1

    I have a problem with my image, it has the shape of an ellipse instead of circle

    • @TheTrueHuang
      @TheTrueHuang Год назад

      I also have this issue when I collapse it

    • @peterbridge7519
      @peterbridge7519 6 месяцев назад

      Square the image.

    • @Mars-lx5wn
      @Mars-lx5wn 3 месяца назад

      make sure the .user-img css width matches the height.

  • @user-yz2ct2sy3l
    @user-yz2ct2sy3l 7 месяцев назад

    Do u plan doing that in react js it would be perfect. Also u can show method how to integrate these components irl projects.

  • @great.Indian.culture
    @great.Indian.culture 2 месяца назад +1

    Amazing sir 🎉🎉🎉 🙏🙏

  • @muhammadxuleman6460
    @muhammadxuleman6460 Год назад

    I am facing a problem. Whenever I add a space in the text of tooltip or the nav-item like "Add Question" the tooltip keeps shrinking even if I increase the width or som,ething it remain the same. Could you look into it

    • @odessa.ukraine
      @odessa.ukraine Год назад +1

      replace opacity: 0 to display: none and opacity: 1 to display: inline

  • @specialgroup-h8e
    @specialgroup-h8e Год назад

    dear sir , thanks so much for your effort 😊😊, need help for something if i need to move this project from left to right view , what i need to change in code

    • @geovanyhernandez8640
      @geovanyhernandez8640 Год назад

      In the sidebar styling, so .sidebar {...}, instead of having left: 0; do right: 0;
      Also, you will need to adjust all the other stylings to the right

  • @sharumathi4162
    @sharumathi4162 Год назад +1

    Nice and clean Explanation, thanks for your efforts

  • @Lets-Create-1
    @Lets-Create-1 3 месяца назад

    Nice explanation sir
    ❤thanks for sharing

  • @justkailash
    @justkailash Год назад

    you didnt mention when it will goes on mobile how it will behave?

  • @dev_ression
    @dev_ression 2 года назад

    Thank you for this bro!

  • @techtamil3180
    @techtamil3180 Год назад

    Not working collapse in bootstrap 5

  • @mudgalz
    @mudgalz Год назад

    In react app Tailwind css classes doesn't work when I pass through props in component as bgc="red" -> className={`bg-${props.bgc}-500`} but work if I pass whole class name like "bg-red-500"
    One more thing if I use cdn link of tailwind css then it works but not with installed tailwind css
    I've read somewhere that tailwind doesn't support dynamic classes it compile only given classes...
    What to do
    Please reply . . .

    • @Hacking-NASSA-with-HTML
      @Hacking-NASSA-with-HTML Год назад

      Just use cdn then if it works 🤷🙂

    • @mudgalz
      @mudgalz Год назад

      @@Hacking-NASSA-with-HTML but what if I've to build classes and at last when I will run npm build it will miss the undefined classes

  • @hugopinho9534
    @hugopinho9534 Год назад

    This is amazing! Really helped!!

  • @one_donreactions7128
    @one_donreactions7128 3 месяца назад

    fire and excellent Approach

  • @tarin6131
    @tarin6131 Год назад

    awesome video. saved my life

  • @Rohan-n5z
    @Rohan-n5z 11 месяцев назад +1

    Can you provide you code? (a.k.a what you wrote for your code)

    • @codecommerce
      @codecommerce  11 месяцев назад

      ah sorry, I'm not sure I saved this one..

    • @Rohan-n5z
      @Rohan-n5z 11 месяцев назад

      @@codecommerce If you can, can you follow what you did and do it?

  • @thomas_1611
    @thomas_1611 Год назад

    awesome video, thank you. One question: how can we make this sidebar sticky so that it is visible when you scroll the page?

  • @TshepoMokgoatjane
    @TshepoMokgoatjane 6 месяцев назад

    Hi guys, I'm having challenge here, I'm getting this error:
    Uncaught
    TypeError: Cannot set properties of null (setting 'onclick')
    After adding this code piece:
    let btn = document.querySelector('#btn');
    let sidebar = document.querySelector('.sidebar');
    btn.onclick = function () {
    sidebar.classList.toggle('active');
    };
    What could be the problem.

    • @Mars-lx5wn
      @Mars-lx5wn 3 месяца назад

      make sure the script block is inserted after the body end tag but before the end html tag . This way all the html elements will be loaded before the script.

  • @giorgiagdgomelashvili423
    @giorgiagdgomelashvili423 Год назад

    Great work 👏

  • @yahyamohamoud7290
    @yahyamohamoud7290 2 года назад

    Amazing stuff as always!

  • @oa2766
    @oa2766 5 месяцев назад

    Thank you for teaching me

  • @developerlayton
    @developerlayton 2 года назад

    Could you make a ecommerce shop from top to bottom with built in stripe api maybe? Nextjs and tailwindcss with the new 13v of nextjs with font optimization etc?

    • @JJ25Flo
      @JJ25Flo 2 года назад +1

      React > next js

    • @speedster784
      @speedster784 2 года назад

      @@JJ25Flo next js is a react framework my guy with alot more advantage over pure react. next js handles routing by default, increase SEO which helps to increase search index along and with many more stuff

    • @JJ25Flo
      @JJ25Flo 2 года назад

      @@speedster784 oh really, so you suggest someone who recently been building on react eventually transition to nextJS ?

    • @codecommerce
      @codecommerce  Год назад +1

      They are very similar. No need for react-router for multi-page apps when using NextJS. :)

  • @sdfsdsdsfsff
    @sdfsdsdsfsff Год назад

    user-img not vorking 😢

  • @mr_professor_x
    @mr_professor_x 5 месяцев назад

    Your explanations were very clear. Thank you! Can't wait to see more tutorials on your channel. ❤❤ Love from India..

  • @codebite590
    @codebite590 2 года назад

    Just think about you and notification drop

  • @rammah
    @rammah 2 года назад +1

    Nice keep going

  • @viniciusandrade4941
    @viniciusandrade4941 Год назад

    Thank you so muchhhh saved my life :D

  • @Fth.44
    @Fth.44 11 месяцев назад

    Çok teşekkür ediyorum sağ ol.

  • @juniorjose06
    @juniorjose06 Год назад

    Thank you so much!!

  • @lolilol.
    @lolilol. 11 месяцев назад

    dont you have a download pls ?

    • @Mars-lx5wn
      @Mars-lx5wn 3 месяца назад

      Clint answered that in this comment section somewhere that he didn't save the code.

  • @daltonrandall4348
    @daltonrandall4348 Год назад

    Where's the download?

  • @syauqihusin12
    @syauqihusin12 11 месяцев назад

    Id is not working anymore

  • @nahuelpiguillem2949
    @nahuelpiguillem2949 7 месяцев назад

    Thank you very much mannnn

  • @huuchinduu
    @huuchinduu Год назад +1

    source code?

  • @sonyman12
    @sonyman12 Год назад

    Great video as always! Any plans to do a Shopify development tutorial?

    • @codecommerce
      @codecommerce  Год назад +1

      I haven’t really, but I do have quite a bit of experience with Shopify.

  • @niteshprajapat7918
    @niteshprajapat7918 2 года назад

    youbare awesome.... ❤️🔥
    please bring big reactjs project which covers everysingle concept of reactjs 🔥

  • @timurturgunov7991
    @timurturgunov7991 2 года назад

    Very good bro

  • @njmust
    @njmust Месяц назад

    Source code plz.

  • @smawubay
    @smawubay Год назад +1

    tq, very helpfull

  • @mtsurov
    @mtsurov 2 года назад

    Good stuff. Its a sub.
    Lets see what other goodies you have on the channel.

  • @prashlovessamosa
    @prashlovessamosa Год назад +1

    Thank you

  • @hubesh716
    @hubesh716 2 года назад

    Plzz make ecommerce project in tailwind css with Redux toolkit plz bro becuz there is no ecommerce project in your channel so am waiting for your response

  • @JullianGeraldizo
    @JullianGeraldizo 9 месяцев назад

    8:11

  • @damsan7777
    @damsan7777 2 года назад

    Thank you!

  • @indraxios
    @indraxios Год назад +4

    source code please

  • @ghassenbeddouihech2657
    @ghassenbeddouihech2657 9 месяцев назад

    code source ?

  • @coderush24
    @coderush24 Год назад +2

    Hey bro, can you make a spaceX clone using ReactJS/NextJS and Tailwindcss/Material UI. It will be super challenging and fun 🤟🏻✌🏻

    • @codecommerce
      @codecommerce  Год назад +3

      Will do! They have an awesome site!

    • @coderush24
      @coderush24 Год назад

      @@codecommerce yes 👍🏻✌🏻

  • @elvinrossfabella692
    @elvinrossfabella692 Год назад

    @codecommerce, the .sidebar.active ~ .main-content is not working for me :")
    I hope you can explain more about the .sidebar.active.
    from my understanding, .notation is used to access class but this time, you have .active. so it's different

  • @helloworld4147
    @helloworld4147 10 месяцев назад

    This is not responsive right? There are not any media Querries used

  • @BurNJoE
    @BurNJoE Год назад

    salamat lods

  • @hugosantos8907
    @hugosantos8907 Год назад

    nice

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 года назад

    nice bro

  • @JJ25Flo
    @JJ25Flo 2 года назад

    Surprised there isn’t a project video about e-commerce given that your name is code commerce lol

    • @codecommerce
      @codecommerce  Год назад

      Haha funny - most ecommerce now days is styling within shopify, wordpress, or bigcommerce.. I guess I could do a theme with shopify or wordpress. :)

  • @nikebelias7527
    @nikebelias7527 Год назад

    Create a rubike's cube app

  • @sharifahmed1925
    @sharifahmed1925 Год назад

    Great to see html and css tutorials
    You can’t use tailwind if you don’t know how to use css so thank you very much 👍🏽

    • @codecommerce
      @codecommerce  Год назад +1

      Thank you Sharif. You’re 100% right. Tailwind would be difficult if you don’t first understand CSS.

    • @joaomendes8294
      @joaomendes8294 Год назад

      You cant use react if you dont know javascript
      People sometimes forget about the roots

  • @NJUGUNAJAMESKARIUKI
    @NJUGUNAJAMESKARIUKI 10 месяцев назад

    👌👌👌👌💪💪💪👍👍

  • @detective811
    @detective811 Месяц назад

    source code please

  • @Vedkumar-v2w
    @Vedkumar-v2w Год назад

    nice