Awesome accordion menu using only HTML & CSS

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

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

  • @Sidhant__
    @Sidhant__ 6 ปีที่แล้ว +242

    For web developers this is satisfying video.👍

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

    I didn't know :target selector till I've watch this video. This is magic.

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

    Althought it's a very bad practice stylize the universal selector (*) with the params you gave I'll keep in mind that is only for the end purpose of this tutorial: the use of the :target pseudo selector. That said why are you using with no ?

  • @NatHollings
    @NatHollings 6 ปีที่แล้ว +125

    That's awesome. never seen the :target before.

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

    Loved simplicity in your design...(I love material design)

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

      @@georgesears1615 ?

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

    I found that channel today , on my recomandation , and i really like your style , and i'm your new subscriber .

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

    I've not even started watching this video but I know it's great. Thanks man

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

    I liked replacing the :target with :hover, it has a nice effect... Anyways, nice video, truly awesome stuff you did here!

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

      Yeah its quicker and easier to use ;/

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

      that's right, except the target one, it will close again , thanks

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

      agree, target just open the smenu

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

    Your code episdodes are lascinating and very educational.
    Thanks you very much for all your work, thanks to you i have uderstood and written some cool portfolio pages much aesier and more effectively.
    Greetings :)
    P.S.
    I Can't wait for MOREEE !!!! :) :D

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

    This is the best. U deserve more subs with this education content.

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

    I ryl love your videos im always like 'holy shit that's genius'
    I'm the definition of beginners and allways when I watch your videos I just want move my ass and do smt too I ryl love HTML / CSS (can't say smt about JavaScript php etc never learned)
    your videos just make my love stronger xD

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

    Wow! An absolut artist! This kind of video are really awesome,

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

    You are a hero... Good part of css

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

    now thats what i call creative but simple! love you bro!

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

    I make most of your projecylts from your videos
    They look awesome
    Thanks
    Keep up the good work please

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

    My only favourite web developer you only broo... You thief my heart!!

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

    Thank you for the video. Great skills! Keep the videos coming

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

    Awww man from where did you learned this. I am a big fan of your CSS and a subscriber too

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

      you can also see here, how i create Another Awesome Accordion with html , css and javascript (
      th-cam.com/video/APcGa1TBSIA/w-d-xo.html

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

    Thank you very much! This was amazing!!

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

      th-cam.com/video/bTtzjaYPXMs/w-d-xo.html

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

    1mil sub soon. Geniussss

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

    Amazing Video.. Saw many tutorials but this one was amazing..as this worked

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

      you can also see here, how i create Another Awesome Accordion with html , css and javascript (
      th-cam.com/video/APcGa1TBSIA/w-d-xo.html

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

    Simple and effective... good job, very useful ^^ Didn't know about the :target, like many others in this comment section :D Thx!

  • @mysteriouswindamv4340
    @mysteriouswindamv4340 6 ปีที่แล้ว +14

    OMG!!! So cool!

  • @gorbulevsv
    @gorbulevsv 6 ปีที่แล้ว +10

    Спасибо, отличное видео!

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

    Awesome content, clean design, easy to follow and understand, keep it up.

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

    briliant dude, love your workflow

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

      th-cam.com/video/bTtzjaYPXMs/w-d-xo.html

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

    WTF!!! Congrats. Perfect and awesome vid!!

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

    Looks nice, but it would be better to use for top-level items. This way :target would not be occupied.

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

    amazing dude you are awesome. You just won a subscriber

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

    One more valuable video.THank you

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

    this channel worth more than 1mil subcribers
    thanks for the video :>

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

    Seriously man, u r darn awesome!
    Do u get this by practicing or u combining/shuffling a whole lot of stuff u know together?

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

      th-cam.com/video/bTtzjaYPXMs/w-d-xo.html

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

    Siempre se aprende algo nuevo, no sabia sobre los target y ahora estoy emocionado de cuantas cosas podre hacer jeje, gracias.

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

      th-cam.com/video/bTtzjaYPXMs/w-d-xo.html

  • @RanaAhmed-ny4jl
    @RanaAhmed-ny4jl 3 ปีที่แล้ว

    That was really Awesome💙

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

    Congrats, 8,6K Subs, love from Turkey 🤗😃

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

    Great! Today i learn :target

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

    Thank you, this was very instructive. Is there a way to prevent the menu from collapsing once you click on a submenu item?
    Edit: I figured it out. If anyone is interested, one simply has to implement the rule in the .item:target .submenu {} selector in a .submenu:focus-within{} selector.

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

    Amazing ! Thank you very much ! :D

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

    Wow great video sir by developer

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

    Great video ! But I have a question. I programmed this sidebar into my Website but everytime I open one of the categories my window scrolls all the way up to the category or even further. How can I fix that ? Thx in advance

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

    U r just nailing it 👏👏👏👏👏👏👏

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

    Its Helpful Bruh!. Thanks

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

    Hello, could you please share the text editor you are using? Thanks in advance. Love your videos!

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

    De Colombia, gracias es muy bueno nav.

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

    Wow that was so easy !!! thanks brah!!!!!!

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

    It is a really nice one. Especially, it is very useful for admin panel designing. However, if you click again on the same btn (ex: profile) it is not closing the menu which is open. in other words, it is not taking height back to 0px.

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

      Ye, to do it u need some js

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

    You are simply amazing

  • @thienhung-19o46
    @thienhung-19o46 6 ปีที่แล้ว +2

    Your clip so perfectly .thank you so much

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

    Man this is so satisfying

  • @SonuKumar-eh1dz
    @SonuKumar-eh1dz 5 ปีที่แล้ว

    Video is great learning and which editor is this one..

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

    Awesome video...Which IDE you are using ???#DarkCode

  • @baolongchau8062
    @baolongchau8062 6 ปีที่แล้ว +13

    One more this style but have submenu with three levels. Thank you. Have a nice day. 😊

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

      I don't think :target on its own is usable for three nested levels. A level 2 item is only visible while its level 1 parent is the target. As soon as a level 2 item is clicked it becomes the target, so the level 1 item is no longer the target, so the level 2 item will be hidden so you'll never see the level 3 items

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

    Nice, I love the atom code editor

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

    U r very gifted man

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

    What ide r u using.
    By the way this is awesome.

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

    amazing work man

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

    Can you add logo on the top for this accordion menu and social links on the bottom?....

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

    verz nice tuts and all is ok. i tested it.

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

    Lovely ... Thanks for share

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

    wow..amazing menu with html & css only....

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

    Please make a video about downloading the software which you are using . It's my request to you

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

    Awesome css trick...
    Thank...

  • @aob-q
    @aob-q 6 ปีที่แล้ว +1

    Awesome page. Keep it up bro

  • @សុងចាន់ថន-ព7ឡ
    @សុងចាន់ថន-ព7ឡ 6 ปีที่แล้ว +3

    so good .hello from cambodia

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

    Amazing.
    What is the editor that you use, pleasm?

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

      Pleas

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

      @@snm_51 Atom editor. To view the HTML preview use one of the Atom plugins that can be downloaded from within the program.

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

      @@okiseeyou Whats the name of that plugin ??

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

      @@gagan8158 atom-html-preview

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

    Great work ❤️

  • @AbbasZaidi-in
    @AbbasZaidi-in 6 ปีที่แล้ว

    Hi.. very nice video. what editor u r using ?

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

    Very cool! What is the plugin for the HTML autocomplete from the CSS-like typing?

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

    awesome job !! i appreciated

  • @MH-re6sy
    @MH-re6sy 4 ปีที่แล้ว +1

    pleade make a video on visual studio setup or post on facebook about it

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

      you can also see here, how i create Another Awesome Accordion with html , css and javascript (
      th-cam.com/video/APcGa1TBSIA/w-d-xo.html

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

    hola amigo quiero saber porque no puedo crear mas sub menus de los tres que tu tienes diseñados

  • @UMERFAROOQ-cl2nd
    @UMERFAROOQ-cl2nd 5 ปีที่แล้ว

    Good work sir

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

    Hello I am Brazil. I would like to know how to make the drop down menu close when the mouse is not in the menu. I do almost that, but when I hover over the menu, it opens the clicked tab. I would like everything to go to the initial state when the mouse was not over it. Do you have any idea how to do this?

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

    perfect, thank you very much!

  • @mralberdi-l6760
    @mralberdi-l6760 5 ปีที่แล้ว

    When I click on a button to activate the submenu, the whole page scrolls down until that button is on the top of the page. So for each click in the button for the submenu, I have to scroll up the page. Sorry, any idea for the page to stay up?

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

    Awesome bro! :)

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

    Very fantastic. I first time watch this tutorial and subscribe your channel. I request to you please make a video on attendance system with jquery ajax php MySQL.

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

      you want him to do your fucking homework ???

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

    Please a calculator interface asking you 2nd time you are the best in the world.
    Thank You

  • @is-hakambarouk2397
    @is-hakambarouk2397 5 ปีที่แล้ว

    This is awesome i like it B-)

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

    Wats it u using for text editing...?

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

    5:32 color:white the background of the box is white

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

    It's very beautiful but there is background music problem

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

    your channel is very good ( I like your channel )

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

    hello bro i have two website on blogger and i use different costom tamplate on my both site
    and my one website tamplate have allredy sticky sidebar with working mobile or pc
    but another website tamplate have no Sticky sidebar , i see some videos thay giving us sticky sidebar coad but the coad not working parfactly on mobile or footer area hide when i use that coad,
    so can you help me please

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

    Great work!

  • @AbhishekKumar-mq1tt
    @AbhishekKumar-mq1tt 6 ปีที่แล้ว

    Thank u for this awesome video

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

    I created everything that you showed, but I did not get the appropriate end. Style.css is not been linked to the html document. Please help me.

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

      Raj Khedekar
      You need to link it in the html
      Using see in google for more tutorials

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

    y si tiene mas sub menu -- como 3 niveles se pueden aplicar igual?

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

    What addon are you using the right of the movie?

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

    good nice man, what's the name of tools ? of site ... ?

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

    Its amazing...😍😍

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

    fantastic job

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

    Great Work! I would be great if you put your work on CodePen !

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

    All that beautiful code and then
    D'ont forgget subscribe !

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

    Very good, liked

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

    hello I have run my exercise but it gives me a problem, when I click on the links I compare in the address bar the link clicked eg www.com.com/#anchor I would not want to give it to appear and then delete all that that there is no more header on the type menu?

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

    How do you preview your project in that side window in Atom

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

    Amazing 😍❤
    I want learn the language HTML AND CSS.
    some advice to deepen? meanwhile, I subscribe to your channel

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

    What is music in video? Thanks!

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

    Can you transform this into a normal horizontal menu if you want to scale up from a mobile view?