Geek Answers Handbook

Responsive Menu Issues

(Firstly, I would like to apologize if my English is bad sometimes, I am French, so it is difficult to explain in detail)

I work on a personal website, but I had a problem with my responsive navigation.

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

When I am above 1024 pixels, I have a regular navigation bar with a list. When I'm under 1024px, I got a small menu logo that appears, and a click event on it causes all the menus to appear and disappear.

But the problem is that if my menu is closed and I expand my window above 1024 pixels, the list does not appear, and I do not know how to deal with this 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 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 source list below 1024 pixels and show it with jquery when users click on the menu logo.

Again, sorry if this is hard to understand.

+5
source share
3 answers

After resolving the invalid HTML, you can try the following:

The problem is that the slideUp/Down function from slideUp/Down sets the display built-in property to the element itself, and then when you slideUp and resize the browser, the element is still hidden by the inline style:

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

You can solve this by adding this mediaquerie to make the element lock over 1024 :

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

Check out this Fiddle example.

+2
source

It's better to switch the class and add css transitions to make the effect of the slide, 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 need to bind the $(window).resize() event and check if the window is above / below 1024px.

0
source 
 $(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(); } });

When resizing a window, you should check the window size and show the navigation.

0
source

More articles:


All Articles