Question

我创建了一个响应式菜单，剩下的就是切换它。我不确定如何在按下单词菜单时显示菜单。默认情况下，菜单会折叠，然后当按下菜单按钮时，它会展开，再次按下该按钮时会折叠。

有人可以帮助我，因为我是新手并且对此不确定。我已将我的项目上传到jsfiddle。 link http://jsfiddle.net/bLbdavqu/2/ HTML：

<div id="nav"><!--nav-->
    <div id="pull">
        <a href="#" id="pull">Menu</a>  
    </div>
    <ul>
        <li><a href="#.html">Home</a></li>
        <li class="active"><a href="#.html">About Gnosis</a>
            <ul>
                <li><a href="#.html">What is Gnosis</a></li>
                <li><a href="#.html">Origins of Gnosis</a></li>
                <li><a href="#.html">Foundations</a></li>
            </ul>      
        </li>
        <li><a href="#.html">Articles</a></li>
        <li><a href="#.html">FAQ</a></li>
        <li><a href="#.html">Courses</a></li>
        <li><a href="#.html">Centres</a></li>
        <li><a href="#.html">International</a></li>
   </ul>
</div><!--/nav-->

CSS：

 body {
     background:brown;
 }

#pull {
    display:none;
    float:left;
    height:auto;
    width:100%;
}

#pull img {
    float:right;
}


#nav{
    float:left;
    height:155px;
    width:63%; 
    background:url(../images/top-banner.png) no-repeat;
    background-position:bottom;
    background-size:100%;
    position:relative;
}

#nav ul {
    height:auto;
    width:100%;
    list-style-type:none;
    position:absolute;
    bottom:0;
    *zoom:1;
}

#nav ul li {
    float:left;
    padding-left:20px;
    position:relative;
}

#nav ul li a {
    font-family:Trajan-Pro;
    font-size:0.9em;
    color:#fff;
    text-decoration:none;
}

#nav ul li a:hover {
    color:#d2aa76;
    border-bottom:2px solid #d2aa76;
    padding-bottom:5px;
}

#nav ul li:hover > a {
    color:#d2aa76;
    border-bottom:2px solid #d2aa76;
    padding-bottom:5px;
}


/*1st level sub-menu */
#nav ul ul {
    display:none;
}

    #nav ul li:hover > ul {
        height:auto;
        width:180px;
        display:block;
    }

    #nav ul ul li:hover > a {
    color:#d2aa76;
    border-bottom:none;
}

#nav ul ul {
    padding:0;
    position:absolute;
    top:100%;
    padding-top:15px;
}

    #nav ul ul li {
        float:none;
        position:relative;
        padding:7px 0px;
        border-top:1px solid #000;

        background: #423d33;
        background: linear-gradient(top, #423d33 0%, #4a4843 40%);
        background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
        background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);

        -webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
        box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);

        transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;

    }
        #nav ul ul li a {
            font-size:0.8em;
            padding-left:15px;
        }

        #nav ul ul li a:hover {
            border-bottom:none;

        }

@media screen and (max-width: 1900px) {
    #logo {
        height:95px;
        width:100%;
        background:none;
    }

    #logo h1 {
        top:0;
        margin:0;
        padding-top:10px;
    }

    #header-container {
        height:auto;
    }

    #pull {
        display:block;
    }

    #nav {
        height:100%;
        width:100%;
        background:none;
        margin:0;
        padding:0;
        clear:both;
    }

    #nav ul {
        height:100%;
        position:static;
        margin:0;
        padding:0;
        display:block;
    }

     #nav ul > li {
        float: none;
    }

    #nav ul li {
        padding-left:0px;
    }

    #nav ul li a {
        display:block;
        padding: 9px 9px;
        position: relative;
        z-index:100;
    }

    #nav ul ul {
        position:relative;
         top:0;
         bottom:0;
         margin:0;
         padding:0;

    }
            #nav ul li:hover > ul {
            height:auto;
            width:100%;

        }

    #nav ul ul li   {
        border-top:none;
        background: #615f5b;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
        box-shadow:none;
    }

    #nav ul ul li a {
        display: block;
        padding-left:30px;
        position: relative;
        z-index: 100;
    }

   #nav ul > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
 }

Answer 1

您可以使用javascript更改属性：我做了一个jsfiddle：http://jsfiddle.net/bLbdavqu/3/

function show(){
    var show = document.getElementById('the_menu');
    show.setAttribute('style','display:inline');
}

您可以将其包装在div中以使其更容易，然后将显示从none更改为inline。问题：您是否希望在用户再次单击菜单时向用户进行更改以隐藏菜单？或者，如果您准备使用jquery，只需使用切换：

$(document).ready(function(){
$('button').click(function () {    
$("#toggle").toggle();
});});

http://jsfiddle.net/bLbdavqu/5/

Answer 2

    <div id="nav"><!--nav-->
        <div id="pull">
            <a href="#" id="pulls" onclick="show(1)">Menu</a>  
        </div><br/><br/>
        <div id="the_menu">
         <ul>
            <li><a href="#.html">Home</a></li>
            <li class="active"><a href="#.html">About Gnosis</a>
                <ul>
                    <li><a href="#.html">What is Gnosis</a></li>
                    <li><a href="#.html">Origins of Gnosis</a></li>
                    <li><a href="#.html">Foundations</a></li>
                </ul>      
            </li>
            <li><a href="#.html">Articles</a></li>
            <li><a href="#.html">FAQ</a></li>
            <li><a href="#.html">Courses</a></li>
            <li><a href="#.html">Centres</a></li>
            <li><a href="#.html">International</a></li>
        </ul>
        </div><!--/nav-->
    </div>

脚本

    <script>
    function show(ValueToggle){
        if(ValueToggle==1){
          $('#the_menu').show();
          $('#pulls').attr('onClick','show(0)');
        } else {
          $('#the_menu').hide();
          $('#pulls').attr('onClick','show(1)');
        }
    }
    </script>

Answer 3

您可以使用JQuery切换菜单http://jsfiddle.net/bLbdavqu/8/

只需更改ul的CSS。

隐藏列表 - $( "#mylist" ).css("display","none");

显示列表 - $( "#mylist" ).css("display","block");

Answer 4

我想你想点击链接＆＃34;菜单＆＃34;显示菜单项（＆＃34; Home＆＃34;，＆＃34;关于Gnosis＆＃34;等）和再次点击链接＆＃34;菜单＆＃34;隐藏这些项目。我为你做了一个jsfiddle http://jsfiddle.net/Tushar490/kL1dgvmr/6/

<div id="nav"><!--nav-->
<div id="pull">
    <a href="#" id="pull">Menu</a>  
</div>
    <div id="bs-example-navbar-collapse-2">
<ul>
    <li><a href="#.html">Home</a></li>
    <li class="active"><a href="#.html">About Gnosis</a>
        <ul>
            <li><a href="#.html">What is Gnosis</a></li>
            <li><a href="#.html">Origins of Gnosis</a></li>
            <li><a href="#.html">Foundations</a></li>
        </ul>      
    </li>
    <li><a href="#.html">Articles</a></li>
    <li><a href="#.html">FAQ</a></li>
    <li><a href="#.html">Courses</a></li>
    <li><a href="#.html">Centres</a></li>
    <li><a href="#.html">International</a></li>
</ul>
</div>
</div><!--/nav-->

脚本： -

$(document).ready(function () {   
$("#pull").on('click',function () {
$("#bs-example-navbar-collapse-2").toggle();
});   
});

在CSS中你只需要删除＆＃34; float：left;＆＃34;来自＆＃34; #draw＆＃34; 。

希望这会对你有所帮助!!

Answer 5

这是解决方案，请参阅

中的代码

$(document).ready(function(){
$('#test').hide();$('#pull').click(function () {$("#test").toggle();});});

http://jsfiddle.net/bLbdavqu/12/

更新您的要求。

如何扩展和折叠响应式移动菜单

5 个答案: