Sliding Navigation Menu

Developer
Keith Pickering
Size
3,440 Kb
Views
38,456
  1. Sliding Navigation Menu Previews
  2. Sliding Navigation Menu HTML Codes
  3. Sliding Navigation Menu CSS Codes

How do I make an sliding navigation menu?

What is a sliding navigation menu? How do you make a sliding navigation menu? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.

Sliding Navigation Menu Previews
IQ Test

Sliding Navigation Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding Navigation Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #ECEFF1;
}
.nav { display: flex; margin: 0 auto; padding: 0; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.nav__item { position: relative; overflow: hidden; list-style: none; flex: 1; text-align: center;
}
.nav__item > a { display: block; text-decoration: none; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 24px; padding: 20px 40px; color: #78909C; background-color: white; transition: all 200ms;
}
.nav__item > a:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #F48FB1; animation: slide-out 200ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out;
}
.nav__item > a:hover { color: #546E7A; background-color: #fbfbfc;
}
.nav__item > a:hover:after { animation: slide-in 200ms;
}
@keyframes slide-in { 0% { transform: translate(-100%, 0); opacity: 0.25; } 100% { transform: none; opacity: 1; }
}
@keyframes slide-out { 0% { transform: none; opacity: 1; } 100% { transform: translate(100%, 0); opacity: 0.25; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<div class="wrapper">
<ul class="nav"> <li class="nav__item"> <a href="#">Home</a> </li> <li class="nav__item"> <a href="#">Blog</a> </li> <li class="nav__item"> <a href="#">About</a> </li>
</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Sliding Navigation Menu - Script Codes CSS Codes

.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #ECEFF1;
}
.nav { display: flex; margin: 0 auto; padding: 0; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.nav__item { position: relative; overflow: hidden; list-style: none; flex: 1; text-align: center;
}
.nav__item > a { display: block; text-decoration: none; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 24px; padding: 20px 40px; color: #78909C; background-color: white; transition: all 200ms;
}
.nav__item > a:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #F48FB1; animation: slide-out 200ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out;
}
.nav__item > a:hover { color: #546E7A; background-color: #fbfbfc;
}
.nav__item > a:hover:after { animation: slide-in 200ms;
}
@keyframes slide-in { 0% { transform: translate(-100%, 0); opacity: 0.25; } 100% { transform: none; opacity: 1; }
}
@keyframes slide-out { 0% { transform: none; opacity: 1; } 100% { transform: translate(100%, 0); opacity: 0.25; }
}
Sliding Navigation Menu - Script Codes
Sliding Navigation Menu - Script Codes
Home Page Home
Developer Keith Pickering
Username keithpickering
Uploaded August 10, 2022
Rating 3
Size 3,440 Kb
Views 38,456
Do you need developer help for Sliding Navigation Menu?

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!

Keith Pickering (keithpickering) Script Codes
Name
Material Inspired Menu
Metro Interactive Live Tiles
Image with inset shadow
Smooth, Semantic Tab Box
Notifications
A Pen by Keith Pickering
Single-element Toggle Switch
Delicious SASS Buttons
Windows 10 Concept
Easy Container-Breaking Sidebar
Create amazing web content 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!