神奇!JavaScript打造导航栏下拉特效，如丝般顺滑

2023-04-27 05:51:20

JavaScript导航栏下拉：打造无缝的用户体验

提升导航，打造丝般顺滑的探索之旅

在现代网站设计中，导航栏占据着举足轻重的地位。它不仅为用户提供了清晰的网站结构概览，还显著影响了他们的整体浏览体验。通过巧妙地运用JavaScript，我们可以轻松实现导航栏的下拉功能，为用户带来无与伦比的便捷和优雅。

JavaScript导航栏下拉：如何实现

1. HTML 准备

首先，让我们在HTML中创建导航栏和下拉菜单元素。

<nav>
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">产品</a>
            <ul>
                <li><a href="#">产品 1</a></li>
                <li><a href="#">产品 2</a></li>
                <li><a href="#">产品 3</a></li>
            </ul>
        </li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

2. CSS 样式

接下来，使用CSS设置导航栏和下拉菜单的样式。

nav {
    background-color: #333;
    color: #fff;
    padding: 10px;
}

nav ul {
    list-style-type: none;
    display: flex;
}

nav li {
    margin-right: 20px;
}

nav a {
    color: #fff;
    text-decoration: none;
}

nav li:hover {
    background-color: #444;
}

nav li ul {
    display: none;
    position: absolute;
    background-color: #444;
    color: #fff;
    padding: 10px;
}

nav li:hover ul {
    display: block;
}

3. JavaScript 代码

最后，使用JavaScript实现导航栏下拉功能。

const navItems = document.querySelectorAll('nav li');

navItems.forEach((item) => {
    item.addEventListener('mouseover', () => {
        item.querySelector('ul').style.display = 'block';
    });

    item.addEventListener('mouseout', () => {
        item.querySelector('ul').style.display = 'none';
    });
});