Animated Drop Down Nav
How do I make an animated drop down nav?
Forked from Vincent's Pen Animated Drop Down Nav.. What is a animated drop down nav? How do you make a animated drop down nav? This script and codes were developed by Melissa L on 29 October 2022, Saturday.
Animated Drop Down Nav - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Drop Down Nav</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="nav nav3"> <ul> <li> <a href="#">Nav Item</a> <ul> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> </ul> </li> <li> <a href="#">Nav Item</a> <ul> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> </ul> </li> <li> <a href="#">Nav Item</a> <ul> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> </ul> </li> <li> <a href="#">Nav Item</a> <ul> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> </ul> </li> <li> <a href="#">Nav Item</a> <ul> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> <li><a href="#">Subnav Item</a></li> </ul> </li> </ul> </nav>
</body>
</html>
Animated Drop Down Nav - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato:400,900italic,900,700italic,700,400italic,300,100italic,100,300italic);
.nav { font-family: 'Lato', sans-serif;
}
.nav ul { *zoom: 1; list-style: none; margin: 0; padding: 0; background: #0A445D;
}
.nav ul:before,
.nav ul:after { content: ""; display: table;
}
.nav ul:after { clear: both;
}
.nav ul > li { float: left; position: relative; overflow: hidden;
}
.nav ul > li:hover { overflow: visible;
}
.nav a { display: block; padding: 40px 20px; font-size: 24px; line-height: 1.2em; color: #fff; text-decoration: none;
}
.nav a:hover { text-decoration: none; opacity: 0.9;
}
.nav li ul { background: #FF4796;
}
.nav li ul li { white-space: nowrap;
}
.nav li ul a { border: none; color: #333; font-size: 20px; padding: 15px 30px; display: block; width: 100%;
}
.nav li ul a:hover { background: rgba(0, 0, 0, 0.2);
}
/* Slide Down
============================== */
.nav3 li ul { position: absolute; left: 0; top: 108px; z-index: -1; max-height: 0; overflow: hidden; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.nav3 li:hover ul { max-height: 1000px;
}
Developer | Melissa L |
Username | melissall |
Uploaded | October 29, 2022 |
Rating | 3 |
Size | 2,076 Kb |
Views | 14,168 |
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!
Name | Size |
Isotope Layout 1 | 6,515 Kb |
A Pen by Melissa L | 2,168 Kb |
Webflow Interactions | 22,772 Kb |
One Pager | 5,492 Kb |
Image Zoom from Medium.com | 2,412 Kb |
Contact form | 2,055 Kb |
Angular from Lynda.com | 4,062 Kb |
Animating Hamburger Slide Out Menu | 5,838 Kb |
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!
Name | Username | Size |
Mondrian | Chrisarmstrong | 2,787 Kb |
A Pen by Markku Lehmonen | SharpDal | 7,804 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
GrcJS | Vino6 | 2,047 Kb |
Basic template | Tomcat | 1,675 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!