Member Avatar for ypdev

Hi All,

I would like to create navigation menu where all related links display in a small window
like Microsoft website.

Is this CSS or JS? can you help with direction where to start from?

Thanks...
Perry

  • 3 Contributors
  • 3 Replies
  • 193 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ypdev
Member Avatar for floatingDivs

JavaScript. The top-level bars ("Products", "Windows", etc) pass a javascript function from their <a> tag.

Member Avatar for george61

Try this

<html>
<head>
<script type="text/javascript">
function collap(id) { 
	
	if (document.getElementById) { // DOM3 = IE5, NS6
		if (document.getElementById(id).style.display == "none"){
			document.getElementById(id).style.display = 'block';			
		} else {
			document.getElementById(id).style.display = 'none';			
		}	
	} else { 
		if (document.layers) {	
			if (document.id.display == "none"){
				document.id.display = 'block';
			} else {	
				document.id.display = 'none';
			}
		} else {
			if (document.all.id.style.visibility == "none"){
				document.all.id.style.display = 'block';
			} else {
				document.all.id.style.display = 'none';
			}
		}
	}
}

</script>
<style type="text/css">
.menu{
background-color: #2cb823;
width: 15%;
margin-top: 8%;
margin-left: 5%;
}
a{
color:white;
}
a:hover{
color:blue;
background-color: #2754DE;
}
.para{
margin-top: 11px;
}
.box{
display:block;
margin-top: -8.5%;
margin-left: 24%;
background-color: #2754DE;
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<p class="para"><li><a href="#first" onmouseover="collap('first');">Highlights</a></li>
<li><a href="#second" onmouseover="collap('second');">Latest releases</a></li>
<li><a href="javascript:void(0)">Using your computer</a></li>
<li><a href="javascript:void(0)">For Business</a></li>
</p></ul>
</div>
<div class="box">
<div style="display: none; font: 18px arial; color: white;" id="first">Lorem ipsum trb hjet dfao faootea faipieta
aetae aetip eqipt ipin tewn pijg etwip ihpte ipijte ipite</div>
<div style="display: none; font: 18px arial; color: white;" id="second">adgad ipsum gdqy tqtet ipigag ipeitqet
dagdag eqtqet ipjipqet ipjpadg qeto[o eqtipiqet phpihtqe iphpihipag
etqtpih iepqthip pihgadipg tiqephtipqet paihgipdahg ipehtqipth</div>
</div>
</body>
</html>
Member Avatar for ypdev

Thank you both.... very helpful.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.