Awesome accordion menu using only HTML & CSS

Подписаться 330 тыс.

Просмотров 442 тыс.

50% 1

◘ Join our group in facebook : / 70490. .
◘ Like our page : / darkcode0
◘ Paypal Donation Link : paypal.me/YBen...
◘ Download Files From Here : goo.gl/8BiHuK
◘ Music Name : Lost Sky - Dreams [NCS Release]
◘ Music Link : • Lost Sky - Dreams | Tr...

Опубликовано:

15 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 385

@Sidhant__ 5 лет назад

For web developers this is satisfying video.👍

@ogulcankoyun7086 5 лет назад

not only for web developer * - *

@abdullah1536 3 года назад

why not

@memequery 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bTtzjaYPXMs.html

@smile_score6473 2 года назад

yop :D

@gencproyazilim 4 года назад

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

@oanasilviu1749 5 лет назад

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

@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 5 лет назад

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

@antlasgmd1469 5 лет назад

me too i never seen it

@foreverandadave 5 лет назад

Same... and I've been doing this shit for YEARS!

@youropinioncomment 5 лет назад

me too..

@sooth6295 4 года назад

same here

@darrkyt 4 года назад

Yup

@mohammadrehan9445 5 лет назад

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

@zxxczczczcz 5 лет назад

@@georgesears1615 ?

@suryaanshsingh9283 4 года назад

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

@ousssikavf4276 4 года назад

you can also see here, how i create Another Awesome Accordion with html , css and javascript ( ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-APcGa1TBSIA.html

@Stevesteacher 5 лет назад

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

@patricknally1177 5 лет назад

Yeah its quicker and easier to use ;/

@qurosty992 5 лет назад

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

@akhwanstudio 5 лет назад

agree, target just open the smenu

@ogulcankoyun7086 5 лет назад

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

@simonkalu 5 лет назад

You are a hero... Good part of css

@martinkarugaba 4 года назад

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

@Gabsolam 5 лет назад

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

@gvacja 5 лет назад

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

@ahmdaeyz 5 лет назад

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 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bTtzjaYPXMs.html

@sayanbanerjee1047 5 лет назад

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

@bbart9628 4 года назад

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

@amiralirazi7142 5 лет назад

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

@mysteriouswindamv4340 5 лет назад

OMG!!! So cool!

@santhoshk2145 5 лет назад

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

@gorbulevsv 5 лет назад

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

@RoamingRebel 4 года назад

One more valuable video.THank you

@raulhernanromeroherrera2547 4 года назад

De Colombia, gracias es muy bueno nav.

@dcmbassi 5 лет назад

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.

@saeiko7930 5 лет назад

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

@TejpalNakul 5 лет назад

Wow great video sir by developer

@SamuelPfleumerSami 6 лет назад

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

@Taran0FF 5 лет назад

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

@winterburn3010 5 лет назад

1mil sub soon. Geniussss

@palomacarbajal 4 года назад

Thank you very much! This was amazing!!

@memequery 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bTtzjaYPXMs.html

@thienhung-19o46 5 лет назад

Your clip so perfectly .thank you so much

@BlueCrystal1996R 5 лет назад

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

@bapimajhi1559 5 лет назад

It's very beautiful but there is background music problem

@LearnwithAnas 5 лет назад

U r very gifted man

@ParthPatelITO 5 лет назад

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 3 года назад

Ye, to do it u need some js

@zentranian 3 года назад

Its Helpful Bruh!. Thanks

@baolongchau8062 5 лет назад

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

@youoldguy 5 лет назад

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

@bayuyudhasaputra3169 4 года назад

Awesome css trick... Thank...

@UMERFAROOQ-cl2nd 5 лет назад

Good work sir

@locphucinh6160 4 года назад

Great! Today i learn :target

@sha07geek 5 лет назад

Awesome

@tuzemec410 5 лет назад

Very cool.

@javierquiroga6774 5 лет назад

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

@biocode9814 6 лет назад

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

@DarkCodeOnline 6 лет назад

Thankyou =)

@georgesears1615 5 лет назад

Your mom got love from Ghana.

@manjinderrahal1147 5 лет назад

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

@klingermatheus9098 5 лет назад

Man this is so satisfying

@georgesears1615 5 лет назад

That's what your mom said.

@user-wt3xo8sl3c 5 лет назад

so good .hello from cambodia

@AyushmanJha 4 года назад

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

@ousssikavf4276 4 года назад

you can also see here, how i create Another Awesome Accordion with html , css and javascript ( ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-APcGa1TBSIA.html

@noone-gr4is 4 года назад

Genius!

@macieserenity1596 5 лет назад

Awsome!

@SyedMuzammilMahasanShahi 5 лет назад

Lovely ... Thanks for share

@najamsaqib7978 5 лет назад

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

@HaitemPatchou 5 лет назад

amazing dude you are awesome. You just won a subscriber

@ASHOKYADAV-jk9zy 5 лет назад

really awesome

@youssefmaia8051 5 лет назад

Very good, liked

@hieubui3411 5 лет назад

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

@greg7987 5 лет назад

It's super cool

@mohammedsayeed330 5 лет назад

You are simply amazing

@s.sriramprasath7156 5 лет назад

awesome

@koshinkosenki7691 5 лет назад

briliant dude, love your workflow

@memequery 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bTtzjaYPXMs.html

@malitialitia434 4 года назад

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

@sourishdutta9600 5 лет назад

Wow man !!!! Thanks

@nikolastosic9102 5 лет назад

You are awesome !

@andrejpetnuch8194 5 лет назад

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

@bayuyudhasaputra3169 5 лет назад

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

@hamalmedia1329 5 лет назад

Amazing

@Jwaana 5 лет назад

Amazing ! Thank you very much ! :D

@DarkCodeOnline 5 лет назад

welcome ♥

@Jwaana 5 лет назад

😁

@diputhechief5498 5 лет назад

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

@bareerakhan7569 5 лет назад

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

@DarkCodeOnline 5 лет назад

thank you =)

@mauweb1797 5 лет назад

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

@memequery 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bTtzjaYPXMs.html

@RanaAhmed-ny4jl 3 года назад

That was really Awesome💙

@imsalvatoremod5548 5 лет назад

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

@loriszurmuhl7622 4 года назад

It looks so easy...

@Kodegems 5 лет назад

amazing work man

@zeez1811 5 лет назад

Thank you I really enjoy your content but your background music is so distracting if you can choose something calmer or just dim the voice down a little bit

@pandutechintelugu526 5 лет назад

Good

@jlyctoiiib6989 5 лет назад

cool

@satishksharma 5 лет назад

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 5 лет назад

you want him to do your fucking homework ???

@jeffreynwankwo7912 5 лет назад

Great video

@krishnachaitanya4268 4 года назад

Yes

@gizmo-ds 5 лет назад

cool!

@amadoubaui 5 лет назад

thank you very much very nice

@karanb2067 5 лет назад

genius

@rullymartanto824 5 лет назад

Awesome !!!!!!!!!

@NotOnLand 4 года назад

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

@leslieaikpe7762 6 лет назад

fantastic job

@gregorychamekh8143 4 года назад

perfect, thank you very much!

@dudeguy7927 5 лет назад

Nice, I love the atom code editor

@shivarammuthukumaraswamy7164 4 года назад

Thank you so much

@syediqbalahmed3176 4 года назад

nice ...

@moazelsawaf2000 5 лет назад

Great work ❤️

@zahidislam4925 5 лет назад

Thanks

@alexeliz2167 5 лет назад

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

@SonuKumar-eh1dz 5 лет назад

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

@sajidrehman1496 5 лет назад

Outstanding

@imaby.k 4 года назад

very helpful bro thnxx

@ousssikavf4276 4 года назад

you can also see here, how i create Another Awesome Accordion with html , css and javascript ( ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-APcGa1TBSIA.html

@marvelfighter523 4 года назад

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

@carlos126q 4 года назад

nice! thanks !

@ousssikavf4276 4 года назад

you can also see here, how i create Another Awesome Accordion with html , css and javascript ( ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-APcGa1TBSIA.html