Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

mobile menu start closed

Posted on 2013-05-29

1 solution

Medium Priority

255 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 2000 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

Comparison of JS Frameworks: Angular.js vs React.js vs Ember.js

Article by: Serhiy

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.

What makes a professional email signature?

Article by: Exclaimer

Find out what you should include to make the best professional email signature for your organization.

Introduction to CSS (Part 1)

Video by: Jason

The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

Introduction to HTML (Part 2)

Video by: Jason

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…