隐藏和显示导航栏

Question

这是我的导航栏在移动屏幕上的样子：

注意：我知道其他内容没有响应。我目前只在导航栏上工作。

好的，导航栏的代码是：-> 手写笔中的代码！！！

.nav
    display flex
    align-items center
    justify-content flex-end
    padding 1em
    background #232323
    position fixed
    top 0
    left 0
    width 100%
    z-index 5

    .nav-item
        list-style none
        display inline
        padding 1em

        a
            text-decoration none
            color #f7f7f7
            transition 1s
            padding-right 1em

        a:hover
            text-decoration underline

还有：

@media (max-width: 370px)
    .nav .nav-item a
        padding-right 0
        display block
        font-weight bold
        text-transform uppercase
        letter-spacing 0.1em
        line-height 2em
        height 2em
        border-bottom 1px solid #383838

    .nav .nav-item a:hover
        text-decoration none
        color #444

现在导航栏是粘性的，所以我不能一直打开它，否则屏幕会被截掉一半。那么我如何从我所获得的东西中做到能够显示和隐藏它呢？

Answer 1

您需要使用 JavaScript 或类似 jquery 的 js 库，使其在单击菜单按钮时向上滑动和向下滑动。 Jquery 有简单的动画功能，您可以使用，也可以自己编写

Answer 2

--截图--

编辑

早些时候我很困惑为什么这在 jQuery 比 1.8 更新的版本中不起作用，但我修复了它所以它可以工作到最新的

//NEW Code- works up to the latest jQuery
$(document).ready(function(){
$("#nav2").hide();
    $("#nav_button2").click(function(){
    $("#nav2").toggle('fast');
    });
});

//Original Code - works only up to 1.8.3
jQuery(document).ready(function(){
    jQuery('#nav').hide();
    jQuery('#nav_button').live('click', function(event) {    
    jQuery('#nav').toggle('fast');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- NEW -->
<input type='button' id='nav_button2' value='Navigation'>
<div id='nav2'>NAV CONTENT</div>
    
</br></br></br></br>    

<!-- OLD -->
<input type='button' id='nav_button' value='Navigation'>
<div id='nav'>NAV CONTENT</div>

https://jsfiddle.net/

隐藏和显示导航栏

Hide and Show Nav Bar

html

mobile-website

stylus