该网站为IT技术、SEO技术、网络营销及推广分享博客,如有技术问题,可以互相交流,本人时间很重要,广告勿扰,联系QQ:747995996
当前位置:首页 > HTML技巧 > 正文

HTML可伸缩的联系方式侧边栏

12-06 HTML技巧

第一种写法:无图片

HTML可伸缩的联系方式侧边栏

HTML可伸缩的联系方式侧边栏

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩侧边栏</title>
    <style>
        * {
            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 1s;
            transition: margin-left 1s;
        }

        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;
        }
    </style>
</head>
<body>
    <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>
    <script>
        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"
            }
        }
    </script>
</body>
</html>



第二种写法:有图片

HTML可伸缩的联系方式侧边栏

HTML可伸缩的联系方式侧边栏

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧边栏小图标</title>
    <style>
        * {
    padding: 0;
    margin: 0;
}

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

a {
    text-decoration-line: none;
    color: #fff;
}
img{
    width: 30px;
    height: 30px;
}
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;
}
    </style>
</head>
<body>
    <aside>
        <button class="btn" onclick="list()">三</button>
        <ul>
            <li class="first">
                <div class="logo">
                    LOGO
                </div>

            </li>
            <li>
                <a href=""><img class="icon-package" src="http://www.bengenseo.com/uploads/allimg/181025/1-1Q025100050131.png" alt=""><span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href=""><img class="icon-package" src="http://www.bengenseo.com/uploads/allimg/181025/1-1Q025100050131.png" alt=""><span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href=""><img class="icon-package" src="http://www.bengenseo.com/uploads/allimg/181025/1-1Q025100050131.png" alt=""><span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href=""><img class="icon-package" src="http://www.bengenseo.com/uploads/allimg/181025/1-1Q025100050131.png" alt=""><span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href=""><img class="icon-package" src="http://www.bengenseo.com/uploads/allimg/181025/1-1Q025100050131.png" alt=""><span class="listtext"> and List</span></a>
            </li>
        </ul>
    </aside>
    <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>
</body>
</html>



由于现在默认是左边的侧边栏,可根据自己的需求来更改变成右边侧边栏  CSS(left - - > right   , margin-left - - > margin-right) JS(margin-left - - > margin-right)

转载请保留链接: http://www.bengenseo.com/html/77.html