...

View Full Version : Drop Down Expand Menu



mumford
05-04-2006, 05:58 PM
Hi

I really like this menu http://www.pmob.co.uk/temp/drop-down-expand2.htm

What I need to happen is say the user clicks on 'About' then clicks on 'Services' I need the 'About' menu to fold up so it shows not of its sub menus.

Hope that makes sense. I would like to tinker with this but I no nothing about javascript.

Hope you can help

Thanks!

mumford
05-08-2006, 01:06 PM
Anyone got any ideas on this?

many_tentacles
05-08-2006, 01:14 PM
check this link out.... it's something i did a while ago and i think it'll do what you need

http://www.standardcraze.co.uk/testmenu2.htm

vwphillips
05-08-2006, 07:25 PM
took the liberty of 'simplifying' the code



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<script type="text/javascript" src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/styles.css" type="text/css">

<title>menu test</title>
<style type="text/css">
<!--
* {
padding: 0;
margin: 0;
}

html {
overflow-x: hidden;
}

body {
background-color: #E49969;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #000;
text-decoration: none;
}

a:hover{
text-decoration: underline;
color: #000;
}


/***********************************************/
/* Menu */
/***********************************************/
div.menu {
position: fixed;
left: 16px;
top: 118px;
}

ul.zzul {
list-style-type:none;
padding:0px;
margin:0px;
line-height:1;
}

li {
display:inline;
}

span.zzspace {
padding:2px;
}

a.mainlink, a.mainlink:visited{
width:100px;
font-size: 14px;
margin-top: 3px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #C64229;
font-weight: bold;
padding: 0px 0px 1px 5px;
color: #fff;
}

a.mainlink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #DC5C3F;
text-decoration: none;
}

a.sublink, a.sublink:visited{
font-size: 12px;
margin: 0px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #FFE4C5;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000;
text-decoration:none;
}

a.sublink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #DB8061;
text-decoration: none;
}

a.activelink, a.activelink:visited, a.activelink:hover{
font-size: 12px;
margin: 0px;
display: block;
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #ffffff;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000000;
text-decoration:none;
}



/********************* end **********************/

-->
</style>
<script language="JavaScript" type="text/javascript">
<!--

function ExpCont(obj){
if (!obj.ul){
obj.ul=obj.getElementsByTagName('UL')[0];
if (!obj.parentNode.ary){ obj.parentNode.ary=[]; }
obj.parentNode.ary.push(obj);
obj.ary=obj.parentNode.ary;
}

obj.ul.style.display=obj.ul.style.display=='none'?'':'none';
for (var zxc0=0;zxc0<obj.ary.length;zxc0++){
if (obj.ary[zxc0]!=obj){
obj.ary[zxc0].ul.style.display='none';
}
}
}
//-->
</script>

</head>

<body>

<div class="menu">


<ul style="list-style-type:none; margin:0; padding:5px; width: 115px;">

<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Housing</a>
<ul class="zzul" id="sp_0" style="display:none;">
<li><a href="#" class="sublink">Subsidence</a></li>
<li><a href="#" class="sublink">Structural Repairs</a></li>
<li><a href="#" class="sublink">Renovation</a></li>
<li><a href="#" class="sublink">Wall Ties</a></li>

<li><a href="#" class="sublink">Cracking</a></li>
<li><a href="#" class="sublink">Construction</a></li>
</ul>
</li>


<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Civil</a>
<ul class="zzul" id="sp_1" style="display:none;">
<li><a href="civil/masonry.htm" class="sublink">Masonry Bridges</a></li>

<li><a href="civil/strength.htm" class="sublink">Bridge Strengthening</a></li>
<li><a href="civil/concrete.htm" class="sublink">Concrete Repairs</a></li>
<li><a href="civil/ironstee.htm" class="sublink">Iron & Steel</a></li>
</ul>
</li>


<li onClick="ExpCont(this);" ><a class="mainlink">Environment</a>

<ul class="zzul" id="sp_2" style="display:none;">
<li><a href="enviro/structur.htm" class="sublink">Structural Repairs</a></li>
<li><a href="enviro/timber.htm" class="sublink">Timber Frames</a></li>
<li><a href="enviro/lintel.htm" class="sublink">Lintel Repairs</a></li>
<li><a href="enviro/arch.htm" class="sublink">Arch Repairs</a></li>
<li><a href="enviro/flinclay.htm" class="sublink">Flint & Clay Lump</a></li>

<li><a href="enviro/damprot.htm" class="sublink">Damp & Rot</a></li>
</ul>
</li>

<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Business</a>
<ul class="zzul" id="sp_3" style="display:none;">
<li><a href="business/structur.htm" class="sublink">Structural Repairs</a></li>
<li><a href="business/quality.htm" class="sublink">Quality</a></li>

<li><a href="business/partywal.htm" class="sublink">Party Walls</a></li>
<li><a href="business/warranty.htm" class="sublink">Warranties</a></li>
</ul>
</li>

<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Company Info</a>
<ul class="zzul" id="sp_4" style="display:none;">
<li><a href="company/about.htm" class="sublink">About Us</a></li>

<li><a href="company/clients.htm" class="sublink">Clients</a></li>
<li><a href="company/news.htm" class="sublink">News</a></li>
<li><a href="company/policies.htm" class="sublink">Company Policies</a></li>
<li><a href="company/opps.htm" class="sublink">Opportunities</a></li>
<li><a href="company/enquiries.htm" class="sublink">Enquiries</a></li>
</ul>

</li>

</div>

</body>
</html>

many_tentacles
05-08-2006, 08:18 PM
cheers vic... didnt have the time myself...

saxman
05-09-2006, 12:34 AM
I am trying to modify this menu (http://www.standardcraze.co.uk/testmenu2.htm) and am having a hard time.



I have two frames with this menu in the left. After expanding the menu, I am able to click on a sublink and then change the frame on the right. However, the menu collapses back up and I then have to reopen it again. What do I have to do in order to keep the menu expanded until I click on another mainlink?

thanks,
ss

saxman
05-09-2006, 05:18 PM
anyone have any suggestions?

thanks,
-s

vwphillips
05-09-2006, 10:02 PM
only done first link but


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<script type="text/javascript" src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/styles.css" type="text/css">

<title>menu test</title>
<style type="text/css">
<!--
* {
padding: 0;
margin: 0;
}

html {
overflow-x: hidden;
}

body {
background-color: #E49969;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #000;
text-decoration: none;
}

a:hover{
text-decoration: underline;
color: #000;
}


/***********************************************/
/* Menu */
/***********************************************/
div.menu {
position: fixed;
left: 16px;
top: 118px;
}

ul.zzul {
list-style-type:none;
padding:0px;
margin:0px;
line-height:1;
}

li {
display:inline;
}

span.zzspace {
padding:2px;
}

a.mainlink, a.mainlink:visited{
width:100px;
font-size: 14px;
margin-top: 3px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #C64229;
font-weight: bold;
padding: 0px 0px 1px 5px;
color: #fff;
}

a.mainlink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #DC5C3F;
text-decoration: none;
}

a.sublink, a.sublink:visited{
font-size: 12px;
margin: 0px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #FFE4C5;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000;
text-decoration:none;
}

a.sublink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #DB8061;
text-decoration: none;
}

a.activelink, a.activelink:visited, a.activelink:hover{
font-size: 12px;
margin: 0px;
display: block;
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #ffffff;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000000;
text-decoration:none;
}



/********************* end **********************/

-->
</style>
<script language="JavaScript" type="text/javascript">
<!--

function ExpCont(obj){
if (!obj.ul){
obj.ul=obj.getElementsByTagName('UL')[0];
if (!obj.parentNode.ary){ obj.parentNode.ary=[]; }
obj.parentNode.ary.push(obj);
obj.ary=obj.parentNode.ary;
}

obj.ul.style.display=obj.ul.style.display=='none'?'':'none';
for (var zxc0=0;zxc0<obj.ary.length;zxc0++){
if (obj.ary[zxc0]!=obj){
obj.ary[zxc0].ul.style.display='none';
}
}
}
//-->
</script>

</head>

<body>
<script language="JavaScript" type="text/javascript">
<!--
var zxcObj;

function Link(obj,url){
zxcObj=obj;
window.top.f2.location=url;
setTimeout("zxcObj.parentNode.parentNode.style.display='';",500);
}
//-->
</script>
<div class="menu">


<ul style="list-style-type:none; margin:0; padding:5px; width: 115px;">

<li onClick="ExpCont(this);" class="mainlink" ><a href="#" onclick="return false;" class="mainlink">Housing</a>
<ul class="zzul" id="sp_0" style="display:none;">
<li><a href="#" onclick="Link(this,'http://www.js-examples.com'); return false;" class="sublink">Subsidence</a></li>
<li><a href="#" class="sublink">Structural Repairs</a></li>
<li><a href="#" class="sublink">Renovation</a></li>
<li><a href="#" class="sublink">Wall Ties</a></li>

<li><a href="#" class="sublink">Cracking</a></li>
<li><a href="#" class="sublink">Construction</a></li>
</ul>
</li>


<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Civil</a>
<ul class="zzul" id="sp_1" style="display:none;">
<li><a href="civil/masonry.htm" class="sublink">Masonry Bridges</a></li>

<li><a href="civil/strength.htm" class="sublink">Bridge Strengthening</a></li>
<li><a href="civil/concrete.htm" class="sublink">Concrete Repairs</a></li>
<li><a href="civil/ironstee.htm" class="sublink">Iron & Steel</a></li>
</ul>
</li>


<li onClick="ExpCont(this);" ><a class="mainlink">Environment</a>

<ul class="zzul" id="sp_2" style="display:none;">
<li><a href="enviro/structur.htm" class="sublink">Structural Repairs</a></li>
<li><a href="enviro/timber.htm" class="sublink">Timber Frames</a></li>
<li><a href="enviro/lintel.htm" class="sublink">Lintel Repairs</a></li>
<li><a href="enviro/arch.htm" class="sublink">Arch Repairs</a></li>
<li><a href="enviro/flinclay.htm" class="sublink">Flint & Clay Lump</a></li>

<li><a href="enviro/damprot.htm" class="sublink">Damp & Rot</a></li>
</ul>
</li>

<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Business</a>
<ul class="zzul" id="sp_3" style="display:none;">
<li><a href="business/structur.htm" class="sublink">Structural Repairs</a></li>
<li><a href="business/quality.htm" class="sublink">Quality</a></li>

<li><a href="business/partywal.htm" class="sublink">Party Walls</a></li>
<li><a href="business/warranty.htm" class="sublink">Warranties</a></li>
</ul>
</li>

<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Company Info</a>
<ul class="zzul" id="sp_4" style="display:none;">
<li><a href="company/about.htm" class="sublink">About Us</a></li>

<li><a href="company/clients.htm" class="sublink">Clients</a></li>
<li><a href="company/news.htm" class="sublink">News</a></li>
<li><a href="company/policies.htm" class="sublink">Company Policies</a></li>
<li><a href="company/opps.htm" class="sublink">Opportunities</a></li>
<li><a href="company/enquiries.htm" class="sublink">Enquiries</a></li>
</ul>

</li>

</div>
<input id="Tst" >
</body>
</html>

saxman
05-09-2006, 11:47 PM
Vic,
That did not seem to work in firefox...

here is what I am dealing with..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<script type="text/javascript" src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/styles.css" type="text/css">

<title>menu test</title>
<style type="text/css">
<!--
* {
padding: 0;
margin: 0;
}

html {
overflow-x: hidden;
}

body {
background-color: #FFFFFF;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #000;
text-decoration: none;
}

a:hover{
text-decoration: underline;
color: #000;
}


/***********************************************/
/* Menu */
/***********************************************/
div.menu {
position: fixed;
left: 16px;
top: 20px;
}

ul.zzul {
list-style-type:none;
padding:0px;
margin:0px;
line-height:1;
left:50;
}

li {
display:inline;
}

span.zzspace {
padding:2px;
}

a.mainlink, a.mainlink:visited{
width:150px;
font-size: 18px;
margin-top: 3px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #DE1010;
font-weight: bold;
padding: 0px 0px 1px 5px;
color: #fff;
}

a.mainlink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #FF2929;
text-decoration: none;
}

a.sublink, a.sublink:visited{
width:150px;
font-size: 13px;
margin: 0px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #FFc1c1;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000;
text-decoration:none;
}

a.sublink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #FF8282;
text-decoration: none;
}

a.activelink, a.activelink:visited, a.activelink:hover{
font-size: 12px;
margin: 0px;
display: block;
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 25px solid #666;
border-right: 1px solid #999;
background-color: #ffffff;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000000;
text-decoration:none;
}



/********************* end **********************/

-->
</style>
<script language="JavaScript" type="text/javascript">
<!--

function ExpCont(obj){
/* if (obj.style == "mainlink") { */
if (!obj.ul){
obj.ul=obj.getElementsByTagName('UL')[0];
if (!obj.parentNode.ary){ obj.parentNode.ary=[]; }
obj.parentNode.ary.push(obj);
obj.ary=obj.parentNode.ary;
}

obj.ul.style.display=obj.ul.style.display=='none'?'':'none';
for (var zxc0=0;zxc0<obj.ary.length;zxc0++){
if (obj.ary[zxc0]!=obj){
obj.ary[zxc0].ul.style.display='none';
}
}
/* } */
}
//-->
</script>

</head>

<body>

<div class="menu">


<ul style="list-style-type:none; margin:0; padding:5px; width: 115px;">
<li onClick="ExpCont(this);" ><a href="http://www.yahoo.com" class="mainlink" target="main">New Patient</a>
<ul class="zzul" id="sp_0" style="display:none;">



<li>
<a href="Movies/New Patient/DP01.htm" class="sublink" target="main">Login and select patient</a>

</li>
<li>
<a href="Movies/New Patient/DP02.htm" class="sublink" target="main">Review facesheet</a>
</li>
<li>
<a href="Movies/New Patient/DP03.htm" class="sublink" target="main">Chief complaint</a>
</li>
<li>

<a href="Movies/New Patient/DP04.htm" class="sublink" target="main">HPI for chief complaint</a>
</li>
<li>
<a href="Movies/New Patient/DP05.htm" class="sublink" target="main">HPI for second complaint</a>
</li>
<li>
<a href="Movies/New Patient/DP06.htm" class="sublink" target="main">PE</a>

</li>
<li>
<a href="Movies/New Patient/DP07.htm" class="sublink" target="main">Procedures</a>
</li>
<li>
<a href="Movies/New Patient/DP08.htm" class="sublink" target="main">DX</a>
</li><li>
<a href="Movies/New Patient/DP09.htm" class="sublink" target="main">Orders</a>

</li><li>
<a href="Movies/New Patient/DP10.htm" class="sublink" target="main">Rx</a>
</li><li>
<a href="Movies/New Patient/DP11.htm" class="sublink" target="main">Note</a>
</li><li>
<a href="Movies/New Patient/DP12.htm" class="sublink" target="main">Charges</a>
</li><li>

<a href="Movies/New Patient/DP13.htm" class="sublink" target="main">Annotate and sign note</a>
</li>
<li>
<a href="Movies/New Patient/DP14.htm" class="sublink" target="main">Review tests</a>
</li>
</ul>
</li>

</div>

</body>
</html>

vwphillips
05-10-2006, 08:50 AM
Did you use


<script language="JavaScript" type="text/javascript">
<!--
var zxcObj;

function Link(obj,url){
zxcObj=obj;
window.top.f2.location=url;
setTimeout("zxcObj.parentNode.parentNode.style.display='';",500);
}
//-->
</script>
<div class="menu">


<ul style="list-style-type:none; margin:0; padding:5px; width: 115px;">

<li onClick="ExpCont(this);" class="mainlink" ><a href="#" onclick="return false;" class="mainlink">Housing</a>
<ul class="zzul" id="sp_0" style="display:none;">

saxman
05-10-2006, 05:09 PM
I did use that and that did not seem to work. Everytime you click on a sublink, the menu still collapses back...

I tried this at the beginning of the sublinks, but this just kept the menu expanded when I opened the webpage.

<ul class="zzul" id="sp_x" style="display:block;">

however, the meny still collapses when you click on a sublink.

thanks for your help,
S



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum