Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 256
  • Last Modified:

mobile menu start closed

Hi,

I have a responsive menu and I want the menu (mobile sized) to start off closed.
This code works as the menu displays on all screen sizesand  I just want to start the menu off closed when the  screen is resized to a mobile length.

/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {
    #nav-status {
        display: none;    
    }

    ul {
        width: 100%;    
        min-height: 25px;
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-right: 1px solid #333;
        width: 96px;
        height: 21px;
        padding:2px;
        display: block;
        float: left;
        position: relative;    
    }

    ul li:last-child {
        border-right: none;
    }

    ul li ul {
        display: none;
        width: 100px;
        color:#fff;
        background:#666;
        position: absolute; 
        top: 25px; 
        left: 0px;
        overflow: hidden;
    }

    ul li:hover ul {
        display: block;    
    }
}

/* FOR MOBILE RESOLUTIONS */
@media screen and (max-width: 480px) {
    #nav-status {
        display: block;
        width: 100%;
        height: 21px;
        padding: 2px;
        background: #000;
        color: #FFF;   
    }

    ul {
       /* display: none;*/
        width: 100%;       
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-bottom: 1px solid #333;
        width: 100%;
        min-height: 21px;
        padding:2px;
        display: block;        
        position: relative;    
    }

    ul li:last-child {
        border-bottom: none;
    }

    ul li ul {
        display: block;
        width: 100%;
        color:#fff;
        background:#666;        
        overflow: hidden;
        position: relative;
    }        
}
<script>
$(document).ready(function(){
  

$("#nav-status").click(function(e) {
    e.preventDefault();
    $('#navigation').toggle();
});

});
</script>
</head>

<body>
<div id="wrapper">

<a href="#" id="nav-status">Open / Close</a>
<ul id="navigation">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
</ul>

     
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Open in new window

0
jagguy
Asked:
jagguy
  • 4
  • 4
1 Solution
 
Jagadishwor DulalBraces MediaCommented:
Add Check screen size first so that you can close the menu in mobile.
<script>
$(document).ready(function(){
	if(window.innerWidth<768){
		$('#navigation').hide();
	}
$("#nav-status").click(function(e) {
    e.preventDefault();
    $('#navigation').toggle();
});
});
</script>

Open in new window

0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Just remove the comments from
display:none

Open in new window

from the ul css in the mobile section...

Your present UL style in the css in the mobile resolution section...
  ul {
       /* display: none;*/
        width: 100%;       
        color:#fff;
        background:#CCC;
        overflow: visible;
  }

Open in new window


change it to...

  ul {
       display: none; // After removing the comments...
        width: 100%;       
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

Open in new window

0
 
jagguyAuthor Commented:
Hi,

That doesnt work.

The open/close button is what I am referring to. When I click the open/close is expands or hides the list of elements.
The default is to list the elements vertically when I resize the browser. I want the default behavior to have the list of elements hidden on mobile size so I need to click on the button to display the list .
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
See this.. My solution is working...

http://jsfiddle.net/IshaanRawat/tUULc/
0
 
jagguyAuthor Commented:
ok it works when I copied all your code.
I cant work out what code changes you did to make this work?
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
I just did what I said before .. I just removed the comments from here...

/* FOR MOBILE RESOLUTIONS */
@media screen and (max-width: 480px) {
....
.
.
 ul {
        display: none; // I just removed the comments from here (This line)...
        width: 100%;       
        color:#fff;
        background:#CCC;
        overflow: visible;
 }

...

..
.
.
}

Open in new window

0
 
jagguyAuthor Commented:
ok thanks for that.

One little issues, when I resize the browser to larger size after clicking the open/close button and keeping it closed, no links get displayed.


So I resize to small browser, click open and close again and when resize back to above 480px there is nothing to display.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
First note, that  you are making this for mobile..not for desktop... So.. its ok..!

And then I am finding no problem after re-sizing the browser in my jsfiddle link...
0
 
jagguyAuthor Commented:
in your jsfiddle the menu also disappears but I se your point.
I have other questions but I will start a new thread.

Well done.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now