How can I create a smooth dropdown effect for my navigation bar?
Question
Basically, I am trying to create a navigation bar that has a smooth dropdown effect. I have already created the navigation bar, but am struggling to make the dropdown effect. I would like the dropdown effect to be shown when the user hovers over the tab in the navigation bar called "Works." When hovered, I would like there to be 2 separate tabs that the user can click to navigate. I would like the navigation bar's theme to remain consistent, such as the font, color, and scroll effect. How can I do this? Any help would be appreciated. Thanks. Here is my code.
window.addEventListener("scroll", function() { var header = document.querySelector("header"); header.classList.toggle("sticky", window.scrollY > 0); })
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Hind', sans-serif; } html { scroll-behavior: smooth; } body { min-height: 200vh; background-color: #000; } h3 { color: #3F69CA } /* Navbar */ header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; transition: 0.6s; padding: 40px 100px; z-index: 100000; font-family: 'Poppins', sans-serif; } header.sticky { padding: 5px 100px; background: #F5F5F5; font-family: 'Poppins', sans-serif; } header .logo { position: relative; font-weight: 700; color: #F5F5F5; text-decoration: none; font-size: 2em; text-transform: uppercase; letter-spacing: 2px; transition: 0.6s; font-family: 'Poppins', sans-serif; } header ul { position: relative; display: flex; justify-content: center; align-items: center; font-family: 'Poppins', sans-serif; } header ul li { position: relative; list-style: none; font-family: 'Poppins', sans-serif; } header ul li a { position: relative; margin: 0 15px; text-decoration: none; color: #F5F5F5; letter-spacing: 2px; font-weight: 500px; transition: 0.6s; font-family: 'Poppins', sans-serif; } header ul li a:hover { text-decoration: underline; } header.sticky .logo, header.sticky ul li a { color: #000; font-family: 'Poppins', sans-serif; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <header> <a class="" href="#"></a> <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#works">Works</a> </li> <li> <a href="#contact">Contact</a> </li> <li> <a href="#test">Test</a> </li> </ul> </header> <script src="script.js"></script> </body> </html>
1 answers
solution1
0 2020-10-28 21:14:51
Try css animation. See if this helps: https://codepen.io/vajirkar/pen/jOrZaOg
Key part of the css is:
.container {
position: relative;
overflow: hidden;
height: 200px;
border: 1px solid grey;
}
.menuPanel {
position: absolute;
width: 200px;
height: 150px;
background-color: coral;
animation: slideOut 600ms;
z-index: -10;
}
@keyframes slideOut {
0% {
top: -150px;
}
100% {
top: 0px;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.