Solved

mobile menu start closed

Posted on 2013-05-29
9
253 Views
Last Modified: 2013-05-30
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
Comment
Question by:jagguy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39206705
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
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39206768
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
 

Author Comment

by:jagguy
ID: 39207370
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39207391
See this.. My solution is working...

http://jsfiddle.net/IshaanRawat/tUULc/
0
 

Author Comment

by:jagguy
ID: 39207478
ok it works when I copied all your code.
I cant work out what code changes you did to make this work?
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39207522
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
 

Author Comment

by:jagguy
ID: 39207616
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
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39207651
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
 

Author Comment

by:jagguy
ID: 39207668
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Sending HTML Formatted Email from ASP.NET 2 57
PDF Turn Look 7 36
Jquery syntax 12 30
How to change normal array form to associative in javascript 1 24
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question