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>
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
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.
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; }.......}
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.
Open in new window