Responsive Menu Navigation Using Only HTML & CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ม.ค. 2025

ความคิดเห็น • 204

  • @kratikagupta3395
    @kratikagupta3395 6 ปีที่แล้ว +12

    and the reason of late night comment is- i am still practising with the help of your videos

  • @kratikagupta3395
    @kratikagupta3395 6 ปีที่แล้ว +20

    bro, i have seen your first video of search button,and before the end of that video i subscribed your channel.. then i saw your other videos and i am really very impressed, u upload very cool content. thanks yar.

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

    Dude you're awesome, I currently developing a web but responsive menu is biggest problem to me. I had watched many videos, but your tutorial is happened correctly. Thank you Dude. Keep Coding 😊

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

    AMAZING. So simple, and the first time I really understood how to create a responsive navbar without bootstrap. This was EXACTLY what I was looking for. Thanks!

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

    Ugh it's like I know all those separate things, but putting them together from scratch and my brain just bluescreens.. :/
    Especially if it's just one element of many in a page. Oh well, that's why I watch these vids I guess, they've been a great help/template to get things going. Thanks and keep 'em coming!

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

    Continue ! your one of the best web designer on youtube

  • @jonathanpauluze
    @jonathanpauluze 6 ปีที่แล้ว +3

    It's easier to make responsive designs with frameworks (like bootstrap), but I liked your style using only HTML and CSS, amazing job. Congrats!

    • @DarkCodeOnline
      @DarkCodeOnline  6 ปีที่แล้ว

      welcome ♥

    • @sulthan_tripooly
      @sulthan_tripooly 6 ปีที่แล้ว

      Jonathan...
      framework like bootstrap causes to increase the load of the server..
      Try to responsive always by using @media query.

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

    You have a with no s but lots of s. Why use a ?

  • @Boatengn1prince
    @Boatengn1prince 6 ปีที่แล้ว +52

    Thank you a lot. You gave me an inspiration for coming back into programming world

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

      why did u leave? i sometimes wana stop it too

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

      any reason of your leaving of programming? can you share.............

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

      @@programmingmindset Most cases we are lost our patients, that's why most of people can't wanna do this....

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

      @Torres.etechprog ,🤣🤣🤣🤣 he was talking about patience...

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

      hmmmm who want food 🥓🥓🥓🥓🥓

  • @MithileshMusic92
    @MithileshMusic92 6 ปีที่แล้ว

    awesome , mastering HTML and CSS is what is left for me lately , i do in Node, PHP , React ,Angular but highly rely on some Framework for html and css , making your own is what i needed to actually write good react apps. as React doesnt use Jquery , integrating a theme is very painful. thank you for this :)

  • @samuelavril6548
    @samuelavril6548 6 ปีที่แล้ว +3

    I love this channel so muchhhhh. That i like the most its the simplicity. You made discover a real ove for coding. Thank you so much.

  • @rafnaf.zeljko
    @rafnaf.zeljko 5 ปีที่แล้ว

    Čovječe ti si legenda. BRAVO!!!

  • @neerajmahapatra5239
    @neerajmahapatra5239 5 ปีที่แล้ว +12

    You are awesome having great skills dude ...how you have learnt this ??..
    Really nice job.. You got a subscriber
    ...Make plenty of videos..😘😘

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

    I'm new to html/css. I really enjoyed your videos. :)

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

    Thanks for the video, it was very easy to follow and I got to learn a good amount of details for CSS.

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

    it works bro, thanks for your contribution

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

    100% working.
    It's cool...love it❤❤

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

    Loving this Chanel for real!❤

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

    I Like it very much, Thank you for all!

  • @МаксимПучко-ь9э
    @МаксимПучко-ь9э 3 ปีที่แล้ว

    Good job, Sir. Thanks for such videos!

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

    merci vos travaux sont magnifiques

  • @sharmaji3183
    @sharmaji3183 6 ปีที่แล้ว +2

    Thanks for this video lecture..from india..

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

    Thank you so much dark code you are amazing!!!😍

  • @يوسفحربيحربي-ذ4ث
    @يوسفحربيحربي-ذ4ث 4 ปีที่แล้ว

    hello, the The tag is not Supported in HTML5.

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

    Nice music I can really concentrate in learning how to code listening to that thanks.

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

    Hi everyone
    I'm a beginner in a web programming sphere and only learning the features of it. I wanted to ask what Mr.Darkcode did in 0:35 s and how to do this. Please dont be indefferent and help me please. Thank you very much

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

    Excelente vídeo amigo que energía (Y) ☺

  • @cs_patterson
    @cs_patterson 6 ปีที่แล้ว +2

    Great video. Thanks a lot

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

    Why are you not using CSS Flexbox or CSS Grid?

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

    Really helpful, danke schön!!

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

    THANKS BRO FOR THIS LIKEE AND SUBBBBBBBBBBBB THANKS MAN

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

    Thank you for all!

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

    Thank you, the video is great👍

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

    thank u sir 🙏🙏 very useful video

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

    That's incredible thank you and God bless you

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

    could you show how the menu would disappear if one of the links was clicked if this was a one page landing page site? if this is possible. New developer asking.

  • @ifindstuffformoney4685
    @ifindstuffformoney4685 6 ปีที่แล้ว +11

    Can you do like a background with some animations? Like letters falling or rising etc

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

    Fiz tudo como no vídeo mas assim que eu domínio a tela ela ainda fica com o menu aberto e não tem como fechar

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

    Thanks a lot for this valuabale video

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

    Hello DarkCode. It is a very elegant solution. Thank you. Did you find any browser limitations?

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

    Question - how can I get the menu to drop down from the top, instead of from the right please?

  • @adam-fj4zt
    @adam-fj4zt 6 ปีที่แล้ว

    Why does your menu hide at 6:05 when you make your screen device smaller ? You haven’t wrote anything in this way...
    I’m confused cause the rest are clear

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

      The menu is still there, it just gets pushed down and out of the header area due to restricted screen size. You can't see it when it moves down as the color of the menu text is white, so it blends in with the white background of the content area.
      Hope that helps :D

  • @thechef42
    @thechef42 6 ปีที่แล้ว

    How do you take and add a link to the Logo in the header ? To link the Logo to a page if someone can take and leave an example. Am wanting the Darkcode logo link to a different page. thanks in advance

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

    Hello one question:
    because when I add more phrases to the menu and i make responsive the letters come down of its position? how do I solve it?

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

    Man, please explain what have done with #chk on the media screen. I couldn't understand.

  • @Coding_Asmr_PraDev
    @Coding_Asmr_PraDev 6 ปีที่แล้ว

    Checkbox is at near the logo so do you checked it by on three dots

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

    Beautiful!

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

    Hey! this was an awesome video. Can please tell me how are you previewing index.html file inside atom editor (the side pane). I had tried and installed the package atom-html-preview but it only shows HTML file and does not link the CSS file. There's no issue in css or html or their linking, I've tested in browser. Can you please help me.

  • @victorgarcia-kk6zl
    @victorgarcia-kk6zl 4 ปีที่แล้ว

    Bro eres el mejor

  • @9gager87
    @9gager87 5 ปีที่แล้ว

    Can anyone please explain how he made the menu items disappear when the screen size is smaller? I would've used a media query, but this is some weird dark magic. HELP!

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

    Hey can you please help me to get a responsive website using html and css

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

    Hey, i got a background and a text on my front site and when i am using the menu on my phone the text on front site is on the menu...How can i do so that text is away when i use the menu?

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

    I like it thank you

  • @aragorn7015
    @aragorn7015 6 ปีที่แล้ว +5

    Learn how to use rem units, it helps a lot in doing responsive things ;d Or if you only aim for people who only use basic html and css, do so further ;D

  • @picowill
    @picowill 6 ปีที่แล้ว

    How do you do the slide thing to check if it works with different resolutions

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

    Awesome... Great menu

  • @kjd-q8i
    @kjd-q8i 5 ปีที่แล้ว

    i'm glad to see this channel ...i'll be back ????.... i'm not a Terminator...ha ha ha

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

    Can somebody explain the :checked selector and how it makes the menu appear when we click the icon

  • @s.y.h.4121
    @s.y.h.4121 5 ปีที่แล้ว

    Only the check box was shown but not my menu bars. Couldn't figure out why...I copied everything except Google fontawesome stylesheet.

    • @s.y.h.4121
      @s.y.h.4121 5 ปีที่แล้ว

      @@athallahfathur ok, we actually have to copy the first link of stylesheet href from Font Awesome first. It's the one DarkCode pasted under the meta name script. Here's the text:

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

    I really like this channel, I'm happy that i found this. Do you know any youtube channel that has similar style like this and also uses bootstrap 4?

  • @Min-fq7ew
    @Min-fq7ew 5 ปีที่แล้ว

    love ya!!

  • @ertugrulzone7861
    @ertugrulzone7861 6 ปีที่แล้ว

    Man Beauty !!
    Sir u have any course about Css ??

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

    Tengo un error... cuando doy clic en un enlace del me direcciona al que quiero ir, pero no se cierra la pantalla responsiva... me puedes ayudar?

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

      Es lo mismo para mí.

  • @dropofbeatboxers3741
    @dropofbeatboxers3741 6 ปีที่แล้ว

    why did i click "X" at

  • @ItsMe-fj1co
    @ItsMe-fj1co 5 ปีที่แล้ว +1

    What is this link? Can I use it also for my projects? Do I need a license?

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

    Finally got it!

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

    thanks a lot~ u really my hero ~~~~~

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

    Great Tutorial. But, I'am prefer create this with javascript. For projects is not cool create elements in the dom like this input hidden xD

  • @ИгорьГлазков-с1б
    @ИгорьГлазков-с1б 3 ปีที่แล้ว

    Thank you very much.

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

    So good!

  • @webcoder2583
    @webcoder2583 6 ปีที่แล้ว

    Thanks alot bro you are great

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

    What package to live preview you use in atom?

    • @emq578
      @emq578 6 ปีที่แล้ว

      atom.io/packages/atom-html-preview

    • @nozomipowerxxx2446
      @nozomipowerxxx2446 6 ปีที่แล้ว

      @@emq578 How to download?

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

    How can I set, that when I click an anchor, the menu will disappear ?

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

    i
    I couldn't get these dots to appear on my web page. I did the same exact thing until 2:15 min

  • @21thTek
    @21thTek 4 ปีที่แล้ว

    Excelent !!

  • @HossamKhalaf-sr1oo
    @HossamKhalaf-sr1oo 6 ปีที่แล้ว +1

    Lm3alem ,, u can add " hidden" in html of input>checkbox .. or it wil interfer with other thing?

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

    Very nice thanks

  • @snipe5730
    @snipe5730 6 ปีที่แล้ว +8

    I wish I was good like you. 😔

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

    Youre awesome 👌

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

    Would you make this responsive menu with menu dropdown, sir?. Please help me

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

    when i trying on mobile view its not responsive, its responsive only while zoom on desktop view

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

    Hi, your patreon is active?

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

      yes

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

      @@DarkCodeOnline ok, thanks i think I support you for you awesome work

    • @DarkCodeOnline
      @DarkCodeOnline  6 ปีที่แล้ว +2

      @@mikadini88 thank you brother ♥♥

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

      @@whoisain1370 thank you ♥♥

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

    Thanks very much :3

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

    awesome job

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

    May i request Responsive Menu Navigation with Submenu. thanks

  • @prakash655
    @prakash655 6 ปีที่แล้ว

    *Awesome 😊*

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

    can i do this also without font?

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

    Thank you a lot. Can you make video on hamburger menu using bootstrap4

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

    Very nice🤩

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

    Thank You

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

    Hello Dark Code, please, why can't i see the menu

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

    does this still work in 2020?

  • @growthahead1403
    @growthahead1403 6 ปีที่แล้ว

    Hi bro how display view in right bar.

  • @anilanandachakrabortty1416
    @anilanandachakrabortty1416 6 ปีที่แล้ว

    wao perfect design

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

    I wish I was good like you

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

    Man u r too good

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

    I can’t show hide menu btn and show menu btn why

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

    is it much easier using javascript?

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

    Thank you😍

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

    Design is good & responsive but instead of playing the background song, you should explain the code why you are using it. It would be much better then.