如何使我的导航栏具有平滑的下拉效果？

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."我希望当用户将鼠标悬停在名为“Works”的导航栏中的选项卡上时显示下拉效果。 When hovered, I would like there to be 2 separate tabs that the user can click to navigate.悬停时，我希望有 2 个单独的选项卡供用户单击以进行导航。 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>

Answer 1

You can create your own pop-up and adjust the pop-up position according to the mouse position so that the pop-up menu will not be disturbed by the effect.您可以创建自己的弹出窗口，并根据鼠标位置调整弹出位置，使弹出菜单不会受到效果的干扰。

try this尝试这个

 window.addEventListener("scroll", function(){ var header = document.querySelector("header"); header.classList.toggle("sticky", window.scrollY > 0); }) var worksbtn = document.querySelector("#works"),altmenu = document.querySelector(".altmenu") worksbtn.onmouseover = function(e){ altmenu.style.top = e.clientY +30+"px"; //or AA px altmenu.style.left = e.clientX-50+"px";//or BB px altmenu.style.display ="block" animeOpen() } altmenu.onmouseout = function(e){ animeClose() } function animeOpen(){ let i = 0; let openinterval = setInterval(() => { altmenu.style.height = i +"px" i=i+10 if( i == 180) {clearInterval(openinterval)} }, 1); } function animeClose(){ let i = altmenu.style.height.replace("px",""); let closeinterval = setInterval(() => { altmenu.style.height = i +"px" i=i-10 if( i == 0) {clearInterval(closeinterval);altmenu.style.display ="none" } }, 1); }

 * { 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; } .altmenu{position:absolute;z-index:999;width:100px;display:none;background-color:#333;} .altmenuli{float: left;width:100px;height:30px;border-bottom:1px solid #666;}

 <body> <header> <a class="" href="#"></a> <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li id="works"> <a href="#works">Works</a> </li> <li> <a href="#contact">Contact</a> </li> <li> <a href="#test">Test</a> </li> </ul> </header> <ul class="altmenu"> </ul> </body>

如何使我的导航栏具有平滑的下拉效果？

问题描述

1 个解决方案

解决方案1
0 2020-10-28 04:23:24

如何使我的导航栏具有平滑的下拉效果？

问题描述

1 个解决方案

解决方案1 0 2020-10-28 04:23:24

解决方案1
0 2020-10-28 04:23:24