Create A Sidebar Menu using HTML & CSS | Sidebar Menu in HTML & CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ธ.ค. 2024

ความคิดเห็น • 1K

  • @CodingNepal
    @CodingNepal  5 ปีที่แล้ว +97

    If your icons aren't showing, replace the line no.8 script of index.html with this:

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

  • @pranavchanpara3576
    @pranavchanpara3576 4 ปีที่แล้ว +15

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you.. Stay tuned 😁

  • @mukeshlekhrajani3454
    @mukeshlekhrajani3454 2 ปีที่แล้ว +5

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

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

  • @aletheiajak6373
    @aletheiajak6373 4 ปีที่แล้ว +4

    Dear Coding Nepal: Thank you so much!

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว +1

      You're welcome.. Stay tuned 😁

  • @beproductive1864
    @beproductive1864 4 ปีที่แล้ว +1

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว +1

      Thank you.. Stay tuned 😁

    • @beproductive1864
      @beproductive1864 4 ปีที่แล้ว

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

  • @okordieerickson2783
    @okordieerickson2783 4 ปีที่แล้ว +7

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

  • @elizabethbonilla5514
    @elizabethbonilla5514 4 ปีที่แล้ว +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  4 ปีที่แล้ว

      You're welcome bro.. Stay tuned 😁

  • @aditheppruekpitakpong3847
    @aditheppruekpitakpong3847 4 ปีที่แล้ว +17

    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

  • @thorasgardian2075
    @thorasgardian2075 ปีที่แล้ว +1

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

  • @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 3 ปีที่แล้ว +1

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

    • @stefiaiulian8652
      @stefiaiulian8652 11 หลายเดือนก่อน

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

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

  • @AWP85
    @AWP85 4 ปีที่แล้ว +3

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

  • @baibhabchakraborty266
    @baibhabchakraborty266 2 ปีที่แล้ว +1

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

  • @TheBleakill
    @TheBleakill 4 ปีที่แล้ว +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.

  • @WPSSandaruwan
    @WPSSandaruwan 2 ปีที่แล้ว +1

    Love❤ from srilanka 🇱🇰

  • @chrisife5124
    @chrisife5124 4 ปีที่แล้ว +5

    best side nav without javascript, amazing

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you 💙😁.. Stay tuned.

  • @ForCodingInterview
    @ForCodingInterview 4 ปีที่แล้ว +1

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you.. Stay tuned 😁

  • @jhonchino1018
    @jhonchino1018 4 ปีที่แล้ว +5

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

  • @aadikhemlani4394
    @aadikhemlani4394 3 ปีที่แล้ว +1

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

  • @DavidAshby1
    @DavidAshby1 5 ปีที่แล้ว +2

    Great tutorial and easy to follow. Keep it up!

    • @CodingNepal
      @CodingNepal  5 ปีที่แล้ว

      Thank you... Keep supporting :)

  • @36_parthshrimali84
    @36_parthshrimali84 4 ปีที่แล้ว +1

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

  • @nicolecmoucheron
    @nicolecmoucheron 4 ปีที่แล้ว +3

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

  • @vijayachandana8485
    @vijayachandana8485 3 ปีที่แล้ว +1

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

  • @ZyncInteractive
    @ZyncInteractive 4 ปีที่แล้ว +3

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thanks mate.. Stay tuned 😁

  • @codepraycode
    @codepraycode 3 ปีที่แล้ว +2

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

  • @douglaslisboa9
    @douglaslisboa9 4 ปีที่แล้ว +8

    Legal, estava procurando algo assim para praticar

  • @dondieggito1931
    @dondieggito1931 3 ปีที่แล้ว +1

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

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      Happy to help!

    • @neer2532
      @neer2532 3 ปีที่แล้ว

      AVC programming

  • @th3maniatico
    @th3maniatico 4 ปีที่แล้ว +10

    mis respeto tenes un nuevo sub.

  • @motivationandjoy3916
    @motivationandjoy3916 4 ปีที่แล้ว +1

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you bro.. Stay tuned 😁

  • @darksecret6050
    @darksecret6050 4 ปีที่แล้ว +7

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว +2

      Haha 😂 but there is used of zindex.

    • @darksecret6050
      @darksecret6050 4 ปีที่แล้ว +2

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

    • @Joelymusik
      @Joelymusik 2 ปีที่แล้ว

      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.

  • @aurgon_42121
    @aurgon_42121 4 ปีที่แล้ว +1

    Awesome creation.....

  • @setforweb
    @setforweb 5 ปีที่แล้ว +2

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

    • @CodingNepal
      @CodingNepal  5 ปีที่แล้ว

      Thank you...keep watching :)

  • @anmolsaxena4134
    @anmolsaxena4134 4 ปีที่แล้ว +2

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you bro.. Stay tuned 😁

  • @rohitpatil7168
    @rohitpatil7168 5 ปีที่แล้ว +4

    Which software are you using for this program editing?

    • @prakash655
      @prakash655 5 ปีที่แล้ว +3

      atom.io

    • @rohitpatil7168
      @rohitpatil7168 5 ปีที่แล้ว +1

      @@prakash655 thanks bro

    • @متععقلك-خ4خ3ظ
      @متععقلك-خ4خ3ظ 5 ปีที่แล้ว +1

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

  • @bojacksworldwideweb
    @bojacksworldwideweb ปีที่แล้ว

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

  • @niyonkurubertrand6147
    @niyonkurubertrand6147 4 ปีที่แล้ว +3

    I love also the music 🙂

  • @theparten
    @theparten 4 ปีที่แล้ว +2

    you are the best,keep it up

  • @bigfatcrab
    @bigfatcrab 4 ปีที่แล้ว +5

    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

  • @متععقلك-خ4خ3ظ
    @متععقلك-خ4خ3ظ 5 ปีที่แล้ว +2

    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  5 ปีที่แล้ว +2

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

  • @Azaniqbal-wk7bk
    @Azaniqbal-wk7bk ปีที่แล้ว

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

  • @PabG77
    @PabG77 4 ปีที่แล้ว +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  4 ปีที่แล้ว +3

      I already made a video on it - th-cam.com/video/_wZYf68j4GM/w-d-xo.html

  • @FOOODIEE686
    @FOOODIEE686 ปีที่แล้ว

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

  • @aishwaryanagare6018
    @aishwaryanagare6018 4 ปีที่แล้ว +3

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว +1

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

  • @bhavikdevswifter4592
    @bhavikdevswifter4592 3 ปีที่แล้ว +1

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

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Contact me on Instagram

  • @azeemjawaid3885
    @azeemjawaid3885 2 ปีที่แล้ว

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

  • @alexgts1234
    @alexgts1234 4 ปีที่แล้ว +3

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว +2

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

  • @rajeshmgr
    @rajeshmgr 4 ปีที่แล้ว +1

    Proud bro to being nepali.❤️❤️

  • @epicslaplike4312
    @epicslaplike4312 4 ปีที่แล้ว +3

    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

  • @shamimsarker839
    @shamimsarker839 4 ปีที่แล้ว +1

    Thanks a lot. Love from #Bangladesh.

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      You're welcome... Stay tuned 😁

  • @AmanKumar-cc6ye
    @AmanKumar-cc6ye ปีที่แล้ว

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

  • @nikhilsatkar6827
    @nikhilsatkar6827 4 ปีที่แล้ว +1

    Your coding skills help us

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you.. Stay tuned 😁

  • @bharatchavhan7723
    @bharatchavhan7723 4 ปีที่แล้ว +3

    I just love 😍 your work ...

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you :) keep watching

  • @huffwill3387
    @huffwill3387 4 ปีที่แล้ว +2

    Thanks from Nepal.

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Your welcome from Nepal 🇳🇵

    • @huffwill3387
      @huffwill3387 4 ปีที่แล้ว +1

      @@CodingNepal can you recommend for full web development.........I'm learning it ...

  • @malithmadushan3199
    @malithmadushan3199 4 ปีที่แล้ว +1

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

  • @rochidzwachester8723
    @rochidzwachester8723 3 ปีที่แล้ว

    My best coder i respect you guys

  • @waqasferoz98
    @waqasferoz98 2 ปีที่แล้ว +1

    This very helpful 👍
    Music 🎶 so good

    • @CodingNepal
      @CodingNepal  2 ปีที่แล้ว

      Glad it was helpful!

  • @iamhtmldeveloper
    @iamhtmldeveloper 4 ปีที่แล้ว +1

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      You're welcome bro 💙😁

  • @ahmedrashed5567
    @ahmedrashed5567 4 ปีที่แล้ว +1

    in fact
    you are amazeee
    god bless you

  • @williamkakooza4603
    @williamkakooza4603 6 วันที่ผ่านมา

    Thanks Professor CodingNepal

  • @isramardiofficial5237
    @isramardiofficial5237 4 ปีที่แล้ว +2

    Tank's very much brother👍🏻

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      You're welcome brother... Stay tuned 😁

  • @sgr2683
    @sgr2683 4 ปีที่แล้ว +1

    Each and every line of code use is clearly visible that's why it's a great video for me 👍😍😍

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you.. Stay tuned 😁

  • @tejasswami7624
    @tejasswami7624 3 ปีที่แล้ว

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

  • @krisztianszabo9404
    @krisztianszabo9404 4 ปีที่แล้ว +1

    Awesome, transitions look amaizing!!

  • @muhammadalvinalvaryzi530
    @muhammadalvinalvaryzi530 4 ปีที่แล้ว +1

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

  • @rehanurrahmanraihan6053
    @rehanurrahmanraihan6053 4 ปีที่แล้ว +1

    Subscribe done, my fav web dev

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you 💙... Keep watching

  • @divyanshusah2809
    @divyanshusah2809 3 ปีที่แล้ว +1

    You are awsome Bro....🥰💗

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      Thank you so much 😀

  • @argenisperezacuna1532
    @argenisperezacuna1532 4 ปีที่แล้ว +1

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

  • @Serlinhla
    @Serlinhla 4 ปีที่แล้ว +1

    Hi dear ,thanks you so much for uploading this video ...

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      You're welcome... Stay tuned 😁

  • @taoufiqaitouaba2923
    @taoufiqaitouaba2923 4 ปีที่แล้ว +2

    Great job broo continue 🔥🔥

  • @mohamedesba5810
    @mohamedesba5810 4 ปีที่แล้ว +1

    thank you very much, i just build my first website

  • @mahadihasan8067
    @mahadihasan8067 4 ปีที่แล้ว +1

    you are just awesome!!!!
    I think if you explain by speaking instead of background music... Actually music hampers my concentration.

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      I'm really sorry for that.. I'll add my voice in upcoming videos.. Stay tuned

  • @adivyarani3204
    @adivyarani3204 4 ปีที่แล้ว +1

    such a clear understandable video

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you.. Stay tuned 😁

  • @humbertolopez1012
    @humbertolopez1012 4 ปีที่แล้ว +1

    Congratulations very useful and detailed tutorial

  • @user-rt2fm4cp1
    @user-rt2fm4cp1 ปีที่แล้ว

    Very easy to understand and follow. Thank you :)

  • @MariatùShùki
    @MariatùShùki ปีที่แล้ว

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

  • @eeedrisable
    @eeedrisable 4 ปีที่แล้ว +1

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

  • @samjones9415
    @samjones9415 4 ปีที่แล้ว +2

    I like this video so much,I will hit the button Subscribe!

  • @niyonkurubertrand6147
    @niyonkurubertrand6147 4 ปีที่แล้ว +2

    That’s pretty cool you done amazing job 👏👏

  • @UmarMajeed04
    @UmarMajeed04 4 ปีที่แล้ว +1

    Amazing and I love your work 😍

  • @WillyBoy75
    @WillyBoy75 2 ปีที่แล้ว

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

  • @ankitrawat659
    @ankitrawat659 4 ปีที่แล้ว +1

    Great learn a lot from you ❤️❤️

  • @awaisrehman7873
    @awaisrehman7873 4 ปีที่แล้ว +1

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      You're welcome.. Stay tuned 😁

  • @surajsurvase1126
    @surajsurvase1126 3 ปีที่แล้ว

    This videos is very helffull.Thank You Sir

  • @user-yx5vv7wv5k
    @user-yx5vv7wv5k 4 ปีที่แล้ว +1

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

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you bro.. Stay tuned 😁

  • @DanielStanlyInterianoRapalo
    @DanielStanlyInterianoRapalo 3 ปีที่แล้ว

    You make it look very easy. Thanks!..

  • @shubhamkohli7719
    @shubhamkohli7719 4 ปีที่แล้ว +2

    I really loved it💕💕

  • @abuhaydar
    @abuhaydar 4 ปีที่แล้ว +1

    The video was great for learning. Brother is learning a lot but not getting proper guidelines. please helf me ..

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว +1

      How can I help you brother..?

    • @abuhaydar
      @abuhaydar 4 ปีที่แล้ว

      @@CodingNepal Brother, give me a suggestion so that I can be a good web developer. Please brother

  • @ajitkamble8929
    @ajitkamble8929 4 ปีที่แล้ว +1

    Best explanation

  • @dahoyasmine2248
    @dahoyasmine2248 3 ปีที่แล้ว

    Thank you endlessly 💓

  • @shivamseth4586
    @shivamseth4586 4 ปีที่แล้ว +1

    Amazed
    Which software u r usin?

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Atom... Check description I've made video about it.

  • @socialcover
    @socialcover ปีที่แล้ว +1

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

  • @llg.7377
    @llg.7377 4 ปีที่แล้ว +1

    Very helpful 🙂

  • @rhshoumik5139
    @rhshoumik5139 4 ปีที่แล้ว +1

    good job bro. You are awesome.

  • @SpadeyW
    @SpadeyW 4 ปีที่แล้ว +2

    i need a online course which teaches all about css in depth

  • @faruk5836
    @faruk5836 4 ปีที่แล้ว +1

    subcribed and liked. how long did it take u to be really good in webdevelopment?

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      Thank you bro... I think 1 yr.

  • @diego.777ramos
    @diego.777ramos 4 ปีที่แล้ว +1

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

  • @constancembaya1089
    @constancembaya1089 4 ปีที่แล้ว +1

    I like your work and I was following you step by step but my page ended up linked.

    • @CodingNepal
      @CodingNepal  4 ปีที่แล้ว

      I didn't understand

    • @constancembaya1089
      @constancembaya1089 4 ปีที่แล้ว

      Sorry, everything just disappeared, before the end .