可切换的动画垂直导航栏
[英]Togglable animated vertical nav-bar
问题描述
所以我有一个滑动垂直导航栏。 我希望能够按下我的切换按钮，但它不会消失，只是停留在页面的顶部，而不是整个事情只是消失。我希望除了切换之外的一切。 谢谢
这是一个JSfiddle链接：
https://jsfiddle.net/fraserdale/31da97uc/
谢谢你的帮助
<body>
<div class="sidenav slideTogglebox">
<div class="toggle change" onclick="myFunction(this)" id="slideToggle">
<div class="bar1 animated fadeIn"></div>
<div class="bar2 "></div>
<div class="bar3 animated fadeIn"></div>
</div>
<ul class="sidebar-inner " id="modes">
<li class="gamemode fa fa-3x fa-dot-circle-o active animated fadeIn"><a href="#"></a></li>
<li class="gamemode fa fa-3x fa-pie-chart animated fadeIn"><a href="#"></a></li>
<li class="gamemode fa fa-3x fa-delicious animated fadeIn"><a href="#"></a></li>
<li class="gamemode fa fa-3x fa-line-chart animated fadeIn"><a href="#"></a></li>
<li class="gamemode fa fa-3x fa-braille animated fadeIn"><a href="#"></a></li>
</ul>
</div>
<p class="credit animated fadeIn">Memes Beta UI</p>
<script>
function myFunction(x) {
x.classList.toggle("change");
var x = document.getElementById('modes');
if (x.style.display === 'none') {
x.style.display = 'block'
} else {
x.style.display = 'none';
}
</script>
<script type="text/javascript">
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
</script>
</body>
2 个解决方案
解决方案1
0 已采纳 2017-05-01 00:06:34
像这样的东西？
$("#slideToggle").click(function(e) { $(this).toggleClass('change'); var $modes = $("#modes"), $sidenav = $('.sidenav'), timer = 1000; if ($(this).hasClass('change')) { $sidenav.animate({ height: '100vh' }, timer) } else { $modes.css('position','absolute'); var autoHeight = $('.sidenav').css('height', 'auto').height(); $sidenav.css('height', '100vh'); $modes.css('position','relative'); $sidenav.animate({ height: autoHeight }, timer) } });
body { background-color: #23272B; margin: 0px; padding: 0px; outline: none; } .credit { position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 15px; color: #fff; font-family: Verdana, Geneva, Tahoma, sans-serif } .sidenav { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #16191C; position: fixed; top: 0px; width: 125px; height: 100vh; color: #e1ffff; display: flex; flex-direction: column; } * { transition: all 500ms ease-out; -webkit-transition: all 500ms ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; font-family: open sans, sans-serif; } .sidebar-inner { padding-left: 25px; padding-right: 25px; transition: 0.4s; flex: 1 0 0; display: flex; flex-direction: column; justify-content: center; } ul .gamemode:hover { opacity: 1; background-color: #3B50D4; transition: 0.4s; } li { transition: all 500ms ease-out; -webkit-transition: all 500ms ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .active { background-color: #3B50D4; } .gamemode { /*border: 1px solid white;*/ width: 65px; color: #fff; font-size: 30px; text-align: center; padding: 15%; /*display: block;*/ } .toggle { cursor: pointer; width: 100%; padding: 25%; position: relative; background: #16191C; z-index: 1; } .bar1, .bar2, .bar3 { width: 45px; height: 5px; background-color: #333; margin: 6px; transition: 0.4s; } /* Rotate first bar */ .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } /* Fade out the second bar */ .change .bar2 { opacity: 0; } /* Rotate last bar */ .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Memes</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="assets/css/style.css"> <script src="https://use.fontawesome.com/9d0e231cc7.js"></script> </head> <body> <div class="sidenav slideTogglebox"> <div class="toggle change" id="slideToggle"> <div class="bar1 animated fadeIn"></div> <div class="bar2 "></div> <div class="bar3 animated fadeIn"></div> </div> <ul class="sidebar-inner " id="modes"> <li class="gamemode fa fa-3x fa-dot-circle-o active animated fadeIn"> <a href="#"></a> </li> <li class="gamemode fa fa-3x fa-pie-chart animated fadeIn"> <a href="#"></a> </li> <li class="gamemode fa fa-3x fa-delicious animated fadeIn"> <a href="#"></a> </li> <li class="gamemode fa fa-3x fa-line-chart animated fadeIn"> <a href="#"></a> </li> <li class="gamemode fa fa-3x fa-braille animated fadeIn"> <a href="#"></a> </li> </ul> </div> <p class="credit animated fadeIn">Memes Beta UI</p> </body> </html>
解决方案2
0 2017-05-01 00:09:05
我在切换上添加了一个课程。
$("#slideToggle").click(function() {
$(".sidebar-inner ").toggleClass("slide-menu");
});
侧面导航栏下拉菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.