Animated Navigation Menu Bar using HTML CSS | Menu Hover Animation
ฝัง
- เผยแพร่เมื่อ 11 ต.ค. 2024
- 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.c...
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 !!!
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!
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.
oh my God thanks man you really just saved my life
You're 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 ❤️
thanks bro for saving my time
how can i keep the menu highlighted when it's active?
Facing the same problem
Add "active" attribute
Superb...🥹🥹🥹 u .. r suprb teacher.... sir /ma'am.....🥹🥹🥹🥹🥹🥹🥹🥹 tq so much....
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.
Perfect - the video I was looking for. Thankyou for uploading
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 💙
Thank you .
Awesome 👍
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
Thank you bro 🙏
I've always got the best from you
Thanks please
Always welcome
Thank you, so beautiful
can you make a video about your work
Amazing
Thnx!
Excellent 👌
Thank you 💙
cool i love that
Thank you 💙
Thanks😍😍😍
Welcome 😊
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
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.
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 - th-cam.com/video/tcskp-ncN0I/w-d-xo.html
Nice tutorial
Which software you have used to make such kind of video tutorial?
thanks buddy ❤️
You're 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
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.
Inline block aur flex me jya difference h aur inline block kab kab use krna hota h
Very nice! Thanks! 🤗🤗🤗
Your welcome 💙
thanks
You're welcome... Stay tuned 😁
@@CodingNepal Thank you, I've been watching from Turkey got me very useful video
Very nice effect 👌👌👌 I like it !
Thank you.. Keep supporting ❤️
Nice
I only see "start_home," huhu can u help me know it?
Great
Thank you :)
SUPER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! SUPER!!!!!!!!!!!!!!!! SUPER!!!!!!!!!
Thank you :)
Please continue these lessons !!! Thanks a lot!!!!!
You are awesome coder if I use your coding it's ok for you
Yes you can use my code.
great Video!
Thank you 💙
how can I do this with a dynamic links option.... for example, I don't know if I would use 4 links or 10links-
Hello brother ! Can you tell me how to make this animation on drop-down? I do like that but not working.
good
Is this a CSS tutorial or a music video?
How to do the same in case of active element state?
wow
Thank you 💙
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.
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.
nice
why didn't you use flex for your nav?
Is it possible to make this responsive ?
good but it isn't responsive it is just static values
Yes it's not responsive.
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??
why u used start-home class? IDK For what?
@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.
the bottom 0, or second animation. What does it call?
Please mention time.
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.
Hover is not at all working
Help me pleae3
can someone explain me the "start-home" is used for what
What is the name of the editor
It's atom.
how does it behave in responsive view?
It's not responsive.
i cant find the source code
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
Those css are hardcoded and will not scale if we add another a tag in html
that will work just with these tabs , but if you add another tab it will not work .
how to hyperlink on section html?
How can we put a tab on top ?
what if a link text is longer than 100px
can i use your code?
Yes you can.
i couldn't find the code. Someone help me pls
www.codingnepalweb.com/2020/06/active-tab-hover-animation-with-icons.html
please how to make it responsive !?
someone know how to add clear custom css to elementor?
advanced tutorial
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