Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 260
  • 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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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