09 一个响应式的导航菜单

最新推荐文章于 2024-08-28 15:34:24 发布

学前端的坤坤bond

最新推荐文章于 2024-08-28 15:34:24 发布

阅读量287

点赞数 3

文章标签： css css3 html javascript vue.js 前端 java

本文链接：https://blog.csdn.net/m0_64904350/article/details/140627008

版权

一个响应式的导航菜单，它将包括汉堡菜单图标用于移动设备，并且具有平滑的过渡效果和动画。

HTML结构 (`navbar.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式导航菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="brand-title">品牌Logo</div>
        <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="navbar-links">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
        </div>
    </nav>

    <section class="content">
        <h1>欢迎来到我的网站</h1>
        <p>这里是一些介绍性的内容...</p>
    </section>
</body>
</html>

CSS样式 (`styles.css`)

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.navbar {
    background: #333;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.brand-title {
    font-size: 1.5em;
    font-weight: bold;
}

.navbar-links ul {
    list-style: none;
}

.navbar-links li {
    display: inline-block;
    padding: 0 15px;
}

.navbar-links li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.navbar-links li a:hover {
    color: #ddd;
}

.toggle-button {
    display: none;
    cursor: pointer;
}

.toggle-button .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #fff;
}

@media (max-width: 768px) {
    .toggle-button {
        display: block;
    }

    .navbar-links {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .navbar-links ul {
        flex-direction: column;
        width: 100%;
    }

    .navbar-links li {
        text-align: center;
        padding: 10px;
    }

    .navbar-links li a {
        display: block;
    }

    .navbar-links.active {
        display: flex;
    }
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.content {
    padding: 20px;
    animation: slideIn 0.5s ease;
}

/* 汉堡菜单动画 */
.toggle-button.active .bar:nth-child(1) {
    -webkit-transform: rotate(-45deg) translate(-4px, 6px);
    transform: rotate(-45deg) translate(-4px, 6px);
}

.toggle-button.active .bar:nth-child(2) {
    opacity: 0;
}

.toggle-button.active .bar:nth-child(3) {
    -webkit-transform: rotate(45deg) translate(-4px, -8px);
    transform: rotate(45deg) translate(-4px, -8px);
}

JavaScript交互 (`script.js`)

const toggleButton = document.querySelector('.toggle-button');
const navbarLinks = document.querySelector('.navbar-links');

toggleButton.addEventListener('click', () => {
    toggleButton.classList.toggle('active');
    navbarLinks.classList.toggle('active');
});