Jump to content

Trying to make popup menu push images down


gregaryb

Recommended Posts

See attached images.

 

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;	}
Link to comment
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
×
×
  • Create New...