Menu
This is my html where I have a pointing menu when the screen width is over 630px and a sidebar with a menu button when the screen width is less than 630px:
<nav class="ui inverted sidebar menu vertical slide out" id="m_menu">
<a href="index.php" class="item">
<i class="home icon"></i>Home
</a>
<a href="about.php" class="item">
<i class="user icon"></i>User
</a>
<a href="portfolio.php" class="item">
<i class="archive icon"></i> Portfolio
</a>
</nav>
<div id="menuDiv">
<nav class="ui inverted fluid four item pointing menu" id="menu">
<a href="index.php" class="item">
<i class="home icon"></i>Home
</a>
<a href="about.php" class="item">
<i class="user icon"></i>User
</a>
<a href="portfolio.php" class="item">
<i class="archive icon"></i> Portfolio
</a>
<a href="contact.php" class="item">
<i class="message icon"></i> Contact
</a>
</nav>
<div class="ui labeled icon button black" id="m_btn">
<i class="icon list layout"></i> Menu
</div>
</div>
<img src="http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg" alt="Table With Chairs">
This is my css:
body{
margin:0;
padding:0;
font-family:"helvetica",arial;
}
#menuDiv{
margin:40px 40px 0 40px;
text-align:center;
}
#menu:{
max-width:1024px;
margin:0 auto;
}
#m_btn{display:none;}
img{
width:100%;
height:auto;
position:absolute;
top:0;
z-index:-1;
}
@media all and (max-width:630px)
{
#menu{display:none;}
#m_btn{
display:inline-block;
}
}
/*fails to fix sidebar sidebar showing @width>=631px*/
@media all and (min-width:631px)
{
/*suggested on tutsplus,no change on applying*/
body.pushable{margin-left:0 !important;}
#m_menu.visible{
display:none;
}
}
When I resize the screen to 630px or lower,the horizontal navigation bar menu disappears and a button appears in the center of the page.A link to the screenshot is here
I open the sidebar and resize the screen to a width greater than 630px where it removes the menu items in the sidebar but not the sidebar itself.There is a screenshot here
How can I ensure that the sidebar disappears even if open at resolutions over 630px?
When the sidebar is open semantic ui wraps everything else into a pusher class and adds a pushable class to the body,it uses class visible to provide you with information about what the sidebar is doing,this is the reason for trying
@media all and (min-width:631px)
{
/*suggested on tutsplus,no change on applying*/
body.pushable{margin-left:0 !important;}
#m_menu.visible{
display:none;
}
}
This is what the DOM looks like with the sidebar visible:
<body class="pushable">
<nav class="ui inverted sidebar menu vertical slide out uncover left animating visible" id="m_menu">
<a href="index.php" class="item">
<i class="home icon"></i>Home
</a>
<a href="about.php" class="item">
<i class="user icon"></i>User
</a>
<a href="portfolio.php" class="item">
<i class="archive icon"></i> Portfolio
</a>
</nav>
<div class="pusher dimmed"><div id="menuDiv">
<nav class="ui inverted fluid four item pointing menu" id="menu">
<a href="index.php" class="item">
<i class="home icon"></i>Home
</a>
<a href="about.php" class="item">
<i class="user icon"></i>User
</a>
<a href="portfolio.php" class="item">
<i class="archive icon"></i> Portfolio
</a>
<a href="contact.php" class="item">
<i class="message icon"></i> Contact
</a>
</nav>
<div class="ui labeled icon button black" id="m_btn">
<i class="icon list layout"></i> Menu
</div>
</div><img src="http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg" alt="Table With Chairs"></div>
</body>
Here is a jsfiddle and a runnable
501
Thanks for updating the Fiddle example, the issue appears to be that there is a conflict between the visual changes being made by the CSS and jQuery. Also, there is no code anywhere forcing the mobile menu to hide once the screen size changes back to desktop.
The solution I came up with is first to adjust the CSS to cater for the major visual changes for each media query, then do the same for the jQuery changes using a listener that checks for changes to the screen width.
Here's a Fiddle of it in action
CSS
In case scripts are turned off, your CSS should always handle the basics of what you want to acheive. Otherwise, the page may break. This also has the huge benefit of less page load (never use JS when CSS can handle it).
You need to be explicit about what should happen to any mobile/non-mobile element if you change it at all using media queries. Given we're talking about something that has states: showing/hidden, you must specify what those states involve:
For you mobile layout:
@media all and (max-width:630px) {
/* First, hide the main menu */
#menu {
display:none;
}
/* then display the mobile menu */
#m_menu {
display:block;
}
/* lastly, show your mobile menu button */
#m_btn{
display:inline-block;
}
}
Desktop layout
Basically undo everything you did for the mobile version:
@media all and (min-width:631px) {
/* Hide the mobile menu */
#m_menu {
display:none;
}
/* Unhide the regular menu */
#menu{
display:block;
}
/* Lastly, hide the mobile menu button */
#m_btn{
display:none;
}
}
Alternately, you could remove the media query around the desktop styles altogether, as any styles specified outside of the (max-width:630px) will be applied regardless once 630px is exceeded.
jQuery
You can then apply a listener to check for when the width changes past your chosen breakpoint. It's tricky to grab the exact width, as '630' fired too wide, so I went with 617 as it matched the media query breakpoints closest.
Note that this only applies to resizing the screen, i.e. the user drags their browser size or changes their device orientation from portrait to landscape or vica versa.
Inside the if statement, which will only fire if the screen resizes to desktop size, we can then forcibly hide the #m_menu.
$(window).resize(function() {
// Detect if the resized screen is mobile or desktop width
if($(window).width() > 617) {
console.log('desktop');
$('#m_menu').sidebar('hide');
}
else {
console.log('mobile');
}
});
There's probably a better way of doing this last part, as .resize() may fire many times per second, and can slow the page noticeably.
In my experience building responsive sites, it's very useful to have a 'conditional javascript' snippet set up specifically for this sort of scenario that behaves in the same way as the media queries.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
