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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...