Expand menu

Question

bsewell 0 Junior Poster in Training

14 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

Edited 14 Years Ago by bsewell because: n/a

2 Contributors
1 Reply
120 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

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 416 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