CSS and toggling display of DIV

HTML & CSS
1

I’m creating a hamburger menu for a mobile site. I added the icon and the div with the menu in it. I positioned the menu where I wanted it and it looks nice. I made the icon clickable and have it calling a piece of javascript to change the style property “display” of the menu div such that the menu is either displayed to not.

I tried setting the display initially “none” so it would not show upon page load. I thought the user could then press the icon to get the menu. It does not show up.

I then tried setting the display of the div, block and the menu shows upon page load and the button toggles the display of the menu. To get the menu to not be displayed when the page loads, I called the toggle javascript function onload to hide the menu. I’d rather not do this.

How do I hide the menu div such that I can still toggle the display property with javascript?

Mike

2

…a link or the code might be rather helpful or enlightening. :sunglasses:

coothead

3

http://www.rcda.org/w.html

4

Could you post an example of the page with your attempt to do it the way you want? It’s a pretty common thing to do, so there might have been a simple error that can be fixed. Here’s an example of a similar questions:

5

Try changing the JS to this:

<script language="javascript">
function ShowHide(){
	var yourUl = document.getElementById("hamburger-menu");
	yourUl.style.display = yourUl.style.display === 'none' ? 'block' : 'none';
}

</script>

Then change the css to this.

#hamburger-menu {display:none}

Generally though you would not create two menus but modify the existing one for mobile.

e.g.

I believe the OP already did that :smile:

Just close the window smaller and the hamburger will appear but you will also see the drop down menu flash on and off if you refresh the page at small screen.

1 Like
6

Yeah, I basically meant set the dropdown to display: none and restore the JS that wasn’t working properly.

7

Thanks PaulOB. I modified the JS as you suggested and the button now works like I expect except that I have to press it twice to get it to show the first time because when the menu loads the display style is empty. The first press sets the property to ‘none’. Any subsequent presses work like a champ. Now the menu does not display on load and then hide.

As for why I created a separate menu rather than modifying a single one, well, the site already has 2 menus, one at the top and one at the bottom. I’m mirroring the menu from the footer in the hamburger menu because the footer menu does not have the drop downs and is cleaner.

8

Add this extra line of js and move the script to the bottom of the html before the closing body tag.

e.g.

<script language="javascript">
document.getElementById("hamburger-menu").style.display = 'none';
function ShowHide(){
	var yourUl = document.getElementById("hamburger-menu");
	yourUl.style.display = yourUl.style.display === 'none'  ? 'block' : 'none';
}

</script>

</body>
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.