CODEWITHSUNDEEP
jquerymenu
ttmt
ttmt

Reputation: 4986

Responsive menu hidden on window resize

I have a jsfiddle here - http://jsfiddle.net/2r3Ap/

and a demo here - http://www.ttmt.org.uk/forum/

It's a simple responsive menu. When the window is resized the horizontal menu is moved to a vertical one and hidden. The red button then controls the nav menu scrolling up and down. When the window is resized larger the horizontal menu should show again.

Lots of these around, I thought it would be easy to recreate.

My Problem is:

If the window is resized smaller and vertical menu is open and closed with the button and then window is made bigger the navigation stays hidden.

I need the horizontal menu to appear when the window is resized larger when the vertical menu is open or closed.

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <title>Title of the document</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

      <style type="text/css">

        *{
          margin:0;
          padding:0;
        }
        header{
          max-width:600px;
          margin:0 auto;
          background:#aaa;
          overflow:auto;
          padding:30px 50px 0 50px;
          border-left:10px solid #fff;
          border-right:10px solid #fff;
        }
        button{
          width:30px;
          height:30px;
          background:red;
          display:none;
          border:none;
        }
        nav{
          margin:10px 0 0 0;
        }
        nav li{
          display:inline;
        }
        nav li a{
          float:left;
          display:inline-block;
          padding:5px;
          background:yellow;
          margin:0 5px 0 0 ;
        }
        nav li a:hover{
          background:#fff;
        }

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

          button{
            display:block;

          }
          nav{
            display:none;
          }
          nav li{
            display:block;
          }
          nav li a{
            float:none;
            display:block;
            padding:5px;
            background:yellow;
            margin:0 5px 0 0 ;
          }

        }
      </style>

      </head>

    <body>

      <div id="wrap">

        <header>
          <button></button>
          <nav>

            <ul>
              <li><a href="">One</a></li>
              <li><a href="">Two</a></li>
              <li><a href="">Three</a></li>
              <li><a href="">Four</a></li>

            </ul>
          </nav>  

        </header>  

      </div><!-- #wrap -->

      <script>

        $(function(){
          $('button').click(function(){
            $('nav').slideToggle();
          })
        })

      </script>

    </body>

    </html>

Upvotes: 2

Views: 8474

Answers (3)

chrisfargen
chrisfargen

Reputation: 1516

Another way that might be less resource-expensive is to use a callback function on the slideToggle method. The callback function will say, "When the animation is over, remove the inline display property and add a class to the element."

The new call to slideToggle will look like this:

$(function(){
  $('button').click(function(){
    $('nav').slideToggle(400, function(){
      $('nav').toggleClass('mobile-down').css('display', '');
    });
  });
});

And the CSS:

.mobile-down {
  display: block;   
}

Here is a modified fiddle.

For a further explanation, I just finished a self-answered question before finding this.

Upvotes: 2

James Coyle
James Coyle

Reputation: 10428

The problem is that it doesn't know that it should show the navigation bar when the screen is big enough. Simply add display: block to the nav styles outside of the media query.

nav{
    margin:10px 0 0 0;
    display: block;
}

jsFiddle

As a rule: anything you define in a media query should have a 'default' value outside of it.

Upvotes: 2

Code Maverick
Code Maverick

Reputation: 20425

@jimjimmy1995 has the simplest solution, but another way of going about it would be to use jQuery's .resize() method:

$(function ()
{
    var $window = $(window),
        $nav = $('nav'),
        $button = $('button');

    $button.on('click', function ()
    {
        $nav.slideToggle();
    });

    $window.on('resize', function ()
    {
        if ($window.width() > 400)
        {
            $nav.show();
        }
    });
});

See working jsFiddle demo

Upvotes: 2

Related Questions