Awesome accordion menu using only HTML & CSS
HTML-код
- Опубликовано: 19 дек 2024
- ◘ 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...
I didn't know :target selector till I've watch this video. This is magic.
For web developers this is satisfying video.👍
not only for web developer
* - *
why not
ruclips.net/video/bTtzjaYPXMs/видео.html
yop :D
That's awesome. never seen the :target before.
me too i never seen it
Same... and I've been doing this shit for YEARS!
me too..
same here
Yup
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 ?
Loved simplicity in your design...(I love material design)
@@georgesears1615 ?
I found that channel today , on my recomandation , and i really like your style , and i'm your new subscriber .
I've not even started watching this video but I know it's great. Thanks man
This is the best. U deserve more subs with this education content.
You are a hero... Good part of css
I liked replacing the :target with :hover, it has a nice effect... Anyways, nice video, truly awesome stuff you did here!
Yeah its quicker and easier to use ;/
that's right, except the target one, it will close again , thanks
agree, target just open the smenu
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
now thats what i call creative but simple! love you bro!
Wow! An absolut artist! This kind of video are really awesome,
Thank you very much! This was amazing!!
ruclips.net/video/bTtzjaYPXMs/видео.html
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
My only favourite web developer you only broo... You thief my heart!!
De Colombia, gracias es muy bueno nav.
Siempre se aprende algo nuevo, no sabia sobre los target y ahora estoy emocionado de cuantas cosas podre hacer jeje, gracias.
ruclips.net/video/bTtzjaYPXMs/видео.html
1mil sub soon. Geniussss
briliant dude, love your workflow
ruclips.net/video/bTtzjaYPXMs/видео.html
Спасибо, отличное видео!
I make most of your projecylts from your videos
They look awesome
Thanks
Keep up the good work please
Awww man from where did you learned this. I am a big fan of your CSS and a subscriber too
you can also see here, how i create Another Awesome Accordion with html , css and javascript (
ruclips.net/video/APcGa1TBSIA/видео.html
Thank you for the video. Great skills! Keep the videos coming
Amazing Video.. Saw many tutorials but this one was amazing..as this worked
you can also see here, how i create Another Awesome Accordion with html , css and javascript (
ruclips.net/video/APcGa1TBSIA/видео.html
Awesome content, clean design, easy to follow and understand, keep it up.
That was really Awesome💙
Simple and effective... good job, very useful ^^ Didn't know about the :target, like many others in this comment section :D Thx!
One more valuable video.THank you
U r just nailing it 👏👏👏👏👏👏👏
WTF!!! Congrats. Perfect and awesome vid!!
amazing dude you are awesome. You just won a subscriber
Wow great video sir by developer
Amazing ! Thank you very much ! :D
welcome ♥
😁
Great! Today i learn :target
Its Helpful Bruh!. Thanks
this channel worth more than 1mil subcribers
thanks for the video :>
You are simply amazing
Man this is so satisfying
That's what your mom said.
amazing work man
Your clip so perfectly .thank you so much
Wow that was so easy !!! thanks brah!!!!!!
Nice, I love the atom code editor
Amazing.
What is the editor that you use, pleasm?
Pleas
@@snm_51 Atom editor. To view the HTML preview use one of the Atom plugins that can be downloaded from within the program.
@@okiseeyou Whats the name of that plugin ??
@@gagan8158 atom-html-preview
One more this style but have submenu with three levels. Thank you. Have a nice day. 😊
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
OMG!!! So cool!
perfect, thank you very much!
Lovely ... Thanks for share
verz nice tuts and all is ok. i tested it.
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.
Ye, to do it u need some js
U r very gifted man
so good .hello from cambodia
Looks nice, but it would be better to use for top-level items. This way :target would not be occupied.
Good work sir
Awesome page. Keep it up bro
Great work ❤️
Awesome css trick...
Thank...
Congrats, 8,6K Subs, love from Turkey 🤗😃
Thankyou =)
Your mom got love from Ghana.
awesome job !! i appreciated
Very good, liked
fantastic job
Great work!
Video is great learning and which editor is this one..
You are awesome !
Awesome video...Which IDE you are using ???#DarkCode
It is Atom editor
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.
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
That's perfect and amazing
Hello, could you please share the text editor you are using? Thanks in advance. Love your videos!
Seriously man, u r darn awesome!
Do u get this by practicing or u combining/shuffling a whole lot of stuff u know together?
ruclips.net/video/bTtzjaYPXMs/видео.html
Very cool! What is the plugin for the HTML autocomplete from the CSS-like typing?
It's called Emmet
wow..amazing menu with html & css only....
Please a calculator interface asking you 2nd time you are the best in the world.
Thank You
thank you =)
Thank u for this awesome video
really awesome
Very cool.
Hi.. very nice video. what editor u r using ?
he's using atom
Outstanding
Its amazing...😍😍
This is awesome i like it B-)
What ide r u using.
By the way this is awesome.
Great Work! I would be great if you put your work on CodePen !
It's very beautiful but there is background music problem
5:32 color:white the background of the box is white
thank u for your amazin toturial , i was looking for it baaad , i just have one question about :target ,in 9:00 why did u give id to item not the s menu div ? i tried to give the id to smenu and didnt go well , i am a little lost , why dose this code not work :
html :
......
CSS:
smenu:tagert{
max-height=10em;
}
ids are unique for each element. each item like a parent with children has a specific id that is targeted to reveal the children (profile, message etc). Now div smenu being one of the children has siblings e.g Posts, Pictures. If you want to link further to Post or Pictures etc, you need a unique id for each sibling or each element in the div smenu. If you need to open a webpage in this way, you will need to add the href="#" to the a tag for each element in the div smenu.
God bless you always!
It's super cool
Wow man !!!! Thanks
Awsome!
All that beautiful code and then
D'ont forgget subscribe !
your channel is very good ( I like your channel )
Great video
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.
you want him to do your fucking homework ???
Wats it u using for text editing...?
pleade make a video on visual studio setup or post on facebook about it
you can also see here, how i create Another Awesome Accordion with html , css and javascript (
ruclips.net/video/APcGa1TBSIA/видео.html
I love your videos
Amazing
Amazing carry on
Wow looking cool bro
Awesome man