2021-08-23

最新推荐文章于 2024-07-21 17:58:14 发布

onvivno

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量44

点赞数

原文链接：https://github.com/bradtraversy/50projects50days

版权

前端GitHub项目记录-导航栏

效果展示
未点击点击后

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=script, initial-scale=1.0">
    <title>导航栏</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <nav id="nav" class="active">
        <!-- ul>(li>a[href='#'])*4 -->
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Works</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
        <!-- button.icon -->
        <button class="icon" id="toggle">
            <!-- div.line -->
            <div class="line line1"></div>
            <div class="line line2"></div>
        </button>
    </nav>
    <script src="./script.js"></script>
</body>

</html>

css代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 从上到下线性渐变的图片 从页面的0%开始到50%，50%到100%换另一种颜色 */
    background-image: linear-gradient(to Bottom, violet 0%,violet 50%,
    skyblue 50%,skyblue 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
}

nav {
    background-color: #fff;
    padding: 20px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width 0.6s linear;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    overflow-x: hidden;
}

nav.active {
    width: 350px;
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 去除小圆点 */
    list-style-type: none;
    /* 一开始ul宽度为0 点击之后ul宽度变大 */
    width: 0;
    transition: width 0.6s linear;
}

/* 点击之后nav添加active类名 宽度变为nav的100% */
nav.active ul {
    width: 100%;
}

nav ul li {
    /* 一开始透明度为0 */
    opacity: 0;
    /* 变化的过渡效果 */
    transition: opacity 0.6s linear;
}

nav.active ul li {
    /* 添加active类名后显示 */
    opacity: 1;
    /* 绕着Y轴360度旋转 */
    transform: rotateY(360deg);
}

nav ul li a {
    /* 去除下划线 */
    text-decoration: none;
    font-weight: 700;
    color: #000;
    margin: 0 10px;
}

/* 设置按钮的样式 */
nav .icon {
    background-color: #fff;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 0;
    position: relative;
}

/* 没有点击之前的第一根线 */
.icon .line {
    background-color: skyblue;
    width: 20px;
    height: 2px;
    position: absolute;
    top: 10px;
    left: 5px;
    transition: transform 0.6s linear;
}

/* 没有点击之前的第二根线 */
.icon .line2 {
    top: 18px;
}

/* nav 添加active类名时的样式 */
nav.active .icon .line1 {
    /* 一维平面上逆时针旋转两周之后再旋转45度 第一条线向下移5.5px */
    transform: rotate(-765deg) translateY(5.5px);
}

nav.active .icon .line2 {
    /* 顺时针旋转 第二条线向上移5.5px */
    transform: rotate(765deg) translateY(-5.5px);
}

js代码：

//当点击按钮时给nav添加active类名 再次点击时删除active类名
const nav = document.getElementById('nav');
const toggle = document.getElementById('toggle');
// 监听按钮的点击事件 发生点击事件时执行回调函数 加上或删除active类名
toggle.addEventListener('click', () => {
    nav.classList.toggle('active');
})

onvivno

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-23

前端GitHub项目记录-导航栏效果展示html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=script, initial-scale=1.0"> <title>导航栏</title> <link rel="style
复制链接

扫一扫