How to Create the Side Navigation Bar Using HTML and CSS | Vertical Navigation Bar

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

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

  • @nbdcbn
    @nbdcbn 5 лет назад +44

    Music made me sleep, but was relaxing. Absolutely great presentation of a how -to. I mean there was no talking and the cursor guided me so well I didnt need any voice-over. Thank you so much!

  • @joshman1019
    @joshman1019 4 года назад +4

    This was amazing. I usually hate tutorials with no voice-over, but this was exactly what I needed. Very well done.

  • @abulkalamazad6022
    @abulkalamazad6022 5 лет назад +14

    I like the way you code, very simple and modular. Anyway, the background music was so relaxing

  • @lowercaseguy3578
    @lowercaseguy3578 4 года назад +7

    Nice choice of music.... my heart felt so relaxed.

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

    I loved this! I started making an electron app and this is what I needed to help me get started as an amaeture.

  • @paulv20
    @paulv20 5 лет назад +20

    I love this tutorial! Clean and simple. Gave me good idea for the side bar for my personal website. Thank you :D

  • @monsterguys8279
    @monsterguys8279 5 лет назад +2

    Thanks buddy .. it was the best and the background music wasn't noisy .. really grateful for that ..
    May God bless you 💫

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

    This video was really helpful! Music was chill and you didn't even have to explain a lick for me to understand:)

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

    Thank you for making your music relaxing. I can't stand coding vids with hectic music

  • @dinoxhai
    @dinoxhai 3 года назад

    This guy deserves more likes and subs Nive tutorial simple and easy
    Thanks for the tutorial, btw The music made it better

  • @GITANO_COSMICO
    @GITANO_COSMICO 4 года назад +2

    thanks a lot, you explain a lot with no words. just what i needed.

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

    You have saved my carrier, thank you 😉

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

    Im probably late to the party, but it was really useful, thank you for the clarity!

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

    great video- really helped me develop this element of my first website. Thank you!

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

    Thank you so much for this video. It cleared all my doubts. Thanks alot

  • @caya7
    @caya7 4 года назад +1

    Thank you so much, this video helped me a lot and clarified me many doubts, very helpful!

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

    Relaxing music and awesome tutorial! Thank you very much

  • @LeeMin-ho26
    @LeeMin-ho26 9 месяцев назад +1

    Thank you so much for the source code.

  • @nasrisami17
    @nasrisami17 4 года назад +1

    Why did you use display: flex on the .wrapper class in CSS ? What does it add to the overall design ?

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

    Its really helpful
    Make more videos like this please

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

    this was so clear thank u so much

  • @DeveloperYogii
    @DeveloperYogii 3 года назад

    Amazing video and very clean code.

  • @abdallahjabermohamad3147
    @abdallahjabermohamad3147 3 года назад

    thank you so much for this amazing tutorial ..

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

    very helpfull video best i came across. my question can you please show how to make sub menus as well. real beginner here

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

    hey sir , i had problem when i put color it doesn't work ? in body and wrapper

  • @ebin4711
    @ebin4711 4 года назад +1

    From where can i get the code for making this whole thing?

  • @Wood-16
    @Wood-16 4 года назад +2

    instead of can you also put to create the navigation bar?

    • @CodingMarket
      @CodingMarket  4 года назад +1

      Han you can use the html5 new tags

  • @salimmbise3454
    @salimmbise3454 4 года назад

    Thanks for great tutorial buddy!!

  • @axelltejada6265
    @axelltejada6265 3 года назад

    Thanks a lot for this tutorial !

  • @haideetanglao1251
    @haideetanglao1251 3 года назад

    Please help. I followed your tutorial, and then i add bootsrap link and then it messed up the design. What should i do to fix this without removing the bootstrap, because i need its features in the content.
    Sorry im just a beginner

  • @yeetpizza7452
    @yeetpizza7452 3 года назад

    what plugins do you have on to allow for the li*7>a and that to work

  • @matheussjusttino
    @matheussjusttino 4 года назад +1

    Awesome job, Thanks so much!

  • @marekgrandepene385
    @marekgrandepene385 3 года назад

    Can i ask why is there position relative on wrapper ? thanks.

  • @tauabn
    @tauabn 4 года назад

    Amazing! Trully. + Subbed

  • @ВалераГолуб-ы7я
    @ВалераГолуб-ы7я 4 месяца назад

    I just started learning html css and I thought it was mandatory to use , , , , but I see that there is only , is this really allowed?

    • @CodingMarket
      @CodingMarket  4 месяца назад +1

      It's not a mandatory but u should learn how to use divs.. And learn both ways it would be helpful to you.

  • @bellsnow2386
    @bellsnow2386 3 года назад

    Amazing. Thankyou for this! U got New sub here! ❤️ I'll make admin dashboard. Thanks for this!

  • @fardinhasanshuvo
    @fardinhasanshuvo 3 года назад +1

    ✨The intro tho... ✨

  • @smile4992
    @smile4992 4 года назад

    5:27 I saw your code is
    .wrapper {
    display: flex;
    }
    I came up with a different way.
    .sidebar {
    position: fixed;
    width: 300px;
    }
    .main-content {
    margin-left: 300px;
    }
    What's the difference? Does these 2 codes work the same?

    • @CodingMarket
      @CodingMarket  4 года назад +2

      Hi, flex is to float the sidebar and main content side by side. Then I am fixing the sidebar using position fixed. When we use the position absolute or fixed these elements move out from the context. So the main content goes behind the sidebar. Then we have to use margin left to make the main content visible

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

    how do i make the text in the center i copied correctly but the text is at the bottom

  • @promiseoneh3538
    @promiseoneh3538 3 года назад

    Thanks,very explanatory

  • @isishavoc
    @isishavoc 3 года назад

    I'm a student and a beginner on this coding stuff, so I have a question: why does he use and adds the class instead of using , , , etc.?

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

      I would say that it is just a preference of only using divs

  • @gustavocaballero2954
    @gustavocaballero2954 22 дня назад

    Muy Bueno... Excelente....!!!!

  • @yusufabdullahiabdulrafiu4409
    @yusufabdullahiabdulrafiu4409 4 года назад

    Wow! Thank you so much. This video was really helpful 👏👊👍👌

    • @CodingMarket
      @CodingMarket  4 года назад +1

      Watch this video as well it may help you
      ruclips.net/video/Ihwqun_HmXs/видео.html

  • @SwatiSharma-ql9jj
    @SwatiSharma-ql9jj 5 лет назад

    I need to create to do list app using HTML and CSS only.So, how can I make this app as gmail inside page type.

  • @SwarnimBharatDesh
    @SwarnimBharatDesh 4 года назад

    I want to display all the menu list item of side menu bar from data base. How will do it.

  • @rinreborn7364
    @rinreborn7364 4 года назад

    why inside the menu doesnt have stuff? thats what i need to know

  • @johnsnow8608
    @johnsnow8608 3 года назад

    you probably notice me but i hopy you can help me in that how can i add if anyone sees this pls help how can i add a footer, as well as pictures in violet are where the links are and also is the link on the side be immovable?

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

    How can I add a dark mode and make it responsive?

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

    Thanks man!!

  • @Newbie0341
    @Newbie0341 4 года назад

    About this tutorial your work was awesome. But You should give ur voice when u are making the tutorial. It will be helpful for us

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

    Is it responsive page ?? Bootstrap

  • @marcelyna9513
    @marcelyna9513 4 года назад

    bro, i want to ask u. why yeah, my simbol not detect in my laptop?

  • @raffysoriano8394
    @raffysoriano8394 4 года назад

    how can i add background images besides the navigation bar?

  • @xanScorp
    @xanScorp 4 года назад

    Just one key point left out. If one want the link to open in the section to the right retaining the sidenav.

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

    how can I find the script src ı cant get it

  • @armitaarashesteghamat1424
    @armitaarashesteghamat1424 4 года назад

    How do you change the rightside content by clicking on a menu?

    • @CodingMarket
      @CodingMarket  4 года назад

      Create different html pages and link those pages in the anchor tags..

  • @collinsjimu6142
    @collinsjimu6142 4 года назад

    hello am collins all the way from zimbabwe ... bro this is great but am having a challenge ...i included bootstrap as this dashboard nw using it as my navigation bar dashbord bt cz i included bootstrap the toggle item now not workin when i click it my screen now turning white blank white rather than togglin

  • @DingoDingKumai
    @DingoDingKumai 3 года назад

    Is it responsive?

  • @anonymouscybersecurity4423
    @anonymouscybersecurity4423 3 года назад

    Mute the sound. and play music natively. Require the sound for if the instructor is speaking on the tutorial however the instructor doesn't speak yet plays irrelevant music which sometimes don't always like the style.

  • @kishoregautam1096
    @kishoregautam1096 3 года назад

    Why .sidebar class is used under .wrapper class, we could have used .sidebar class directly, I mean what is the benefit we are getting of using .sidebar inside .wrapper

    • @CodingMarket
      @CodingMarket  3 года назад

      Ya we can use.. It's according to developers convenient. That's it

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

    all these videos on youtube without making the sidebar(map, bloc,contact us) clickable???
    please make a video about it

  • @satyasrideviful
    @satyasrideviful 4 года назад

    What is name of the code editor? And I saw li*7>a doesn't work on sublime text. I am new to web development.

    • @CodingMarket
      @CodingMarket  4 года назад +1

      You have to install Emmet plugin in sublime Text editor.

    • @satyasrideviful
      @satyasrideviful 4 года назад

      @@CodingMarket thank you

  • @marcfrancisgomolon9311
    @marcfrancisgomolon9311 5 лет назад

    Hi, in order for me to put content on home, do i need to make another html file for the home? or can i make within one same html file. Thank you

    • @CodingMarket
      @CodingMarket  5 лет назад

      It's depending on website u wants to build. If u want a site with multiple pages then u have to create separate html files then link them in each.

    • @nempal6288
      @nempal6288 4 года назад

      Create submenu also like click on home submenu should appear..pls

  • @zodixh3543
    @zodixh3543 5 лет назад

    i have a 18' 1366x768 display and the sidebar goes under the windows bar :(

  • @reborngames2900
    @reborngames2900 4 года назад

    Is it responsive like for mobile screens?

    • @CodingMarket
      @CodingMarket  4 года назад +1

      ruclips.net/video/jN0TJ5k_Sps/видео.html
      Check out this video..

  • @ShabariVidya
    @ShabariVidya 4 года назад

    Awesome

  • @narayananp8976
    @narayananp8976 4 года назад

    Fantastic

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

    you just save me 🤯🙏

  • @eddykagia4212
    @eddykagia4212 3 года назад

    Thanks for this

  • @textingwithme3354
    @textingwithme3354 3 года назад

    I loved this at first but when I went to code pen to download it it was bad cos you can't copy the cas codes

  • @jiyaullhaq3454
    @jiyaullhaq3454 4 года назад +4

    14:53 I woke up here

  • @soymamm99
    @soymamm99 5 лет назад +1

    heyy man! thanks for this! ... but i need help, i need to change the main_content background, how i do it¿

  • @sixmasimango5769
    @sixmasimango5769 5 лет назад

    I'm looking for a vertical mega menu bootstrap. Please help!

  • @suminshakya5067
    @suminshakya5067 4 года назад

    Its awesome

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

    how to know that what to write in script tag

  • @creatorz6739
    @creatorz6739 3 года назад

    thanks brother !

  • @ARandomGuyOG
    @ARandomGuyOG 4 года назад

    Nice

  • @maximilianoweihmuller298
    @maximilianoweihmuller298 4 года назад

    Gracias por tu video y explicacion es justo lo que necesitaba.-

    • @CodingMarket
      @CodingMarket  4 года назад

      ruclips.net/video/Ihwqun_HmXs/видео.html

  • @rommeljohnsevilla7535
    @rommeljohnsevilla7535 3 года назад

    Thank u so much!

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

    Thankyou so much

  • @vaibhavbhatnagar9865
    @vaibhavbhatnagar9865 3 года назад

    very useful thanks

  • @fact_bd87
    @fact_bd87 5 лет назад

    Does it work for responsive sidebar menu?

    • @CodingMarket
      @CodingMarket  5 лет назад +1

      Check out my latest 2 videos on responsive sidebar menu.. It may help you

  • @Am10YaKTv
    @Am10YaKTv 4 года назад

    it didn't work for me. The problem was(which I solve) you have yo add height:auto, width:auto to h2 and ul li items. otherwise h2 will take full page then you can't see ul li items.

  • @JohannSuarez
    @JohannSuarez 3 года назад

    I need to know the ambient music, PLEASE!!

  • @liamdavis492
    @liamdavis492 5 лет назад +7

    that intro was so extra

  • @CapstoneDavao
    @CapstoneDavao 5 лет назад

    It is sticky?

    • @CodingMarket
      @CodingMarket  5 лет назад

      ruclips.net/video/i33jEZdXyF0/видео.html
      Refer this video

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

    Amei👏🏼👏🏼👏🏼

  • @estebanacostamartinez4296
    @estebanacostamartinez4296 3 года назад

    love this

  • @khairumoncatar3246
    @khairumoncatar3246 5 лет назад

    THANKS DUDE !

  • @VENOMGaming-oj5xu
    @VENOMGaming-oj5xu 3 года назад

    Nice content. it would be great if you add subtitles

  • @KaranKumar-md7xs
    @KaranKumar-md7xs 2 года назад

    Thanks bro

  • @yard2x637
    @yard2x637 5 лет назад

    Can somebody tell me why u need a wrapper?

    • @CodingMarket
      @CodingMarket  5 лет назад

      Hi wrapper is the custom class i used, if u want u can use some there class.

    • @yard2x637
      @yard2x637 5 лет назад

      @@CodingMarket i dont understand what you mean. Do you need a wrapper or not?

    • @CodingMarket
      @CodingMarket  5 лет назад

      Ya you need

  • @muhib9246
    @muhib9246 4 года назад

    Great

  • @fairoseparveenmohamedmohid201
    @fairoseparveenmohamedmohid201 5 лет назад

    Hi, i can't click the menu

  • @delta619
    @delta619 4 года назад

    i slept in a minute , the song in the background

  • @jasperyambao7932
    @jasperyambao7932 3 года назад

    the soundtrack came from the move 'The Social Network'(Story of How Mark Zuckerberg build facebook')

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

    Merci de bien vouloir activer les sous-titre automatique car je suis sourd...

  • @abusalehridoy8258
    @abusalehridoy8258 4 года назад

    where is the responsive part of this tutorial?

  • @attilafuresz5329
    @attilafuresz5329 3 года назад

    It s responsive?

    • @CodingMarket
      @CodingMarket  3 года назад

      ruclips.net/video/Ihwqun_HmXs/видео.html
      Check out this for responsive

  • @NareshSharma02
    @NareshSharma02 5 лет назад

    Your HTML code is not semantic at all, and also there are some conceptual issues in CSS also.