Hover menu animation

Developer
Ghost Rider
Size
2,535 Kb
Views
78,936
  1. Hover menu animation Previews
  2. Hover menu animation HTML Codes
  3. Hover menu animation CSS Codes

How do I make an hover menu animation?

By DouglasDuteil. What is a hover menu animation? How do you make a hover menu animation? This script and codes were developed by Ghost Rider on 23 July 2022, Saturday.

Hover menu animation Previews
IQ Test

Hover menu animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover menu animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- getbootstrap -->
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<!-- /getbootstrap -->
<div class="navbar-x"> <div class="container"> <ul class="nav nav-pills"> <li><a href="#">Home</a></li><li><a href="#">Next</a></li><li class="active"><a href="#">Activity</a></li><li><a href="#">Calendar</a></li><li><a href="#">Profile</a></li><li class="bottom-bar"></li> </ul> </div>
</div>
</body>
</html>

Hover menu animation - Script Codes CSS Codes

.navbar-x { text-align: center;
}
.navbar-x .nav { position: relative; overflow: hidden; display: inline-block;
}
.navbar-x .nav:hover.nav-pills > li.active > a, .navbar-x .nav:focus.nav-pills > li.active > a { color: #eee;
}
.navbar-x .nav:hover.nav-pills > li.active > a:hover, .navbar-x .nav:hover.nav-pills > li.active > a:focus, .navbar-x .nav:focus.nav-pills > li.active > a:hover, .navbar-x .nav:focus.nav-pills > li.active > a:focus { color: #000; background-color: inherit;
}
.navbar-x .nav > li > a { width: 100px; color: #eee; transition: color 0.42s ease-in-out;
}
.navbar-x .nav > li > a:hover, .navbar-x .nav > li > a:focus { color: #000; background-color: inherit;
}
.navbar-x .nav > li.active > a { color: #000; background-color: inherit;
}
.navbar-x .nav > li.bottom-bar { transition: left 0.42s ease-in-out; position: absolute; height: 3px; width: 100px; bottom: 0; background-color: #ebbf00;
}
.navbar-x .nav > li:nth-child(1).active ~ .bottom-bar { left: 0px;
}
.navbar-x .nav > li:nth-child(1):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(1):focus ~ .bottom-bar { left: 0px !important;
}
.navbar-x .nav > li:nth-child(2).active ~ .bottom-bar { left: 100px;
}
.navbar-x .nav > li:nth-child(2):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(2):focus ~ .bottom-bar { left: 100px !important;
}
.navbar-x .nav > li:nth-child(3).active ~ .bottom-bar { left: 200px;
}
.navbar-x .nav > li:nth-child(3):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(3):focus ~ .bottom-bar { left: 200px !important;
}
.navbar-x .nav > li:nth-child(4).active ~ .bottom-bar { left: 300px;
}
.navbar-x .nav > li:nth-child(4):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(4):focus ~ .bottom-bar { left: 300px !important;
}
.navbar-x .nav > li:nth-child(5).active ~ .bottom-bar { left: 400px;
}
.navbar-x .nav > li:nth-child(5):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(5):focus ~ .bottom-bar { left: 400px !important;
}
Hover menu animation - Script Codes
Hover menu animation - Script Codes
Home Page Home
Developer Ghost Rider
Username GhostRider
Uploaded July 23, 2022
Rating 3
Size 2,535 Kb
Views 78,936
Do you need developer help for Hover menu animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ghost Rider (GhostRider) Script Codes
Name
Codepen search
Confetti en jQuery
Shaking css animation
Responsive Gallery
CSS Brainbow Menu
Laserz...
A Pen by Ghost Rider
Sudoko Solver
JQuery parallax
CSS Scroll Bars
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!