js简单的侧边导航栏

最新推荐文章于 2023-12-23 23:46:51 发布

VIP文章永远喜欢南小鸟

最新推荐文章于 2023-12-23 23:46:51 发布

阅读量1.9k

点赞数 1

分类专栏： JS 文章标签：导航栏 JS 侧边导航栏

本文链接：https://blog.csdn.net/qq_45749658/article/details/103118475

版权

思路：通过改变两个div的width；形成侧边导航栏的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box{
            width: 400px;
            height: 400px;
            /* background: pink; */
            margin: 0 auto;
        }
        .nav{
            /* width: 30%; */
            /*点击后width增加*/
            width: 0;
            /*平常状态nav的width为0（隐藏）*/
            height: 100%;
            background: #000;
            color: white;
            float: left;
            transition: 0.5s;
            overflow: hidden;
        }
        .text{
            /* w

最低0.47元/天解锁文章

优惠劵

永远喜欢南小鸟

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js简单的侧边导航栏

思路：通过改变两个div的width；形成侧边导航栏的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
复制链接

扫一扫