How to expand and collapse a responsive mobile menu

Question

I have created a responsive menu, all that is left is to make it toggle. I am unsure as how to show the menu when the word menu is pressed. By default the menu is collapsed, then when the menu button is pressed it expands and when the button is pressed again it collapases.

Could someone please help me out as I am new and unsure about this. I have uploaded my project onto 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

You can use javascript to change the attribute: I made a jsfiddle: http://jsfiddle.net/bLbdavqu/3/

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

You can wrap it inside a div to make it easier and then change the display from none to inline. Question: do you want to give users the change to hide the menu when they click again on menu? Or, if you are ready to use jquery, just use toggle:

$(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

    <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

You can use JQuery to toggle Menu http://jsfiddle.net/bLbdavqu/8/

Just Change the CSS of the ul.

Hide List- $( "#mylist" ).css("display","none");

Show List- $( "#mylist" ).css("display","block");

Answer 4

I think you want to show the menu items("Home","About Gnosis",etc) on click of link "menu" and again hide these items on click of link "menu" . I made a jsfiddle for you 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-->

Script :-

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

In CSS you just need to remove "float:left;" from "#pull" .

Hope this would help to you !!

Answer 5

here is the solution please see the code at

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

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

the updation of your requirements.