Trying to make popup menu push images down

[gregaryb]

See attached images.

 

Or here is the website if you want to play with it: http://www.gregsindigenouslandscapes.com.au/EasyWebStore/index.php#

It may make it a little easier to view the source without the PHP.

 

I have a nav menu on the left where one of the items has a little arrow.

When you click the arrow a popup menu appears below it.

If you click it again the popup menu disappears.

 

The problem is the popup menu is displaying over the top of an image below the nav menu.

 

I would prefer it to push the images down but I can't figure out how to do this.

 

HTML

<nav class="navigation">	<ul class="NavMenu">		<li class="NavMenuItem"><a href="index.php">Home</a></li>		<li class="NavMenuItem"><a href="CompanyProfile.php">Company Profile</a></li>		<li class="NavMenuItem"><a href="Store.php">Store</a>			<div class="NavMenuItemArrow"><a href="#" id="NavMenuItemArrow" onclick="doOnClick('NavMenuItemArrow', 'NavSubmenu')">▼</a>							<ul class="NavSubmenu" id="NavSubmenu">					<li class="NavMenuItem"><a href="Category1.php">Comparators</a></li>					<li class="NavMenuItem"><a href="Category2.php">LDR</a></li>					<li class="NavMenuItem"><a href="Category3.php">LED</a></li>					<li class="NavMenuItem"><a href="Category4.php">Operational Amplifiers</a></li>					<li class="NavMenuItem"><a href="Category5.php">Phototransistor</a></li>					<li class="NavMenuItem"><a href="Category6.php">Potentiometer</a></li>					<li class="NavMenuItem"><a href="Category7.php">Rectifier Diodes</a></li>					<li class="NavMenuItem"><a href="Category8.php">Resistor</a></li>					<li class="NavMenuItem"><a href="Category9.php">Schottky Diodes</a></li>					<li class="NavMenuItem"><a href="Category10.php">Transitors NPN</a></li>					<li class="NavMenuItem"><a href="Category11.php">Transistors PNP</a></li>					<li class="NavMenuItem"><a href="Category12.php">Zener Diodes</a></li>				</ul>							</div>		</li>	</ul> 	<div class="NavImage">		<img width="100%" alt="Navigation image 1" src="images/NavigationImage1.jpg" />	</div>	<div class="NavImage">		<img width="100%" alt="Navigation image 2" src="images/NavigationImage2.jpg" />	</div>	</nav><script type="text/javascript">	function doOnClick(strArrowLinkID, strSubmenuID)	{		var ArrowLinkField = document.getElementById(strArrowLinkID);		var Submenu = document.getElementById(strSubmenuID);		var strText = ArrowLinkField.innerHTML;		var strDown = String.fromCharCode(0x25BC);		var strUp = String.fromCharCode(0x25B2);		if (strText == strDown)		{			ArrowLinkField.innerHTML = strUp;			Submenu.style = "display:block;";		}		else		{			ArrowLinkField.innerHTML = strDown;			Submenu.style = "display:none;";		}	}	</script>

CSS

	/*************************/	/* Navigation submenu    */	/*************************/	.NavSubmenu{		behavior:url(CSSPie/PIE.htc); 		display:none;		list-style-type:none;		position:relative;		z-index:999;		background-color:#<?php echo $_SESSION["ContainerColor"]; ?>;		width:<?php echo $nNavigationWidth - 2; ?>px;		left:-<?php echo $nNavigationWidth - 16; ?>px;		top:-10px;		padding:0px 0px 0px 0px;		overflow:hidden;		border-style:solid;		border-width:thin;		border-color:transparent;	}	li > div > a + ul > li > a{		behavior:url(CSSPie/PIE.htc); 		display:block;		position:relative; 		background-color:#<?php echo $_SESSION["LinkColor"]; ?>;		color:#<?php echo $_SESSION["LinkFontColor"]; ?>;		font-family:<?php echo $_SESSION["LinkFont"]; ?>;		font-size:medium;		text-align:left;		margin-left:20px;		padding-left:2px;		width:<?php echo $nButtonWidth - 20; ?>px;		height:<?php echo $nButtonHeight; ?>px; 		line-height:<?php echo $nButtonHeight; ?>px;		vertical-align:middle;		top:0px;		left:0px;		border-radius:3px;		border-style:solid;		border-width:thin;		border-color:#<?php echo $_SESSION["ContainerColor"]; ?>;	}	li > div > a + ul > li > a:hover, li > div > a + ul > li > a:active{		behavior:url(CSSPie/PIE.htc); 		display:block;		position:relative; 		background-color:#<?php echo $_SESSION["HoverLinkColor"]; ?>;		color:#<?php echo $_SESSION["HoverLinkFontColor"]; ?>;		font-family:<?php echo $_SESSION["HoverLinkFont"]; ?>;		font-size:medium;		text-align:left;		margin-left:20px;		padding-left:2px;		width:<?php echo $nButtonWidth - 20; ?>px;		height:<?php echo $nButtonHeight; ?>px; 		line-height:<?php echo $nButtonHeight; ?>px;		vertical-align:middle;		top:0px;		left:0px;		border-radius:3px;		border-style:solid;		border-width:thin;		border-color:#<?php echo $_SESSION["HoverLinkFont"]; ?>;	}	/*************************/	/* Navigation image      */	/*************************/	.NavImage{		behavior: url(CSSPie/PIE.htc);		display:block;		position:relative;		border-style:solid;	    	border-radius:5px;	    	border-top-color:#<?php echo $_SESSION["DarkEdgeContainerColor"]; ?>;	    	border-left-color:#<?php echo $_SESSION["DarkEdgeContainerColor"]; ?>;	    	border-bottom-color:#<?php echo $_SESSION["LightEdgeContainerColor"]; ?>;	    	border-right-color:#<?php echo $_SESSION["LightEdgeContainerColor"]; ?>;		width:90%;		height:120%;		margin-left:auto;		margin-right:auto;		margin-top:20px;		overflow:hidden;	}

Edited July 5, 2014 by gregaryb

[gregaryb]

I worked out a javascript solution but I can't figure out how to do it with just CSS.

<nav class="navigation">	<ul class="NavMenu">		<li class="NavMenuItem"><a href="index.php">Home</a></li>		<li class="NavMenuItem"><a href="CompanyProfile.php">Company Profile</a></li>		<li class="NavMenuItem"><a href="Contact.php">Contact Details</a></li>		<li class="NavMenuItem"><a href="Store.php">Store</a>			<div class="NavMenuItemArrow"><a href="#" id="NavMenuItemArrow" onclick="doOnClick('NavMenuItemArrow', 'NavSubmenu')">▼</a>							<ul class="NavSubmenu" id="NavSubmenu">					<li class="NavMenuItem"><a href="Category1.php">Comparators</a></li>					<li class="NavMenuItem"><a href="Category2.php">LDR</a></li>					<li class="NavMenuItem"><a href="Category3.php">LED</a></li>					<li class="NavMenuItem"><a href="Category4.php">Operational Amplifiers</a></li>					<li class="NavMenuItem"><a href="Category5.php">Phototransistor</a></li>					<li class="NavMenuItem"><a href="Category6.php">Potentiometer</a></li>					<li class="NavMenuItem"><a href="Category7.php">Rectifier Diodes</a></li>					<li class="NavMenuItem"><a href="Category8.php">Resistor</a></li>					<li class="NavMenuItem"><a href="Category9.php">Schottky Diodes</a></li>					<li class="NavMenuItem"><a href="Category10.php">Transitors NPN</a></li>					<li class="NavMenuItem"><a href="Category11.php">Transistors PNP</a></li>					<li class="NavMenuItem"><a href="Category12.php">Zener Diodes</a></li>				</ul>							</div>		</li>	</ul>		<div id="Gap" style="display:none;">		<?php			for ($nI = 0; $nI < count($_SESSION["arrayCategories"]); $nI++)			echo "<p> </p>r";				?>		</div>	<div class="NavImage" id="NavImg1">		<img width="100%" alt="Navigation image 1" src="images/NavigationImage1.jpg" />	</div>	<div class="NavImage" id="NavImg2">		<img width="100%" alt="Navigation image 2" src="images/NavigationImage2.jpg" />	</div></nav><script type="text/javascript">	function doOnClick(strArrowLinkID, strSubmenuID)	{		var ArrowLinkField = document.getElementById(strArrowLinkID);		var Submenu = document.getElementById(strSubmenuID);		var Gap = document.getElementById("Gap");		var Content = document.getElementById("content");		var strText = ArrowLinkField.innerHTML;		var strDown = String.fromCharCode(0x25BC);		var strUp = String.fromCharCode(0x25B2);		if (strText == strDown)		{			ArrowLinkField.innerHTML = strUp;			Submenu.style = "display:block;position:relative;";			Gap.style = "display:block;position:relative;";			Content.style.height = "<?php echo $nContainerMinHeight + (count($_SESSION["arrayCategories"]) * $nButtonHeight * 1.5); ?>px";		}		else		{			ArrowLinkField.innerHTML = strDown;			Submenu.style = "display:none;";			Gap.style = "display:none;";			Content.style.height = "<?php echo $nContainerMinHeight; ?>px";		}	}	</script>

[dsonesuk]

The click to extent is only achievable through JavaScript.

Try to get the menu to extend and show within parent menu when hovered over, if you can do this you just have to remove the hover css that produced this and apply the JavaScript click event to reproduce this instead using the same css hover code.

Avoid position absolute, because you want submenu to have a area that other elements can detect and move down, using position absolute WILL, and maybe float MAY if not properly setup, prevent this happening as expected.