CODEWITHSUNDEEP
jqueryhtmlcss
vephelp
vephelp

Reputation: 542

display content when window width is more than certain value - jquery

html

<div id="navBar">
    <div class="navBarStyles">
        <ul class="mainNavBar">
            <li><div class="menu-icon">z</div>
                <ul>
                    <li><a href="#">WORKS</a></li>
                    <li><a href="#">ARTICLES</a></li>
                    <li><a href="#">EXTRA</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

css

@media only screen
    and (max-width : 500px) {

        #navBar .mainNavBar li ul{
            position: absolute;
            display: block;
            width: 100%;
            background-color: #FFFFFF;
            text-align: center;
        }
        #navBar .mainNavBar li ul a{
            color: #666666;
            display: block;
            text-align: center;
            width: 50px;
        }
        .mainNavBar{
            width: 500px;
        }
        #navBar .mainNavBar li ul{
            display: none;  /*hide*/
        }
    }

.menu-icon:hover{
    cursor: pointer;
    opacity: 1;
}

jquery

$(function() {                       
  $(".menu-icon").click(function() {  
    $("#navBar .mainNavBar li ul").toggle();     
  });
});

if($(window).width() > 500){
$(".mainNavBar").show();

}

jsFiddle

changed condition - still not working

Above code works fine, the only problem is when the width is less than 500 and user clicks on the z button to show the menu, then again clicks back to hide it, and the window is re-sized to greater than 500 the buttons doesn't show back. Please help. Need to fix the if statement in jquery code.

Upvotes: 3

Views: 2341

Answers (2)

krutssss
krutssss

Reputation: 964

Here you had pass below condition 

if($(window).width() > 500){
    $("#navBar .mainNavBar li ul").show();
}

That means when window width is more than 500 that time sub menu is display otherwise it does not display. So you have to change in this condition. like

   if($(window).width() > 200){
        $("#navBar .mainNavBar li ul").show();
   }

Or Change in Css.

#navBar .mainNavBar li ul{
     display: none;  /*hide*/
 }

Here remove display none.

#navBar .mainNavBar li ul{
         display: block;  /*hide*/
}

Upvotes: 1

Surjith S M
Surjith S M

Reputation: 6740

You can use another media query to do this.

Working Demo

CSS

@media only screen and (min-width : 500px) {
 #navBar .mainNavBar li ul {
   display: block!important;
 }    
}

The reason I've given !important is jquery is adding inline CSS to show and hide. So we need this to override.

If you don't want to use !importnat, Then you can try toggleClass

Upvotes: 3

Related Questions