Jump to content
sarahfoxnz

Problem Hiding/showing a menu.

Recommended Posts

I started to follow the https://www.w3schools.com/w3css/w3css_navigation.asp  navigation page. However the menu I want required a bit more - with a few SELECT fields and a form. 

My page is here :- http://newtib.kwister.com/

 

The menu at the top (marked in HTML code as  <!-- NEW MENU -->  works fine. 

On  big/medium screen - it is the same, However on a small screen (mobile) I see a small button which says "HIDE MENU".  This is OK. & when I press the button, the menu hides itself.

PROBLEM: within 1-2 seconds of pressing the button, the menu reappears. I am wondering if someone can assist with finding a problem with the script ?

(on a mobile). 

if Div is hidden, show it it

if Div is visible, Hide it

 

I have TWO divs (one underneath). Which shows another button.  If one div is hidden, the other div is visible. its supposed to swap when the buttons are pressed..  

 

Share this post


Link to post
Share on other sites

Set the type attribute of the button: <button type="button"> so that it won't try to submit the form.

Share this post


Link to post
Share on other sites
34 minutes ago, Ingolme said:

Set the type attribute of the button: <button type="button"> so that it won't try to submit the form.

Thank you - That part worked. Ive fixed 1-2 other things as well, but Im baffled as to my next problem.

 

If i click on the button - It does hide the menu - which is good. But it does not make the 2nd div "menu1" visible. so the mobile-phone user cant make the menu re-appear.

(though if they go to another page - the top menu does reappear.. ) .. i may do cookies so the option carries forward.

 

Share this post


Link to post
Share on other sites

FIXED IT. Ive removed the w3-hide-small class  and added the style -  display: none;

<div id="menu1" class="w3-cell-row  w3-hide-large w3-hide-medium" style="width:75%; display: none;">

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×