CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mnX_87
mnX_87

Reputation: 53

Responsive menu issues

(First I'd like to apologize if my English is bad sometimes, I'm French, so it's kinda difficult to explain everything in details )

I'm working on a personal website, but i got a problem with my responsive navigation.

I made a media query for screen size under 1024px.

When I'm above 1024px, I have my regular navigation bar made with a list. When I'm under 1024px, I got the small menu logo that appears, and a click event on it makes the whole menu appear and disappear.

But the problem is that if my menu is closed and I expand my window above 1024 pixels, the list isn't visible, and I don't know how to deal with that problem.

Here is my code :

        <nav class="fixed_nav">
        <div id="nav_left">
            <img id="logo_nav" src="img/mini_trombi.png" alt="logo"/>
            <p id="txt_nav">123</p>
        </div>
        <ul class="topnav">
            <div id="show_n_hide_nav" class="responsive_link_bg">
                <li><a id="top_nav_link" class="nav_links" href="#">ITEM 1</a></li>
                <hr class="responsive_separator">
                <li><a class="nav_links" href="#">ITEM 2</a></li>
                <hr class="responsive_separator">
                <li><a class="nav_links" href="#">ITEM 3</a></li>
            </div>
            <li class="icon">
                <a div id="button_nav" class="menu_icon" href="javascript:void(0);">&#9776;</a>
            </li>
        </ul>
    </nav>

Jquery for the click: 

$(function(){
  $("#button_nav").click(function () {
      if(!$("#show_n_hide_nav").is(":visible")){
          $("#show_n_hide_nav").slideDown("slow");
      } else {
          $("#show_n_hide_nav").slideUp("slow");
      }
  });
});

In my css, I hide the original list under 1024 pixels, and show it with the help of jquery when the users clicks on the menu logo.

Again, sorry if it's hard to understand.

Upvotes: 5

Views: 89

Answers (3)

Ashish Mehta
Ashish Mehta

Reputation: 7426

$(function(){
  $("#button_nav").click(function () {
      if(!$("#show_n_hide_nav").is(":visible")){
          $("#show_n_hide_nav").slideDown("slow");
      } else {
          $("#show_n_hide_nav").slideUp("slow");
      }
  });
});
$(window).resize(function(){
   if($(window).width() > 1024){
      $("#show_n_hide_nav").show();
   }
});

On window resize you have to check window size and show nav.

Upvotes: 0

DaniP
DaniP

Reputation: 38252

After you solve the invalid HTML, you can try this:

The problem is the slideUp/Down function from Jquery sets inline the display property to the element itself, then when you slideUp and resize the browser the element is still hidden with inline style:

<li id="show_n_hide_nav" class="responsive_link_bg" style="display: none;">

You can solve it adding this mediaquerie to force the element be block over 1024:

@media (min-width:1025px) {
  #show_n_hide_nav {
    display: block !important;
  }
}

Check this example Fiddle

Upvotes: 2

Martin Hučko
Martin Hučko

Reputation: 791

You better toggle class and add css transitions to do slide effect and if you're above 1024, just ignore the show class.

$("#button_nav").click(function () {
   $("#show_n_hide_nav").toggleClass("show");
});

If you still want to use slideDown()/slideUp(), you have to bind $(window).resize() event and check whether the window is above/under 1024px.

Upvotes: 0

Related Questions