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
  • 210 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ypdev

Dani AI

Generated

A modern "Microsoft-like" top navigation is best built with semantic HTML and CSS for layout, plus a small layer of JavaScript to handle interaction, keyboard access, and touch. was right to flag JavaScript; 's demo is a useful quick prototype, but it relies on inline handlers and legacy browser checks (document.layers/document.all). A cleaner, more maintainable approach uses semantic markup, CSS for positioning and transitions, and unobtrusive JS that toggles classes and ARIA attributes.

Recommended, practical steps:

  • Start with a semantic nav > ul > li structure where each top item either links or controls a panel (use a button when it opens a panel).
  • Style layout with CSS (flexbox/grid) and animate visibility with transform/opacity so animations are GPU-friendly.
  • Use JavaScript only to toggle a class and keep ARIA in sync: update aria-expanded on the trigger and aria-hidden on the panel. Prefer addEventListener over inline onmouseover/onmouseout.
  • Provide a functional no-JS fallback (panels visible or accessible via normal links) and a touch-friendly behavior (tap to open instead of hover).

Simple pattern (minimal example):

<nav>
  <ul>
    <li>
      <button class="top" aria-expanded="false" aria-controls="panel-products">Products</button>
      <div id="panel-products" class="panel" aria-hidden="true">…links…</div>
    </li>
  </ul>
</nav>

<script>
document.querySelectorAll('.top').forEach(btn => {
  btn.addEventListener('click', () => {
    const panel = document.getElementById(btn.getAttribute('aria-controls'));
    const open = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!open));
    panel.setAttribute('aria-hidden', String(open));
    panel.classList.toggle('open', !open);
  });
});
</script>

Troubleshooting tips: watch z-index and position on panels, use short open/close delays to avoid flicker, and add keyboard handlers (Enter/Space to open, Esc to close, arrow keys for navigation). That combination gives the Microsoft-style panels with better accessibility, cleaner code, and future compatibility for 's original goal.

Recommended Answers

All 3 Replies

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.