Sidebar Menu using HTML & CSS

Поделиться
HTML-код
  • Опубликовано: 11 окт 2019
  • Sidebar Menu using HTML CSS
    In this video, I have shown you how to create a Sidebar Menu using HTML CSS
    NOTE: Nowadays that font awesome link I provided not support so your icon may not be showing. Please use the latest CDN link which you can easily find on Google or go to the download link and just copy/paste the codes.
    Hire me on Fiverr
    www.fiverr.com/prakashahi
    Sidebar Menu with Submenu using HTML & CSS
    ➤ • Sidebar Menu with sub-...
    Responsive Navigation Menu using HTML & CSS
    ➤ • Responsive Dropdown Me...
    Download Codes From Here (You may have to search the title of this video there) - codingnepalweb.com
    Second Channel - bit.ly/3aHNkru
    My Code Editor - • Best Text Editor for H...
    Facebook - / coding.np
    Instagram - / coding.np
    Music Credit:
    Track: Rival x Cadmium - Seasons (feat. Harley Bird) [NCS Release
    Music provided by NoCopyrightSounds.
    ➤ Watch: • Rival x Cadmium - Seas...
    Track: TULE - Fearless pt.II (feat. Chris Linton) [NCS Release]
    Music provided by NoCopyrightSounds.
    ➤ Watch: • Lost Sky - Fearless pt...

Комментарии • 1 тыс.

  • @CodingNepal
    @CodingNepal  4 года назад +95

    If you like this video. Please remember to Subscribe to this Channel 😃

    • @ZullyanTama
      @ZullyanTama 4 года назад +3

      Thanks this works . can u make tutorial html tabel or form? I will like if you make this one

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

      Visit channel I've already uploaded many videos about it

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

      Can't download the source code please send it for me albertkudaya@gmail.com

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

      Thanks 😘

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

      How to add dropdown menu?

  • @TheBleakill
    @TheBleakill 3 года назад +4

    Muchisimas gracias por este tutorial, me acabas de ayudar demasiado, nuevamente mil gracias eres un crack tienes un nuevo suscriptor te felicito por este gran trabajo , por la calidad y lo facil que haces ver algo tan dificil.

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

    A great video! You spoke nothing, but we could understand much more in it than in other tutorials... Just awesome!

  • @aditheppruekpitakpong3847
    @aditheppruekpitakpong3847 4 года назад +19

    This is great and you recorded step by step in an easy way to understand and follow. Thank you :)

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

      Thank you 💙.... Keep watching

  • @pranavchanpara3576
    @pranavchanpara3576 3 года назад +13

    Omg! You replied to every single comment,
    Such a nice human being

  • @th3maniatico
    @th3maniatico 4 года назад +10

    mis respeto tenes un nuevo sub.

  • @thorasgardian2075
    @thorasgardian2075 7 месяцев назад +2

    Its my beginning of learning html and css and your videos are really helpful for me thankx for sharing❤️

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

    Actually, this is my first favourite tutorial on RUclips.. Man, you are really amazing.
    Good Luck with more videos

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

    Very easy and simple... very good, no lengthy coding - keep up the good job

  • @DavidAshby1
    @DavidAshby1 4 года назад +3

    Great tutorial and easy to follow. Keep it up!

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

      Thank you... Keep supporting :)

  • @paradox987
    @paradox987 3 года назад +2

    You are such a live saver brother. I from India. I was searching for this and what i got , OMG ! Really You and your skills are Amazing . Love from India.

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

    thank you very much partner, your tutorial helped me solve a complex problem that I was having with my new sidemenu. props to you!

  • @witzkvn
    @witzkvn 4 года назад +11

    Hi ! Thanks for the amazing tuto ! :) I tried it and I rather put the
    label #nav-open,
    label #nav-close{
    position: fixed;
    }
    So if we got a big website, the navbar buttons are always on the left and don't scroll up with the rest of the webpage. But that's a detail :)
    Nice tuto easy to understand tho :D

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

      Thank you so much 💙

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

      You're my savior, this is what I just wanted
      thank you so much !

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

      can you explain a bit more please? should i make a new label in html named nav?

  • @chrissy-ef9to
    @chrissy-ef9to 4 года назад +6

    Thank you thank you thank you sooo much for this tutorial🔥🔥😁
    PS: the song is actually nice... I don't know why people are complaining... Jeep the good work up...

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

    I think this is the first channel to provide explanation with source thanks dude

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

      Thank you.. Stay tuned 😁

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

      @@CodingNepal sure and I will help you to get subscribers too

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

    Love you soo much.
    Khushi lago ki koi ta nepal bata pani yesto kam gardo raicha
    Thank you my brother you made me cry

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

      You're welcome bro.. Stay tuned 😁

  • @neiladriangomez
    @neiladriangomez 4 года назад +3

    funny that it took me an hour to finish a single part of this sidebar. really have to learn the basic before i proceed to the advance web developmeny

  • @AWP85
    @AWP85 4 года назад +3

    thank you for your content , it make me can study more in design web

  • @diego.777ramos
    @diego.777ramos 3 года назад +1

    Genial trabajo , te quedo bien hasta con la música de fondo 👍. Te ganaste un sub

  • @Azaniqbal-wk7bk
    @Azaniqbal-wk7bk 5 месяцев назад

    Very impressive and easily explains everything.It's very helpful for me .Thanks. Keep it up.😍

  • @aletheiajak6373
    @aletheiajak6373 3 года назад +4

    Dear Coding Nepal: Thank you so much!

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

      You're welcome.. Stay tuned 😁

  • @nicolecmoucheron
    @nicolecmoucheron 4 года назад +3

    Thank you!!, this was very helpful. Have a good one :)

  • @36_parthshrimali84
    @36_parthshrimali84 3 года назад +1

    background music- You Came Into My life Just Like another Season... superrbb... explanation with sup song...

  • @AmanKumar-cc6ye
    @AmanKumar-cc6ye 5 месяцев назад

    Thank you very much for this informational video. Helped me a lot. May your channel grow more. Praying for your success. ❤❤

  • @ZyncInteractive
    @ZyncInteractive 3 года назад +3

    Just what I was looking for. Love your tutorials mate.

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

      Thanks mate.. Stay tuned 😁

  • @douglaslisboa9
    @douglaslisboa9 4 года назад +8

    Legal, estava procurando algo assim para praticar

  • @bharatchavhan7723
    @bharatchavhan7723 4 года назад +3

    I just love 😍 your work ...

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

    I tried this and at last I did it. Thanks for uploading the video

  • @user-hy8pl5en4j
    @user-hy8pl5en4j 4 года назад +3

    It will be better if you were put a overflow on the background, when you activate the slidebar.. rgba(0,0,0, .something) you know!

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

      Yes...It'll also awesome...

  • @PabG77
    @PabG77 3 года назад +6

    Great tutorial, I just have a question. How would it be possible for the side menu to stay when the links actually have a target? I mean, for example, when clicking on "dashboard" to have a "dashboard.html" page display at the right and to keep the sidebar in the same page. should I use framename on tags? I'm sorry, If you have a tutorial about this, it would be awesome. Thanks for sharing!

    • @CodingNepal
      @CodingNepal  3 года назад +3

      I already made a video on it - ruclips.net/video/_wZYf68j4GM/видео.html

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

    At first i thought - that for sure it's going to be fake, but when i coppied the code and pasted it on my code editor i realized that i was wrong. Great toturial CodingNepal - thereby further

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

      Thank you... Keep watching our videos.

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

      Can u send code as pssible

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

    Hey I am from Guatemala and wanna thank you!!! You rock man!

  • @setforweb
    @setforweb 4 года назад +3

    Видео понравилось, автору спасибо за контент!

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

      Thank you...keep watching :)

  • @jhonchino1018
    @jhonchino1018 3 года назад +5

    Its a good video, I hope you'll get more likes than you have

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

    Wonderful!!! CSS deployment handled well🥳.. Thanks

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

    Thanks bro for clearing my concepts
    Love you bro❤️❤️

  • @chrisife5124
    @chrisife5124 3 года назад +5

    best side nav without javascript, amazing

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

      Thank you 💙😁.. Stay tuned.

  • @aishwaryanagare6018
    @aishwaryanagare6018 3 года назад +3

    Nice tutorial..
    But I tried the same code.. Still the lines after dashboard are not executing..
    What's wrong here?

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

      Please download files from description link or recheck your codes.. You may did some mistakes.

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

    In short words... "amazing", I gave like! u are the besttttttt

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

    My best coder i respect you guys

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

    Good morning my brother I want help from you, I have project college, I want to use html and css but I can’t, can you help me

  • @alexgts1234
    @alexgts1234 3 года назад +3

    Hello, does anyone know how to have this navbar open by default at the opening of the page? Thank you :)

    • @CodingNepal
      @CodingNepal  3 года назад +2

      Just add checked attribute on input tag in html file.
      Like this

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

    Have tried it..Came very well.more to see😍😍💯

  • @codepraycode
    @codepraycode 2 года назад +2

    Cool, Now I can do this without Javascript. Thank You❤

  • @niyonkurubertrand6147
    @niyonkurubertrand6147 4 года назад +3

    I love also the music 🙂

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

    Which software are you using for this program editing?

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

      atom.io

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

      @@prakash655 thanks bro

    • @user-hy8pl5en4j
      @user-hy8pl5en4j 4 года назад +1

      There are more text editors such as visual studio code, Sublime text, atom, DreamWaver and Notepad ++.

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

    Thank you so much dear I was searching for this from last 1 week😘😗

  • @user-uj6uu3md5l
    @user-uj6uu3md5l 2 года назад +1

    Hey, this is a great video, but I have a little problem, hope you can help me.
    Actually, I've completed all you've done in this video, and it successed.
    However, when I add a link about bs5 in my html, there's big padding(or margin?) on my page.
    And I've tried many ways to solve it (like add padding-top 0 in my style)
    but they didn't work...

  • @darksecret6050
    @darksecret6050 3 года назад +7

    I love how he puts the z-index 1111 for no reason

    • @CodingNepal
      @CodingNepal  3 года назад +2

      Haha 😂 but there is used of zindex.

    • @darksecret6050
      @darksecret6050 3 года назад +2

      @@CodingNepal yaa but u didn't have to put it 1111

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

      Z-index will keep the cancel button on top of the side bar instead of under it, so that you can click it to take the side bar back inside.

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

    hi. i already download the codes but it's not working. Can you help me?:))

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

      Send me your code on my fb page link in the description

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

    You make it look very easy. Thanks!..

  • @user-pc4he2ze7m
    @user-pc4he2ze7m Год назад

    just waouhhhh! thanks for this wonderful tuto you are the best.

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

    Sencillamente genial. Muchas gracias

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

    kada yar yei khojirako thiye dherai dherai dhanyabad

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

      Thank you 💙... Hamro aru videos ni hernu hola help garne xw.

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

    Thk you it's really helps me

  • @Victor-sr5vx
    @Victor-sr5vx 3 года назад +1

    muy buen tutorial amigo :D me gusto el diseño.

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

    Thanks Man to providing this concept using checkbox it's made my day...go ahead

  • @user-rt2fm4cp1
    @user-rt2fm4cp1 5 месяцев назад

    Very easy to understand and follow. Thank you :)

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

    thank u bless god u for all ur info about html and css

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

    👏👏👏👏👏👏 está genial saludos desde Bogotá Colombia.

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

    It is a great teaching, thank you, now I am a new subcriber of your channel.

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

    Wow!!!!! It's Amazing..... you helped me the what i was looking for *****Thank you so much*****

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

      You're welcome.. Stay tuned 😁

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

    Awesome, transitions look amaizing!!

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

    That’s pretty cool you done amazing job 👏👏

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

    nice video keep it up bro love from your big brother INDIA

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

      Thank you bro.. Stay tuned 😁

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

    Thanks a lot man..helps me a lot.

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

    very useful video..thank you

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

    Proud bro to being nepali.❤️❤️

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

    Great learn a lot from you ❤️❤️

  • @socialcover
    @socialcover 8 месяцев назад +1

    with respect thank you for teaching us
    but after past the link from cdn i,con is not display til now

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

    Muito bom, saudações do Brasil!

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

    in fact
    you are amazeee
    god bless you

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

    This videos is very helffull.Thank You Sir

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

    Thank you endlessly 💓

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

    Thanks a lot. Love from #Bangladesh.

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

      You're welcome... Stay tuned 😁

  • @masanjajunior3097
    @masanjajunior3097 10 месяцев назад +1

    Thank for the good video. It waa really helpful. But how did you make your image appear? Mine doesn't appeat, can someone please help me out, am stuck o this

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

    Awesome design, thanks for the help mate!!!!! Got any alternatives to fontawesome?? Thanks in advance

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

    thank you so much it was made so easy to understand and study with. thank you

  • @HardeepSingh-oi7sk
    @HardeepSingh-oi7sk 3 года назад

    Hi, your video is awesome and it helped me alot! I have just one question, i want the menu bar at right side of my page and you have done everything for left side. I did exaclty same and wherever you put left, i put right but only the menu is on the right but the buttons are on the left. How can i do that can you please help me with that?????

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

    Love❤ from srilanka 🇱🇰

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

    Awesome bhai🔥🔥🔥🔥👍 well done and good job

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

      Thank you bro.. Stay tuned 😁

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

    Thank you this video was really helpful for me. 🙏🏻🎊🥳🍻

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

    Thanks for this tutorial sir. I like this.

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

      Your welcome 💙... Keep watching and supporting

  • @user-yx5vv7wv5k
    @user-yx5vv7wv5k 3 года назад +1

    Love you bro do this video a lot and upload your Chanel pls i flw you all video 🤗

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

      Thank you bro.. Stay tuned 😁

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

    you are the best,keep it up

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

    Amazing and I love your work 😍

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

    thank you!!ありがとう!^ ^

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

    This is a very good video. big-up.

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

    Subscribe done, my fav web dev

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

      Thank you 💙... Keep watching

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

    Good work brother with a nice explanation..... Thank You

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

    Thanks this tutorial. Grate job.. i like learn more css tips.

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

    Thanks for this Tutorial sir amazing

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

    Great tutorial ! and I am also subscribe this for new tutorials.

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

    Ramroo xa bro
    Keep going ...

  • @AshrafulIslam-or1bu
    @AshrafulIslam-or1bu 4 года назад +1

    Amazing man!
    Which app do you use in terms of recording screen

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

    Such a life saver🎩🎩🎩🎩 📴 to you Sir

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

    great in simple..... keep it up bro....

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

    easy peasy
    Thanks!👍👍

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

    damn, such a beauty . . . . superb!

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

    Muchas gracias, me sirvió mucho