Expand menu

Question

bsewell 0 Junior Poster in Training

16 Years Ago

I'm trying to create a dynamic menu using jQuery, so I've built a basic one and I'm having problems making it look more impressive. At the moment, I can click on an item and the contents will be displayed above the rest of them. I want the content to slide down underneath an item, so it doesn't cover up the other items.

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
     $(document).ready(function(){
                    $("#historyMenuTitle").click(function(){
                    if ($("#historyMenu").is(":hidden")){
						$("#awardsMenu").slideUp("slow");
						$("#historyMenu").slideDown("slow");
                    }
                    else{
                        $("#historyMenu").slideUp("slow");
                    }
					});
					
					$("#awardsMenuTitle").click(function(){
                    if ($("#awardsMenu").is(":hidden")){
						$("#awardsMenu").slideDown("slow");
                    }
                    else{
                        $("#awardsMenu").slideUp("slow");
                    }
                });
				
					$("#galleryMenuTitle").click(function(){
                    if ($("#galleryMenu").is(":hidden")){
						$("#historyMenu").slideUp("slow");
						$("#galleryMenu").slideDown("slow");
                    }
                    else{
                        $("#galleryMenu").slideUp("slow");
                    }
                });
			});
		</script>

<div id="menu">
  <div id="historyContainer">
    <div id="historyMenuTitle">Our History</div>
    <div id="historyMenu"><a href="Our_team.php">Our Team (Committee, Designers &amp; Staff)</a><br />
      <a href="Supporters_and_sponsers.php">Our Supporters &amp; Sponsors</a></div>
  </div>
  <div id="awardsContainer">
    <div id="awardsMenuTitle">AWARDS</div>
    <div id="awardsMenu"><a href="">ABC</a><a href="">ABC</a><br />
      <a href="">ABC</a><br />
      ABC<br/>
      <a href="">ABC</a><br />
      <a href="">ABC</a></div>
  </div>
</div>
<div id="galleryContainer">
  <div id="galleryMenuTitle">Gallery</div>
  <div id="galleryMenu"><a href="">ABC</a><a href="">ABC</a><a href="">ABC</a><a href="">ABC</a></div>
</div>
</div>

#menu {
	position:absolute;
	top:75px;
	left:0px;
	width:15%;
	height:auto;
}
#historyContainer {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:auto;
	z-index:3;
}
#historyMenuTitle {
	height:auto;
	width:200px;
	background-color:#ffffff;
	display:block;
	color:#0000FF;
	font-size:24px;
	font-weight:bold;
	cursor:pointer;
	z-index:3;
}
#historyMenu {
	height:auto;
	width:200px;
	background-color:#ffffff;
	display:none;
	z-index:3;
}
#awardsContainer {
	position:absolute;
	top:40px;
	left:0px;
	height:auto;
	width:100%;
	z-index:2;
}
#awardsMenuTitle {
	height:auto;
	width:150px;
	background-color:#ffffff;
	display:block;
	color:#0000FF;
	font-size:24px;
	font-weight:bold;
	cursor:pointer;
	z-index:2;
}
#awardsMenu {
	height:auto;
	width:150px;
	background-color:#ffffff;
	display:none;
	z-index:2;
}
#galleryContainer {
	position:absolute;
	top:160px;
	left:0px;
	width:100%;
	height:auto;
	z-index:1;
}
#galleryMenuTitle {
	height:auto;
	width:150px;
	background-color:#ffffff;
	display:block;
	color:#0000FF;
	font-size:24px;
	font-weight:bold;
	cursor:pointer;
	z-index:1;
}
#galleryMenu {
	height:auto;
	width:150px;
	background-color:#ffffff;
	display:none;
	z-index:1;
}

Any idea what I need to do?

Cheers,

javascript:jquery

Edited 16 Years Ago by bsewell because: n/a

2 Contributors
1 Reply
155 Views
2 Days Discussion Span
Latest Post 16 Years Ago Latest Post by Airshow

Dani AI

Generated 9 Months Ago

Good fix from and a helpful starting point from . The example on the thread gets the visual behavior working, but for a robust, long‑term widget it helps to think about three things the original answers did not fully cover: semantics & accessibility, modern event wiring/maintainability, and animation/performance.

Use semantic controls and ARIA so the menu is keyboard‑friendly and works for screen readers. Prefer a real control (for example a button or the native details/summary element) instead of clickable divs. Expose state with aria-expanded and link title to panel with aria-controls; give the panel role="region" or hidden when collapsed. See the WAI‑ARIA accordion pattern and the aria-expanded reference for recommended keyboard handling and attributes: WAI‑ARIA accordion pattern, aria-expanded on MDN. Minimal accessible markup looks like:

<button aria-expanded="false" aria-controls="panel-history" id="history-btn">Our History</button>
<div id="panel-history" role="region" aria-labelledby="history-btn" hidden> …content… </div>

Make the JavaScript easy to maintain: attach a single delegated handler to the menu container and use data- attributes or classes instead of hardcoded IDs for every item. In modern JS prefer let/const, forEach or event delegation to avoid classic closure/var pitfalls and to make adding items trivial. For animation, favor toggling a CSS class and letting CSS transitions or the native details animation handle the visual change; this reduces layout thrash and gives smoother, GPU-friendly results.

Quick troubleshooting checklist: validate HTML (no stray closing tags), ensure panels are part of normal document flow so expansion pushes content down, test keyboard navigation and screen reader output, and inspect computed styles during open/close to catch unexpected positioning.

Reply to this topic

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.

Airshow 425 WiFi Lounge Lizard Team Colleague · Answer 1 · 2010-09-11T21:24:55+00:00

B,

You are 90% there. Just a few tweeks necessary.

The main problenm is that the menuContainers have position:absolute , which (if I understand correctly) is giving the wrong visual effect.

The CSS can be simplified by using classes to avoid unnecessary repetition.

There's an extra </div> in the HTML, which forces Gallery out of the "menu" div.

The javascript needs a few tweeks so that each menu causes all others to close.

Here's a working version (with a little sexy styling):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#menu {
	position: absolute;
	top: 75px;
	left: 0px;
	width: 200px;
	font-family: arial;
}

#menu a {
	color: #336666;
	text-decoration: none;
}
#menu a:hover {
	color: #003333;
	text-decoration: underline;
}

#menu .container {
	margin-bottom: 2px;
}
#menu .title {
	padding-left: 6px;
	background-color: #336699;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
}
#menu .menu {
	padding-left: 6px;
	background-color: #C3D7EA;
	border-bottom: 1px solid #336699;
	font-size: 12px;
	display: none;
}
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#historyMenuTitle").click(function(){
		if ($("#historyMenu").is(":hidden")){
			$("#awardsMenu").slideUp("slow");
			$("#galleryMenu").slideUp("slow");
			$("#historyMenu").slideDown("slow");
		}
		else{
			$("#historyMenu").slideUp("slow");
		}
	});

	$("#awardsMenuTitle").click(function(){
		if ($("#awardsMenu").is(":hidden")){
			$("#historyMenu").slideUp("slow");
			$("#galleryMenu").slideUp("slow");
			$("#awardsMenu").slideDown("slow");
		}
		else{
			$("#awardsMenu").slideUp("slow");
		}
	});

	$("#galleryMenuTitle").click(function(){
		if ($("#galleryMenu").is(":hidden")){
			$("#awardsMenu").slideUp("slow");
			$("#historyMenu").slideUp("slow");
			$("#galleryMenu").slideDown("slow");
		}
		else{
			$("#galleryMenu").slideUp("slow");
		}
	});
});
</script>
</head>

<body>

<div id="menu">
  <div id="historyContainer" class="container">
    <div id="historyMenuTitle" class="title">Our History</div>
    <div id="historyMenu" class="menu"><a href="Our_team.php">Our Team (Committee, Designers &amp; Staff)</a><br />
      <a href="Supporters_and_sponsers.php">Our Supporters &amp; Sponsors</a></div>
  </div>
  <div id="awardsContainer" class="container">
    <div id="awardsMenuTitle" class="title">Awards</div>
    <div id="awardsMenu" class="menu"><a href="">ABC</a><br />
      <a href="">ABC</a><br />
      <a href="">ABC</a><br />
      <a href="">ABC</a></div>
  </div>
  <div id="galleryContainer" class="container">
    <div id="galleryMenuTitle" class="title">Gallery</div>
    <div id="galleryMenu" class="menu"><a href="">ABC</a><br />
      <a href="">ABC</a><br />
      <a href="">ABC</a><br />
      <a href="">ABC</a></div>
  </div>
</div>

</body>
</html>

With a little imagination, the javascript can be proceduralised to make it much shorter, though actually no more efficient, but much easier to add further menus. Try this:

$(document).ready(function(){
	var menus = ['history', 'awards', 'gallery', 'contact'];
	for(var i=0; i<menus.length; i++){
		$("#"+menus[i]+"MenuTitle").click(function(){
			for(var i=0; i<menus.length; i++){
				var menuTitleID = menus[i]+"MenuTitle";
				var menu = $("#" + menus[i] + "Menu");
				((this.id === menuTitleID) && menu.is(":hidden"))?
				  menu.slideDown("slow"):
				  menu.slideUp("slow");
			}
		});
	}
});

To add further menus simply add the appropriate HTML and edit the line var menus = ['history', 'awards', 'gallery']; Airshow