Welcome to WebmasterWorld Guest from 54.146.195.24

Forum Moderators: not2easy

Message Too Old, No Replies

Web Menu - expanding and collapsing - revisited

     
4:58 am on Oct 11, 2005 (gmt 0)

New User

10+ Year Member

joined:Mar 29, 2003
posts:4
votes: 0


I'd like to revisit the discussion on Web Menu - expanding and collapsing, "accordion style" by collymellon, from Apr 28, 2005.

I copied the code from that post and am really happy with the results except for one thing. I have several links that are not multi-level, so if you have clicked on a multi-level tread and then click on a single level thread, the menu doesn't reset. I am still learning css navigation menus so may be missing something. Javascript isn't my strong suit, so I just left that alone. I had already made my changes so the 2nd javascript example didn't do anything for me, so I just put it back.

I made some color and formatting changes to get my menu to look the way I wanted it. Here's my code:

<html>
<head>
<title>Accordion Menu Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 510px;
}
#menu {
width: 180px;
background: #4D5F92;
font: bold small-caps 0.8em/1.7 Arial, Helvetica, sans-serif;
margin-right: 10px;
}
a {
display: block;
text-decoration: none;
width: 100%;
line-height: 30px;
padding: 5px 0 5px 15px;
font: bold small-caps 1em/1.75 Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
float: left;
}
li {
display: inline;
}
#main li a:link,
ul#main li a:visited {
background: #4D5F92;
color: #FFFFFF;
border-top: 1px solid #999; /* main level */
}
#main li a:link:hover,
ul#main li a:visited:hover {
background: #8494C0;
}
#ul_one,
#ul_two,
#ul_three,
#ul_four {
display: none;
}
ul#main li ul.sub li a:link,
ul#main ul.sub li a:visited {
border-top: 1px solid #aaa; /* sub level */
background: #E8F0FF;
color: #638968;
}
ul#main li ul.sub li a:link:hover,
ul#main ul.sub li a:visited:hover {
background: #8494C0;
color:#fff;
}
</style>
<script type="text/javascript">
function changeOpenMenu(id){
var all_uls = new Array();
all_uls[0]='ul_one';
all_uls[1]='ul_two';
all_uls[2]='ul_three';
all_uls[3]='ul_four';
for(i=0;i<all_uls.length;i++){
document.getElementById(all_uls[i]).style.display = 'none';
}
the_ul = document.getElementById(id);
the_ul.style.display = 'block';
clearButtons();
}
function clearButtons() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
anchor.blur();
}
}
</script>
</head>
<body>
<div id="container">
<div id="menu">
<ul id="main">
<li><a href="#">Main Page</a></li>
<li><a href="#">Hacienda News</a></li>
<li id="li_one"><a href="javascript:changeOpenMenu('ul_one');">Our Staff</a>
<ul class="sub" id="ul_one">
<li><a href="#">Director</a></li>
<li><a href="#">House Parents</a></li>
</ul>
</li>
<li id="li_two"><a href="javascript:changeOpenMenu('ul_two');">Our Children</a>
<ul class="sub" id="ul_two">
<li><a href="#">Our Girls</a></li>
<li><a href="#">Our Boys</a></li>
</ul>
</li>
<li id="li_three"><a href="javascript:changeOpenMenu('ul_three');">Our Sponsors</a>
<ul class="sub" id="ul_three">
<li><a href="#">Twickenham</a></li>
<li><a href="#">Quito-Norte</a></li>
<li><a href="#">Bellevue</a></li>
</ul>
</li>
<li id="li_four"><a href="javascript:changeOpenMenu('ul_four');">Our Requests</a>
<ul class="sub" id="ul_four">
<li><a href="#">How Can I Help?</a></li>
<li><a href="#">Prayer Requests</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
</div>
</body>
</html>

5:02 am on Oct 11, 2005 (gmt 0)

New User

10+ Year Member

joined:Mar 29, 2003
posts:4
votes: 0


I also just noticed that there is no reference to in the style sheet to the <li id="li_one"> ect... Shouldn't there be something like:

#li_one {
something;
}
or
li#li_one {
something;
}

4:43 pm on Oct 11, 2005 (gmt 0)

New User

10+ Year Member

joined:Mar 29, 2003
posts:4
votes: 0


I found the solution at [tutorials.alsacreations.com...] The only issue I had was how to get a roll-over on the items that had submenus, but that was pretty easy to figure out. I just added a class. Here's my updated code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Vertical expanding menu in CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=changeMenu;
function changeMenu(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {
document.getElementById('smenu'+i).style.display='none';
}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels [tutorials.alsacreations.com...] */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
display: block;
text-decoration: none;
width: 100%;
line-height: 30px;
padding: 3px 0 3px 15px;
font: bold small-caps 1em/1.75 verdana, Arial, Helvetica, sans-serif;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 0;
height: 20px;
line-height: 20px;
text-align: left;
font-weight: bold;
border-top: 1px solid #999999;
background: #4D5F92; /* dark blue font */
}
dl#menu dd {
border-top: 1px solid #5E72AA;
background: #E8F0FF; /* very pale blue font */
}
dl#menu li {
text-align: left;
background: #E8F0FF; /* very pale blue font */
}
dl#menu dt.top a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border-top: 1px solid #5E72AA;
}
dl#menu dt.top a:hover {
background: #8494C0; /* medium blue font */
}
dl#menu li a,
dl#menu dt a {
color: #638968; /* green font */
text-decoration: none;
display: block;
border-top: 1px solid #AAAAAA;
height: 100%;
}
dl#menu li a:hover,
dl#menu dt a:hover {
background: #8494C0; /* medium blue font */
color: #fff;
}
-->
</style>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:changeMenu();" class="top"><a href="#">Main Page</a></dt>
<dt onclick="javascript:changeMenu('smenu2');" class="top"><a href="#">Our Staff</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Director</a></li>
<li><a href="#">House Parents</a></li>
</ul>
</dd>
<dt onclick="javascript:changeMenu('smenu3');" class="top"><a href="#">Our Children</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Our Girls</a></li>
<li><a href="#">Our Boys</a></li>
</ul>
</dd>
<dt onclick="javascript:changeMenu('smenu4');" class="top"><a href="#">Our Sponsors</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Twickenham</a></li>
<li><a href="#">Quito-Norte</a></li>
<li><a href="#">Bellevue</a></li>
</ul>
</dd>
<dt onclick="javascript:changeMenu('smenu5');" class="top"><a href="#">Our Requests</a></dt>
<dd id="smenu5">
<ul>
<li><a href="#">How Can I Help?</a></li>
<li><a href="#">Prayer Requests</a></li>
</ul>
</dd>
<dt onclick="javascript:changeMenu();" class="top"><a href="#">About Us</a></dt>
<dt onclick="javascript:changeMenu();" class="top"><a href="#">Contact Us</a></dt>
<dt onclick="javascript:changeMenu();" class="top"><a href="#">Site Map</a></dt>
</dl>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members