Awesome accordion menu using only HTML & CSS

[@gencproyazilim]

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

[@Sidhant__]

For web developers this is satisfying video.👍

[@ogulcankoyun7086]

not only for web developer * - *

[@abdullah1536]

why not

[@memequery]

kzbin.info/www/bejne/mIXXq52XjrWLg9U

[@smile_score6473]

yop :D

[@ed1nh0]

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 ?

[@oanasilviu1749]

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

[@martinkarugaba]

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

[@Stevesteacher]

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

[@patricknally1177]

Yeah its quicker and easier to use ;/

[@qurosty992]

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

[@akhwanstudio]

agree, target just open the smenu

[@NatHollings]

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

[@antlasgmd1469]

me too i never seen it

[@foreverandadave]

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

[@youropinioncomment]

me too..

[@sooth6295]

same here

[@darrkyt]

Yup

[@winterburn3010]

1mil sub soon. Geniussss

[@gvacja]

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

[@simonkalu]

You are a hero... Good part of css

[@suryaanshsingh9283]

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

[@ousssikavf4276]

you can also see here, how i create Another Awesome Accordion with html , css and javascript ( kzbin.info/www/bejne/d4HGeJRniaeGf6M

[@mohammadrehan9445]

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

[@zxxczczczcz]

@@georgesears1615 ?

[@sayanbanerjee1047]

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

[@artitech_videos]

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

[@koshinkosenki7691]

briliant dude, love your workflow

[@memequery]

kzbin.info/www/bejne/mIXXq52XjrWLg9U

[@mysteriouswindamv4340]

OMG!!! So cool!

[@TejpalNakul]

Wow great video sir by developer

[@palomacarbajal]

Thank you very much! This was amazing!!

[@memequery]

kzbin.info/www/bejne/mIXXq52XjrWLg9U

[@ogulcankoyun7086]

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

[@manjinderrahal1147]

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

[@RanaAhmed-ny4jl]

That was really Awesome💙

[@RoamingRebel]

One more valuable video.THank you

[@Gabsolam]

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

[@malitialitia434]

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

[@raulhernanromeroherrera2547]

De Colombia, gracias es muy bueno nav.

[@snm_51]

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

[@snm_51]

Pleas

[@okiseeyou]

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

[@gagan8158]

@@okiseeyou Whats the name of that plugin ??

[@okiseeyou]

@@gagan8158 atom-html-preview

[@amiralirazi7142]

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

[@gorbulevsv]

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

[@HaitemPatchou]

amazing dude you are awesome. You just won a subscriber

[@AyushmanJha]

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

[@ousssikavf4276]

you can also see here, how i create Another Awesome Accordion with html , css and javascript ( kzbin.info/www/bejne/d4HGeJRniaeGf6M

[@javierquiroga6774]

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

[@rajkhedekar2007]

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]

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

[@SonuKumar-eh1dz]

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

[@mohammedsayeed330]

You are simply amazing

[@locphucinh6160]

Great! Today i learn :target

[@SamuelPfleumerSami]

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

[@GabrielTaets]

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

[@sandeepshah89]

It's called Emmet

[@saeiko7930]

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

[@daoroots]

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?

[@dudeguy7927]

Nice, I love the atom code editor

[@AbbasZaidi-in]

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

[@Olasthetics]

he's using atom

[@najamsaqib7978]

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

[@diputhechief5498]

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

[@bbart9628]

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

[@mralberdi-l6760]

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?

[@alexabc2012]

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

[@zentranian]

Its Helpful Bruh!. Thanks

[@klingermatheus9098]

Man this is so satisfying

[@georgesears1615]

That's what your mom said.

[@dinoxhai]

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

[@Taran0FF]

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

[@bayuyudhasaputra3169]

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

[@LonelyTroubadour]

What is this atom extension that lets you see your work in real time?

[@stuartmarsh5574]

There is an extension for VScode I use called live server. It looks like it exists for Atom as well.

[@tanjodeliver1]

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

[@BlueCrystal1996R]

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

[@hieubui3411]

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

[@mauweb1797]

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

[@memequery]

kzbin.info/www/bejne/mIXXq52XjrWLg9U

[@MH-re6sy]

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

[@ousssikavf4276]

you can also see here, how i create Another Awesome Accordion with html , css and javascript ( kzbin.info/www/bejne/d4HGeJRniaeGf6M

[@Nyan_cat_]

What addon are you using the right of the movie?

[@UMERFAROOQ-cl2nd]

Good work sir

[@ParthPatelITO]

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]

Ye, to do it u need some js

[@inevitablerafati5202]

Wats it u using for text editing...?

[@cccccccccccccccc132]

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

[@bayuyudhasaputra3169]

Awesome css trick... Thank...

[@DerLino]

How can you adjust this, if you have clicked on a page, that the menu then remains in this position and does not go back together.

[@armyofone2323]

Use JavaScript

[@andrejpetnuch8194]

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

[@konkakiem1673]

What is music in video? Thanks!

[@ahmdaeyz]

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]

kzbin.info/www/bejne/mIXXq52XjrWLg9U

[@Jwaana]

Amazing ! Thank you very much ! :D

[@DarkCodeOnline]

welcome ♥

[@Jwaana]

😁

[@massimilianocomunale8439]

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?

[@otmanighoulassen6177]

You rock man!

[@aldsome]

how do you make a live output

[@iplfixerking1466]

How tab close automatically when we curser moves from that ....

[@Kodegems]

amazing work man

[@SyedMuzammilMahasanShahi]

Lovely ... Thanks for share

[@macieserenity1596]

Awsome!

[@andrewlu8432]

the last step, click the item, smenu will show, why it not appearance?

[@andrewlu8432]

set id# should be smenu, not item.

[@WhosDaiz]

What atom plugin for the html preview ?

[@mume9523]

HTML-preview

[@gregorychamekh8143]

perfect, thank you very much!

[@youssefmaia8051]

Very good, liked

[@thienhung-19o46]

Your clip so perfectly .thank you so much

[@nikolastosic9102]

You are awesome !

[@marvelfighter523]

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

[@sourishdutta9600]

Wow man !!!! Thanks

[@anupamjaiswal7936]

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

[@georgegogiashvili9416]

It is Atom editor

[@pasindusamadhith1622]

What's the software you used for this????

[@dominik4791]

what I have to do If I want add more options to smenu?

[@anshuljha1332]

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

[@andreipunei6728]

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

[@jeanchavez6048]

where did you learn all this?

[@is-hakambarouk2397]

This is awesome i like it B-)

[@LearnwithAnas]

U r very gifted man

[@devindeepak]

How can i make the main menu item to close the sub menu.

[@vinayakthakur3155]

Bro it's not working when i tried to copy your codes, Two lines of codes are missing See the timing at 8:34 and at 9:15 two lines are extra added but not showing in video, plzz tell us

[@vinayakthakur3155]

Compare the codes line with no. In css file nearly at 8:30 then compare it with the no. Iine of code at 9:15 two lines are extra added which is not in video And my program is not working

[@wireplay-1.5metre]

why i can't use the font awesome. I can't find the link rel

[@mralberdi-l6760]

if i want the sub menu to stay visible when I'm in one of their pages? help please

[@knightmare1924]

Try js or php 😉

[@mralberdi-l6760]

​@@knightmare1924now another thing. 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?

[@moazelsawaf2000]

Great work ❤️

[@redbird3429]

Hi how can i do that, if a menu opened and i click on the main title it closes?

[@biocode9814]

Awesome bro! :)

[@សុងចាន់ថន-ព7ឡ]

so good .hello from cambodia

[@noone-gr4is]

Genius!