标签:splay display col 根据 var Fix item list containe
主要用到鼠标的 hover 事件,除了点击事件全部 css 完成 根据Bootstrap3的侧栏导航改编
<style> html, body, * { margin: 0; padding: 0; } #mine { position: relative; height: 100vh; width: 100%; background: cadetblue; } #side { position: fixed; height: 100%; } #toggle_side { width: 200px; background: #5bc0de; cursor: pointer; text-align: right; display: block; transition: all 0.5s ease; } #side_item { width: 200px; height: 97%; background: #30444b; text-align: center; overflow: hidden; transition: all 0.5s ease; } #side_item li { line-height: 30px; position: relative; list-style: none; z-index: 0; cursor: pointer; } #side_item li a { color: aliceblue; text-decoration: none; } #side_item li:before { background-color: #00b6a8; content: ‘‘; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 3px; z-index: -1; } #side_item li:hover a { color: #e91e63; transition: width 0.2s ease-in; } #side_item li:hover:before { width: 100%; } #overly { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: block; position: fixed; } #container { margin-left: 250px; transition: all 0.5s ease; } </style>
<div id="mine"> <div id="overly"></div> <aside id="side"> <i id="toggle_side">X</i> <div id="side_item"> <ul> <li><a href="#">11</a></li> <li><a href="#">22</a></li> <li><a href="#">33</a></li> <li><a href="#">44</a></li> <li><a href="#">55</a></li> </ul> </div> </aside> <div id="container"> <div class="row"> </div> </div> </div>
<script> var isClosed = true; $("#toggle_side").on(‘click‘, function () { if (isClosed) { $("#side_item").css(‘width‘, ‘0px‘); $("#toggle_side").css(‘width‘, ‘10px‘); $("#container").css(‘margin-left‘, ‘50px‘); $("#overly").hide(); isClosed = false } else { $("#side_item").css(‘width‘, ‘200px‘); $("#toggle_side").css(‘width‘, ‘200px‘); $("#container").css(‘margin-left‘, ‘250px‘); $("#overly").show(); isClosed = true } }) </script>
标签:splay display col 根据 var Fix item list containe
原文地址:https://www.cnblogs.com/caoxen/p/11543778.html