隐藏和显示导航栏

时间：2015-05-27 00:54:52

标签： html mobile-website stylus

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

enter image description here

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

好吧导航栏的代码是： - ＆gt;手写笔代码!!! 

.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

现在导航栏很粘，所以我不能一直打开它，否则屏幕的一半会被切断。那么如何从我能够展示和隐藏它的方式来实现呢？

2 个答案:

答案 0 :(得分：2)

- 剪断 -

修改

早些时候我很困惑为什么这个没有比1.8更新的jQuery工作但是我修复它以便它可以运行到最新的

＆＃13;
＆＃13; 
//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');
    });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

https://jsfiddle.net/

答案 1 :(得分：0)

您需要使用JavaScript或jsery这样的js库，使其在单击菜单按钮时向上滑动并向下滑动。 Jquery具有您可以使用的简单动画功能，或者您可以编写自己的

相关问题
最新问题