CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
Joseph Henriquez
Joseph Henriquez

Reputation: 23

Mobile Menu - expanding and collapsing

I have created a responsive mobile menu using jquery. Everything works fine except the toggling of the menu. By default the menu is expanded. I want the menu to be collapsed by default and when the word menu is clicked it expands and is then able to expand and collapse on selection. The only point of consideration in this is that there is also a normal navigation menu, which is displayed and layout differently. I wish for this menu to be always active. I only want the mobile menu to be hidden (collapsed) by default and then expanded on when clicked.

I have uploaded the projected onto jsfiddle: linkhttp://jsfiddle.net/qdhg0r9d/

thanks

Upvotes: 0

Views: 911

Answers (2)

JMir
JMir

Reputation: 177

$(document).ready(function () {
    if($(window).width() <= 640){
        $("#collapse-menu").toggle();
        $("#pull").on('click',function () {
            $("#collapse-menu").toggle();
        });   
    }
});

it only works depending on the screen width

Upvotes: 0

robobobobo
robobobobo

Reputation: 759

Just add 

@media screen and (max-width: 600px) {    
#collapse-menu{
    display:none;
    }
}

To your CSS this will hide it by default when the screen width is less than 600px, then when you click the toggle jQuery will over ride it for you by adding the inline style display:block; and display it again

Upvotes: 1

Related Questions