Animated Navigation Menu Bar using HTML CSS | Menu Hover Animation
HTML-код
- Опубликовано: 3 окт 2019
- Animated Navigation Menu Bar using HTML CSS | Menu Hover Animation
Active Tab Hover Animation with Icons
➤ • Active Tab Hover Anima...
Elastic Tab Click Animation with Icons
➤ • Elastic Tab Animation ...
Download Codes From Here - drive.google.com/file/d/1OqTM...
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Track: Spektrem - Shine [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Spektrem - Shine | Pro...
Track: TULE - Fearless pt.II (feat. Chris Linton) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Fearless pt...
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!
I didn't understand.. Can you tell me im details?
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
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;
}
This is actually what I was looking for - thank you !!!
Perfect - the video I was looking for. Thankyou for uploading
oh my God thanks man you really just saved my life
You're welcome 💙
Thank you, so beautiful
brother u have stunning content in channel, i really like that stuff..
Thank you 💙
Follow us on insta - instagram.com/coding.np
bro. I appreciate your work. Very nice. Thanks bro for the tutorial. Keep it up for more video.
You're welcome bro 💙
thanks bro for saving my time
I really liked watching the video and your video solved my problem
thanks
You're welcome 💙
Your all tutorials are so helpful
Glad you like them!
Very nice! Thanks! 🤗🤗🤗
Your welcome 💙
I luv ur content ❤ u r very creative. keep it up. I think u should start teaching us. It will be very helpful.
Thank you 💙
This is teaching lmao
@@CodingNepal yw
It is fantastic dude.....
Thank you... Keep watching ❤️
Very nice effect 👌👌👌 I like it !
Thank you.. Keep supporting ❤️
Amazing
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.
Thank you .
Nice
Awesome 👍
Thank you 💙
Superb...🥹🥹🥹 u .. r suprb teacher.... sir /ma'am.....🥹🥹🥹🥹🥹🥹🥹🥹 tq so much....
Excellent 👌
Thank you 💙
great Video!
Thank you 💙
In the next video can you make a responsive website using html and css
(and thanks for give me two hearts)
Here is the video - ruclips.net/video/tcskp-ncN0I/видео.html
thanks buddy ❤️
You're welcome 💙
cool i love that
Thank you 💙
Nice tutorial
Thank you bro 🙏
I've always got the best from you
Thanks please
Always welcome
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
Thnx!
good
Great
Thank you :)
nice
Great video! How do you make the highlight effect stay active when you click on a nav element? Thank you
Use javascript for that.. I've made many videos on it.. Visit channel.
Thanks😍😍😍
Welcome 😊
Which software you have used to make such kind of video tutorial?
wow
Thank you 💙
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?
I also face same issue did you find this problem solution please let me know
can you make a video about your work
You are awesome coder if I use your coding it's ok for you
Yes you can use my code.
how can I do this with a dynamic links option.... for example, I don't know if I would use 4 links or 10links-
SUPER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! SUPER!!!!!!!!!!!!!!!! SUPER!!!!!!!!!
Thank you :)
Please continue these lessons !!! Thanks a lot!!!!!
can someone explain me the "start-home" is used for what
How to do the same in case of active element state?
Inline block aur flex me jya difference h aur inline block kab kab use krna hota h
thanks
You're welcome... Stay tuned 😁
@@CodingNepal Thank you, I've been watching from Turkey got me very useful video
How about something dynamic? Because majority of cases are dynamic content, thats why static width not always the solution.
If you have some knowledge of css then you can put dynamic width or static width according your desire.
Is this a CSS tutorial or a music video?
how can i keep the menu highlighted when it's active?
Facing the same problem
how can i make it to go back to the current page one i take the mouse pointer out
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.
Hello, how can I do that when I restart the web, the colored button start in "contact", and not un "Home"?
New sub 😄
use Javascript or JQuery..
@@CodingNepal IT is posible to do it with css?
@@ElSuperNOOB No there is no page reload event listener in CSS.
why does the underline return back to its starting position, can you change it?
you must remove the .start-home, but you'll have the selector render only when hovering something
I only see "start_home," huhu can u help me know it?
Hello brother ! Can you tell me how to make this animation on drop-down? I do like that but not working.
advanced tutorial
why didn't you use flex for your nav?
the bottom 0, or second animation. What does it call?
Please mention time.
@CodingNepal could you please tell me how to active this in the last child??
You need to do some change in css codes. Contact on me Instagram. I'll do for you.
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
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.
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.
Source files link is in the description.
good but it isn't responsive it is just static values
Yes it's not responsive.
someone know how to add clear custom css to elementor?
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.
This article helps you - techbrij.com/css-selector-adjacent-child-sibling
@@CodingNepal ok , and could you please tell me how to active this in the last child??
how does it behave in responsive view?
It's not responsive.
why u used start-home class? IDK For what?
Those css are hardcoded and will not scale if we add another a tag in html
How can we put a tab on top ?
how to hyperlink on section html?
that will work just with these tabs , but if you add another tab it will not work .
what is the url in style .css
This url is used for font-family.. You can get code files from here drive.google.com/file/d/1aURPkqJP6ASxBsLHozPEdn3oYJPCetMD/view?usp=drivesdk
i cant find the source code
please how to make it responsive !?
what if a link text is longer than 100px
What is the name of the editor
It's atom.
i couldn't find the code. Someone help me pls
www.codingnepalweb.com/2020/06/active-tab-hover-animation-with-icons.html
can i use your code?
Yes you can.
Do not show the @import url full name.
Hi ,I need code file plz . 🙂
Contact on me Instagram
Source Code ? ?
daju malai please help gardinus tapai ko number dinnu hoss ma wattsapp garxu tapailai
I do not use whatsapp.
Nice