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?


Recommended Answers

All 3 Replies

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

Try this

<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';

<style type="text/css">
background-color: #2cb823;
width: 15%;
margin-top: 8%;
margin-left: 5%;
background-color: #2754DE;
margin-top: 11px;
margin-top: -8.5%;
margin-left: 24%;
background-color: #2754DE;
width: 500px;
height: 200px;
<div class="menu">
<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>
<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>

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, learning, and sharing knowledge.