专栏首页技术综合html可伸缩侧边栏

html可伸缩侧边栏

演示地址:http://runjs.cn/detail/jmoullpw

1.HTML代码

<aside class="box" id="test">
        <button id="btn">三</button>
        <ul>
            <li>
                <h3>ZZES</h3>
            </li>
            <li><a href="#">MENU TITLE 1</a></li>
            <li><a href="#">MENU TITLE 2</a></li>
            <li><a href="#">MENU TITLE 3</a></li>
            <li><a href="#">MENU TITLE 4</a></li>
            <li><a href="#">MENU TITLE 5</a></li>
            <li><a href="#">MENU TITLE 6</a></li>
            <li><a href="#">MENU TITLE 7</a></li>
        </ul>
    </aside>
    <section>
        <h1>Main Content</h1>
    </section>

2.CSS代码

        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            max-width: 1920px;
        }
        
        #btn {
            position: absolute;
            top: 22%;
            left: 298px;
            height: 75px;
            border: 0;
            border-left: 1px solid rgb(23, 32, 43, 0.2);
            background: #AA3344;
            color: #fff;
            cursor: pointer;
        }
        
        .box {
            float: left;
            position: relative;
            left: 0;
            height: 1000px;
            width: 300px;
            margin-left: 0;
            display: block;
            background-color: #a34;
            -moz-transition: margin-left 2s;
            transition: margin-left 2s;
        }
        
        aside ul li {
            height: 40px;
            line-height: 40px;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            list-style-type: none;
            text-align: center;
        }
        
        aside ul li a {
            width: 100%;
            height: 100%;
            text-decoration-line: none;
            color: #fff;
            display: block;
        }
        
        aside ul li a:hover {
            background: #d3d;
        }
        
        section {
            width: 100%;
            height: 100%;
            background: #d4d4d4;
            height: 1000px;
        }
        
        section h1 {
            text-align: center;
            border-bottom: 1px solid #fff;
        }

3.JavaScript代码

        var box = document.getElementById("test")
        var btn = document.getElementById("btn")
        btn.onclick = function() {
            if (box.offsetLeft == 0) {
                box.style['margin-left'] = -300 + "px"
            } else {
                box.style['margin-left'] = 0 + "px"
            }
        }

4.右侧侧边栏的问题

写右侧侧边栏的时候,使用margin-right,会发先页面右侧溢出 这是只要再body里加入 overflow-x:hidden;即可

5.另一个写法

使用定位的方式 1)HTML代码

    <aside id="aside">
        <ul>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
        </ul>
    </aside>
    <position>
        <button onclick="toggle()">
            打开/关闭右侧侧边栏
        </button>
    </position>

2)CSS样式

       body {
            position: relative;
            left: 0;
            padding: 0;
            margin: 0;
            /*overflow-x:hidden;*/
        }
        
        aside {
            width: 300px;
            height: 100%;
            position: fixed;
            right: 0;
            top: 0;
            background: #d4d4d4;
            transition: right 2s ease;
        }
        
        .open {
            right: 0px;
        }
        
        .close {
            right: -300px;
        }

3)JS代码

        var aside = document.getElementById("aside")

        function toggle() {
            if (aside.offsetLeft == 1066) {
                aside.setAttribute("class", "close")
            } else {
                aside.setAttribute("class", "open")
                console.log("not in")
            }
        }

6.侧边栏缩入,保留小图标

原理就是,将不要显示的display:none;掉,然后将侧边栏宽度减小,修改一些样式即可 演示地址:http://runjs.cn/detail/dopafak1

1)html代码

<body>
    <aside>
        <button class="btn" onclick="list()">三</button>
        <ul>
            <li class="first">
                <div class="logo">
                    LOGO
                </div>

            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
        </ul>
    </aside>
</body>

2)JavaScript代码

    <script>
        var body = document.getElementsByTagName("body")[0]
        var aside = document.getElementsByTagName("aside")[0]

        function list() {
            if (aside.clientWidth <= 40) {
                body.className = ""
            } else if (aside.clientWidth > 40) {
                console.log("side")
                body.className = "minibody"
            }

        }
    </script>

3)CSS代码

* {
    padding: 0;
    margin: 0;
}

body {
    overflow-x: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
}

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

aside {
    height: 100%;
    width: 300px;
    position: relative;
    left: 0;
    top: 0;
    background: #243747;
    transition: width .5s;
}

aside .first {
    height: 20px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 35px;
}

aside .first .logo {
    color: #243747;
    font-size: 30px;
    background: lightcyan;
    border-radius: 20px;
    transition: color 2s;
}

aside .first .logo:hover {
    color: crimson;
}

aside ul li {
    width: 100%;
    list-style-type: none;
    padding-top: 5px;
}

aside ul li a {
    display: block;
    padding-left: 20px;
    text-align: left;
    color: #fff;
    transition: color 2s;
}

aside .listtext {
    font-size: 30px;
    display: inline-block;
}

aside ul li a:hover {
    color: #000;
    background: lightblue;
}

.icon-package {
    width: 30px;
    height: 30px;
}

.btn {
    border-radius: 5px;
    border: 0;
    background: #243747;
    color: #fff;
    position: absolute;
    top: 50%;
    right: -12px;
    height: 44px;
    cursor: pointer;
}


/*mini*/

.minibody .listtext {
    display: none;
}

.minibody aside {
    width: 40px;
    text-align: center;
}

.minibody aside ul li a {
    padding-left: 0;
}

.minibody aside .first .logo {
    font-size: 12px;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实习第三周

    治电小白菜
  • JS滚动条触底加载更多

    https://codepen.io/klren0312/full/dybgayL

    治电小白菜
  • 震惊! 再也不怕蹭网被发现了!

    今天下了个wifi共享精灵, 连上了别人的网, 从此告别无网生活 于是顺手访问了下 192.168.0.1 居然不用输管理员密码就进入后台了...

    治电小白菜
  • python基础知识练习题(二)

    2、利用下划线将列表的每一个元素拼接成字符串,li = ['alex','eric','Witharush']

    py3study
  • 低频数字式相位测试仪的原理与使用

    随着电子测量技术的不断发展,相位测量已经成为测量技术中必不可少的一种测量方式,其中低频数字式相位测试仪的研制满足了各领域对于测量相位的需求,它能够精确测量两信号...

    时频专家
  • 12 个 Css 小技巧

    你不需要分别添加 line-height 到每个 <p>,<h*>等。只要添加到 body 即可:

    grain先森
  • 低频数字式相位测试仪的原理与使用

    随着电子测量技术的不断发展,相位测量已经成为测量技术中必不可少的一种测量方式,其中低频数字式相位测试仪的研制满足了各领域对于测量相位的需求,它能够精确测量两信号...

    时频专家
  • JS示例22-通过className查找元素

    专注APP开发
  • Python3 网络爬虫(一):初识网络爬虫之夜探老王家(2020年最新版)

    网络爬虫,是一门比较通用的基础技术,各个领域都会有所涉及,比如我做视觉算法的,也需要用到网络爬虫,例如调用 API 接口清洗数据等,这本质也都是一个小的爬虫程序...

    Jack_Cui
  • 每日一题 | 灾后重建问题

    出自codeforces联想杯的校园邀请赛,链接:https://codeforces.com/gym/102623/problem/H

    TechFlow-承志

扫码关注云+社区

领取腾讯云代金券