Animated Navigation Menu Bar using HTML CSS | Menu Hover Animation

[@jackieleonardy1893]

Hi! how could the code run the nav .start-blog tag? While you only specify the start-home tag only. Or it's only will be used for further JS or JQuery purpose? Thank you!

[@CodingNepal]

I didn't understand.. Can you tell me im details?

[@amaan6017]

he is saying that in html file you only define class as. start-home but in css file you use. start-home start-blog etc without defining them in html file

[@CodingNepal]

Sorry it was my mistake. Here is the actual CSS codes - @import url('fonts.googleapis.com/css?family=Open+Sans&display=swap'); body { font-family: 'Open Sans', sans-serif; background: #2c3e50; } nav{ position: relative; margin: 270px auto 0; width: 590px; height: 50px; background: #34495e; border-radius: 8px; font-size: 0; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1); } nav a{ font-size: 15px; text-transform: uppercase; color: white; text-decoration: none; line-height: 50px; position: relative; z-index: 1; display: inline-block; text-align: center; } nav .animation{ position: absolute; height: 100%; /* height: 5px; */ top: 0; /* bottom: 0; */ z-index: 0; background: #1abc9c; border-radius: 8px; transition: all .5s ease 0s; } nav a:nth-child(1){ width: 100px; } nav .start-home, a:nth-child(1):hover~.animation{ width: 100px; left: 0; } nav a:nth-child(2){ width: 110px; } nav a:nth-child(2):hover~.animation{ width: 110px; left: 100px; } nav a:nth-child(3){ width: 100px; } nav a:nth-child(3):hover~.animation{ width: 100px; left: 210px; } nav a:nth-child(4){ width: 160px; } nav a:nth-child(4):hover~.animation{ width: 160px; left: 310px; } nav a:nth-child(5){ width: 120px; } nav a:nth-child(5):hover~.animation{ width: 120px; left: 470px; }

[@santhirandilaiksana3525]

​

[@-elektrostahl_1338]

This is actually what I was looking for - thank you !!!

[@AveKhlif-xw4pl]

You are the best, I support you

[@АрманАлимханов-ф8д]

oh my God thanks man you really just saved my life

[@CodingNepal]

You're welcome 💙

[@TruthPrevails_]

Perfect - the video I was looking for. Thankyou for uploading

[@adobetrainingplatform3577]

I really liked watching the video and your video solved my problem thanks

[@CodingNepal]

You're welcome 💙

[@stemp-freefire7158]

Your all tutorials are so helpful

[@CodingNepal]

Glad you like them!

[@Skyraxk]

bro. I appreciate your work. Very nice. Thanks bro for the tutorial. Keep it up for more video.

[@CodingNepal]

You're welcome bro 💙

[@playstasio6685]

how can i keep the menu highlighted when it's active?

[@thecustomizednation1111]

Facing the same problem

[@navishthakur4779]

Add "active" attribute

[@thanigaivelan8394]

It is fantastic dude.....

[@CodingNepal]

Thank you... Keep watching ❤️

[@zaheermughal7998]

brother u have stunning content in channel, i really like that stuff..

[@CodingNepal]

Thank you 💙 Follow us on insta - instagram.com/coding.np

[@housseineh7677]

Very nice effect 👌👌👌 I like it !

[@CodingNepal]

Thank you.. Keep supporting ❤️

[@krishcm3016]

Very nice! Thanks! 🤗🤗🤗

[@CodingNepal]

Your welcome 💙

[@safiyakothiwale]

I luv ur content ❤ u r very creative. keep it up. I think u should start teaching us. It will be very helpful.

[@CodingNepal]

Thank you 💙

[@Galaxy_World]

This is teaching lmao

[@Galaxy_World]

@@CodingNepal yw

[@ojvni]

Thank you bro 🙏 I've always got the best from you Thanks please

[@CodingNepal]

Always welcome

[@InspireHour]

thanks bro for saving my time

[@thehighlightedone]

In the next video can you make a responsive website using html and css (and thanks for give me two hearts)

[@CodingNepal]

Here is the video - kzbin.info/www/bejne/qpTWnKNjo8iBZqs

[@khushidubeypoetry]

Superb...🥹🥹🥹 u .. r suprb teacher.... sir /ma'am.....🥹🥹🥹🥹🥹🥹🥹🥹 tq so much....

[@developernaim7869]

Awesome 👍

[@CodingNepal]

Thank you 💙

[@saragylden612]

Hello there! Love this tutorial. If I have only 4 tabs, the hover will dislocate? How do I change that? Can I maybe DM you. Currently working on my exam project, and would love this hover menu bar.

[@GHOST-dg5tk]

why does the underline return back to its starting position, can you change it?

[@blackcatminou2981]

you must remove the .start-home, but you'll have the selector render only when hovering something

[@mohsinsayyad6347]

Excellent 👌

[@CodingNepal]

Thank you 💙

[@turniodev]

I only see "start_home," huhu can u help me know it?

[@HuyTran-fl4ej]

Thank you, so beautiful

[@bulkbuster553]

Hover is not at all working

[@bulkbuster553]

Help me pleae3

[@housepjays]

Great video! How do you make the highlight effect stay active when you click on a nav element? Thank you

[@CodingNepal]

Use javascript for that.. I've made many videos on it.. Visit channel.

[@sanketsingh5555]

Inline block aur flex me jya difference h aur inline block kab kab use krna hota h

[@nigarmamedova5828]

How to do the same in case of active element state?

[@dominikladner3161]

great Video!

[@CodingNepal]

Thank you 💙

[@ZaynMalik-dp7iv]

thanks buddy ❤️

[@CodingNepal]

You're welcome 💙

[@thehighlightedone]

can you make a video about your work

[@juancamilocampotangarife7432]

how can I do this with a dynamic links option.... for example, I don't know if I would use 4 links or 10links-

[@renwar]

How about something dynamic? Because majority of cases are dynamic content, thats why static width not always the solution.

[@CodingNepal]

If you have some knowledge of css then you can put dynamic width or static width according your desire.

[@ayepwintphyu9670]

Thanks😍😍😍

[@CodingNepal]

Welcome 😊

[@thund3rnk]

I would like to ask you something, why is not closed?? in the nav, I have and I can´t close it and the whole animation and css breaks

[@srikanthbadampudi3300]

nav{ position: relative; margin: 270px auto 0; width: 590px; height: 50px; background-color: #34495e; border-radius: 8px; font-size: 0; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1); } In this above code why did you write ' font-size:0 ' can anyone explain

[@CodingNepal]

It's mean if the nav has taken any font-size then make it 0; It's not required and you don't need to put this line.

[@lizalizaveta1882]

that looks cool, i tried it out. however, there are a lot of repetitions with nth-child() and hover effects for each of them individually. is there any simpler way to achieve this with java script?

[@adityabankey7682]

I also face same issue did you find this problem solution please let me know

[@altufaltu4103]

cool i love that

[@CodingNepal]

Thank you 💙

[@thezvid]

good but it isn't responsive it is just static values

[@CodingNepal]

Yes it's not responsive.

[@AyushKumar-ep1nn]

You are awesome coder if I use your coding it's ok for you

[@CodingNepal]

Yes you can use my code.

[@abhishekmohanty232]

how can i make it to go back to the current page one i take the mouse pointer out

[@CodingNepal]

According to this design, the active page is home page and when you hover on other menu the animation slides smoothly and it go to default active tab when the pointer out. I hope you got it.

[@vakkoww8635]

Is it possible to make this responsive ?

[@pechhon1273]

Hello brother ! Can you tell me how to make this animation on drop-down? I do like that but not working.

[@dangerzone-136]

Which software you have used to make such kind of video tutorial?

[@0xTh3Ruler]

Is this a CSS tutorial or a music video?

[@ankushsonone8433]

Brother I write the whole code and try to make same to understand his working for practice mode but I realised some code is missing of HTML file in this video can you please share his HTML. Code so I can check and correct my mistakes.

[@CodingNepal]

Source files link is in the description.

[@ElSuperNOOB]

Hello, how can I do that when I restart the web, the colored button start in "contact", and not un "Home"? New sub 😄

[@CodingNepal]

use Javascript or JQuery..

[@ElSuperNOOB]

@@CodingNepal IT is posible to do it with css?

[@CodingNepal]

@@ElSuperNOOB No there is no page reload event listener in CSS.

[@kam1701-kk]

Nice tutorial

[@Mohammad-f8y]

why didn't you use flex for your nav?

[@МаксимКрутов-е8б]

SUPER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! SUPER!!!!!!!!!!!!!!!! SUPER!!!!!!!!!

[@CodingNepal]

Thank you :)

[@МаксимКрутов-е8б]

Please continue these lessons !!! Thanks a lot!!!!!

[@samiyaaktermimvlog]

Thank you .

[@vaibhavkhushlani3836]

Amazing

[@LutfiRamadhan]

the bottom 0, or second animation. What does it call?

[@CodingNepal]

Please mention time.

[@mohammadakram599]

@CodingNepal could you please tell me how to active this in the last child??

[@CodingNepal]

You need to do some change in css codes. Contact on me Instagram. I'll do for you.

[@thehighlightedone]

what is the url in style .css

[@CodingNepal]

This url is used for font-family.. You can get code files from here drive.google.com/file/d/1aURPkqJP6ASxBsLHozPEdn3oYJPCetMD/view?usp=drivesdk

[@ahmedbelloula9268]

can someone explain me the "start-home" is used for what

[@pitagora8696]

how does it behave in responsive view?

[@CodingNepal]

It's not responsive.

[@minthantkyaw1579]

why u used start-home class? IDK For what?

[@gamingtiktok9616]

Nice

[@esf-studio-main]

Those css are hardcoded and will not scale if we add another a tag in html

[@muratgunhan]

thanks

[@CodingNepal]

You're welcome... Stay tuned 😁

[@muratgunhan]

@@CodingNepal Thank you, I've been watching from Turkey got me very useful video

[@Genusik]

Thnx!

[@trapmask2978]

how to hyperlink on section html?

[@adal7769]

i cant find the source code

[@user-iu6uc4vu4o]

Great

[@CodingNepal]

Thank you :)

[@joshuaubara9014]

What is the name of the editor

[@CodingNepal]

It's atom.

[@Pilosofia]

that will work just with these tabs , but if you add another tab it will not work .

[@glade3934]

someone know how to add clear custom css to elementor?

[@mohammadakram599]

brothur could you please make a voice over in this tutorial? please that would be very much helpful. i want to know , { :hover~.animation} "~" why this sign? can you please explain love from Bangladesh.

[@CodingNepal]

This article helps you - techbrij.com/css-selector-adjacent-child-sibling

[@mohammadakram599]

@@CodingNepal ok , and could you please tell me how to active this in the last child??

[@syediqbalahmed3176]

good

[@feel_the_beats698]

How can we put a tab on top ?

[@mohithguptakorangi1766]

i couldn't find the code. Someone help me pls

[@PudineHisa]

www.codingnepalweb.com/2020/06/active-tab-hover-animation-with-icons.html

[@rekan_98]

please how to make it responsive !?

[@java7362]

nice

[@Scarecrow9298]

what if a link text is longer than 100px

[@moviemate7107]

can i use your code?

[@CodingNepal]

Yes you can.

[@dflz]

Hi ,I need code file plz . 🙂

[@CodingNepal]

Contact on me Instagram

[@baijidhossain1541]

wow

[@CodingNepal]

Thank you 💙

[@khansolution2092]

Do not show the @import url full name.

[@soyaiburrahman3806]

advanced tutorial

[@wrizuuchhetri3609]

daju malai please help gardinus tapai ko number dinnu hoss ma wattsapp garxu tapailai

[@CodingNepal]

I do not use whatsapp.

[@Blazikan78]

Source Code ? ?

[@alialiev4667]

Terrible code

[@gauravmisal4610]

Nice