h5侧边栏滑动效果 根据Bootstrap3的侧栏导航改编
主要用到鼠标的 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 > <div ></div> <aside > <i >X</i> <div > <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 > <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>
- 上一篇 »css 等高布局
- 下一篇 »Javascript实现滚动条下拉时,侧边栏固定的实现