Solved

mobile menu start closed

Posted on 2013-05-29

1 solution

254 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

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

Join The Community

9 Comments

LVL 15

Expert Comment

by:Jagadishwor Dulal

ID: 392067052013-05-29

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

LVL 10

Expert Comment

by:Ishaan Rawat

ID: 392067682013-05-29

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

Author Comment

by:jagguy

ID: 392073702013-05-30

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 .

LVL 10

Expert Comment

by:Ishaan Rawat

ID: 392073912013-05-30

See this.. My solution is working...

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

Author Comment

by:jagguy

ID: 392074782013-05-30

ok it works when I copied all your code.
I cant work out what code changes you did to make this work?

LVL 10

Expert Comment

by:Ishaan Rawat

ID: 392075222013-05-30

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

Author Comment

by:jagguy

ID: 392076162013-05-30

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.

LVL 10

Accepted Solution

by:Ishaan Rawat

Ishaan Rawat earned 500 total points

ID: 392076512013-05-30

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...

Author Comment

by:jagguy

ID: 392076682013-05-30

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.

Featured Post

Question has a verified solution.

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

How a “Why Us” Page Makes Your Business Stand Out

Article by: Lexie

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.

7 Sure Fire Ways To Improve Your Web Performance Strategy

Article by: Anush

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…

Introduction to PHP: Building the Form

Video by: Jason

The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …