Menu with hover slide effect

Developer
Szymon Dziewoński
Size
2,026 Kb
Views
6,072
  1. Menu with hover slide effect Previews
  2. Menu with hover slide effect HTML Codes
  3. Menu with hover slide effect CSS Codes

How do I make an menu with hover slide effect?

Pure css center slideUp/Down two color menu. What is a menu with hover slide effect? How do you make a menu with hover slide effect? This script and codes were developed by Szymon Dziewoński on 23 December 2022, Friday.

Menu with hover slide effect Previews
IQ Test

Menu with hover slide effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu with hover slide effect </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul> <li> <a href="/" class="active"> <span class="black">Home</span> <span class="white">Home</span> </a> </li> <li> <a href="/about"> <span class="black">About</span> <span class="white">About</span> </a> </li> <li> <a href="/portfolio"> <span class="black">Contact</span> <span class="white">Contact</span> </a> </li> </ul>
</nav>
<h1>content goes here</h1>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</body>
</html>

Menu with hover slide effect - Script Codes CSS Codes

*{ margin: 0; padding: 0;
}
body{ text-align: center; font-family: 'Lato', sans-serif;
}
h1{ line-height: 60px; color: #344595; font-size: 16px;
}
nav{ float:left; width:100%; overflow:hidden; position:relative; background-color: #344595; letter-spacing: 1px;
}
nav ul { list-style:none; margin:0; padding:0; position: relative; height: 70px; text-align: center;
}
nav ul li{ display: inline-block; list-style:none; margin:0; padding:0; position:relative;
}
nav ul li a{ color: #fff; text-transform: uppercase; font-size: 13px; font-weight: 400; line-height: 70px; height: 70px; display: block; text-decoration: none; overflow: hidden;
}
nav ul li a span{ display: block; padding: 0 10px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
nav ul li a span.white{ color: #fff;
}
nav ul li a span.black{ background-color: #fff; color: #000; margin: -70px 0 0 0;
}
nav ul li a:hover span.white, nav ul li a.active span.white{ margin: 70px 0 0 0;
}
nav ul li a:hover span.black, nav ul li a.active span.black{ margin: 0px 0 0 0;
}
Menu with hover slide effect - Script Codes
Menu with hover slide effect - Script Codes
Home Page Home
Developer Szymon Dziewoński
Username SzymonDziewonski
Uploaded December 23, 2022
Rating 3
Size 2,026 Kb
Views 6,072
Do you need developer help for Menu with hover slide effect?

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!

Szymon Dziewoński (SzymonDziewonski) Script Codes
Name
Simple loader
Hover effect
Hover button
Vertical-align
Social Icons net animation
Svg animation draw
Earth animation
Random count
Animated logo
Create amazing marketing copy 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!