PDA

Click to See Complete Forum and Search --> : menu and submenu

little_lisa
11-11-2003, 03:14 PM
Ive been fiddling with a script from html goodies.

The drop down menu works fine, however I would like the submenu to disappear went the main heading is clicked on for a second time.
IE menu heading = welcome
submenu = about us
submenu = FAQ

etc etc

When "welcome" is clicked on, the submenu drops down. I would like the submenu to then disapear when "welcome" is clicked on again.

Is this possible using the code below.
Please note this script is used with a frames page.

CODE

<HTML>
<TITLE>Pull-Down Menus</TITLE>

<HEAD>

<STYLE TYPE="text/css">

#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
#menu4 { display : none }
#menu5 { display : none }

a:link {color:black; text-decoration:none}
a:hover {color:pink; text-decoration:underline}

</STYLE>

<HEAD>

<BODY BGCOLOR="FFFFFF">


<TABLE BORDER="0" ALIGN="left">

<TR>
<TD VALIGN="top" WIDTH="200">
<SPAN onClick="document.all.menu1.style.display = 'block'">
<b><IMG SRC="http://www.cakedesigners.co.uk/barpinkwelcome.gif"></b></SPAN><BR>
<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'block'">

<FONT SIZE="3">&nbsp;<A HREF="http://www.cakedesigners.co.uk/welcome.html" TARGET="right">Welcome</a></FONT><BR>
<FONT SIZE="3">&nbsp;<A HREF="http://www.cakedesigners.co.uk/comments.html" TARGET="right">Testimonials</A></FONT><BR>
<FONT SIZE="3">&nbsp;<A HREF="http://www.cakedesigners.co.uk/mailorder.html" TARGET ="right">Mail Order</A></FONT><BR>
<FONT SIZE="3">&nbsp;<A HREF="http://www.cakedesigners.co.uk/FAQ.html" TARGET ="right">Shopping & FAQ</A></FONT>

</SPAN>
</TD>
</TR>

<TR>
<TD VALIGN="top" WIDTH="200">
<SPAN onClick="document.all.menu2.style.display = 'block'">
<b><IMG SRC="http://www.cakedesigners.co.uk/barpinkgallery.gif"></b></SPAN><BR>
<SPAN ID="menu2" onClick="document.all.menu2.style.display = 'none'">

<FONT SIZE="3">&nbsp;<A HREF="http://www.cakedesigners.co.uk/novelty1.html TARGET ="right">Novelty Cake Pictures</A></FONT><BR>
<FONT SIZE="3">&nbsp;<A HREF="http://www.cakedesigners.co.uk/occasion.html" TARGET ="right">Celebration Cake Pictures</A></FONT><BR>
<FONT SIZE="3">&nbsp;<A HREF="http://www.cakedesigners.co.uk/photo.html" TARGET ="right">Photo Cake Pictures</A></FONT><BR>
<FONT SIZE="3">&nbsp;<A HREF="http://www.cakedesigners.co.uk/mailorder.html" TARGET ="right">Mail Order Cake Pictures</A></FONT><BR>
<FONT SIZE="3">&nbsp;<A HREF="http://www.cakedesigners.co.uk/wedding.html" TARGET ="right">Wedding Cake Pictures</A></FONT>

</SPAN>
<TD>
</TR>

</TABLE>
</BODY>
</HTML>


Cheers
iBold
11-11-2003, 06:07 PM
can you post a link to a site were you are actually using this script? I use drop down menu's for my sites (look at the sig..) that might be what your looking for??
little_lisa
11-12-2003, 05:03 AM
the menu, or part of it at the mo, is at
http://www.cakedesigners.co.uk/3
Pittimann
11-13-2003, 06:43 AM
Hi!

If you add a function to your document which you call when on of the pink gif's is clicked it will work:

Here's the code:

----------------------------

<HTML>
<TITLE>Pull-Down Menus</TITLE>

<HEAD>

<STYLE TYPE="text/css">

#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
#menu4 { display : none }
#menu5 { display : none }

a:link {color:black; text-decoration:none}
a:hover {colorink; text-decoration:underline}

</STYLE>
<script language="JavaScript" type="text/javascript">
<!--
function check(){
if (document.all.menu1.style.display == 'block') document.all.menu1.style.display = 'none';
else document.all.menu1.style.display = 'block';
}
function check2(){
if (document.all.menu2.style.display == 'block') document.all.menu2.style.display = 'none';
else document.all.menu2.style.display = 'block';
}
//-->
</script>

</HEAD>

<BODY BGCOLOR="FFFFFF">


<TABLE BORDER="0" ALIGN="left">

<TR>
<TD VALIGN="top" WIDTH="200">
<SPAN onClick="check()">
<b><IMG SRC="http://www.cakedesigners.co.uk/barpinkwelcome.gif"></b></SPAN><BR>
<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'block'">

<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/welcome.html" TARGET="right">Welcome</a></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/comments.html" TARGET="right">Testimonials</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/mailorder.html" TARGET ="right">Mail Order</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/FAQ.html" TARGET ="right">Shopping & FAQ</A></FONT>

</SPAN>
</TD>
</TR>

<TR>
<TD VALIGN="top" WIDTH="200">
<SPAN onClick="check2()">
<b><IMG SRC="http://www.cakedesigners.co.uk/barpinkgallery.gif"></b></SPAN><BR>
<SPAN ID="menu2" onClick="document.all.menu2.style.display = 'none'">

<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/novelty1.html TARGET ="right">Novelty Cake Pictures</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/occasion.html" TARGET ="right">Celebration Cake Pictures</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/photo.html" TARGET ="right">Photo Cake Pictures</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/mailorder.html" TARGET ="right">Mail Order Cake Pictures</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/wedding.html" TARGET ="right">Wedding Cake Pictures</A></FONT>

</SPAN>
<TD>
</TR>

</TABLE>
</BODY>
</HTML>

----------------------------

By the way: your cakes look really nice :)
little_lisa
11-13-2003, 04:20 PM
Cheers m8 thats sorted it!

Now if possible now do i change the image when it is clicked on, on the menu.

I would like first image to have an arrow pointing down, when this is clicked on and the submenus appear is will change to the same image with the arrow pointing up.
Pittimann
11-14-2003, 12:44 AM
Hi! I added some more stuff to function "check()" for the image swapping. In order to make it work without adding other images, I just exchanged the "welcome.gif" by the "gallery.gif". Replace the two by your "arrowdown" and "arrowup" graphics and there you are.

Here is the code:


<HTML>
<TITLE>Pull-Down Menus</TITLE>
<HEAD>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
#menu4 { display : none }
#menu5 { display : none }
a:link {color:black; text-decoration:none}
a:hover {colorink; text-decoration:underline}
</STYLE>
<script language="JavaScript" type="text/javascript">
<!--
function check(){
document.body.focus();
if (document.all.menu1.style.display == 'block'){
document.all.menu1.style.display = 'none';
welcome.src="http://www.cakedesigners.co.uk/barpinkwelcome.gif";//arrowdown.gif
welcome.alt=" open submenu... ";// change tooltip
}
else{
document.body.focus();
document.all.menu1.style.display = 'block';
welcome.src="http://www.cakedesigners.co.uk/barpinkgallery.gif";//arrowup.gif
welcome.alt=" close submenu... ";// change tooltip
}
}
function check2(){
if (document.all.menu2.style.display == 'block') document.all.menu2.style.display = 'none';
else document.all.menu2.style.display = 'block';
}
//-->
</script>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<TABLE BORDER="0" ALIGN="left">
<TR>
<TD VALIGN="top" WIDTH="200">
<SPAN>
<a href="#" onClick="check()"><!-- if you add a hyperlink to the image the mouse pointer will change automatically -->
<b><IMG SRC="http://www.cakedesigners.co.uk/barpinkwelcome.gif" border=0 name="welcome" alt="&nbsp;open submenu...&nbsp;"></b></a></SPAN><BR>
<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'block'">
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/welcome.html" TARGET="right">Welcome</a></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/comments.html" TARGET="right">Testimonials</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/mailorder.html" TARGET ="right">Mail Order</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/FAQ.html" TARGET ="right">Shopping & FAQ</A></FONT>
</SPAN>
</TD>
</TR>
<TR>
<TD VALIGN="top" WIDTH="200">
<SPAN onClick="check2()">
<b><IMG SRC="http://www.cakedesigners.co.uk/barpinkgallery.gif"></b></SPAN><BR>
<SPAN ID="menu2" onClick="document.all.menu2.style.display = 'none'">
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/novelty1.html TARGET ="right">Novelty Cake Pictures</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/occasion.html" TARGET ="right">Celebration Cake Pictures</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/photo.html" TARGET ="right">Photo Cake Pictures</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/mailorder.html" TARGET ="right">Mail Order Cake Pictures</A></FONT><BR>
<FONT SIZE="3"> <A HREF="http://www.cakedesigners.co.uk/wedding.html" TARGET ="right">Wedding Cake Pictures</A></FONT>
</SPAN>
<TD>
</TR>
</TABLE>
</BODY>
</HTML>

You can do the same for the gallery menu and the others you have already prepared.
Please note that the code is only safe for MSIE!!

Cheers - Pit
little_lisa
11-14-2003, 04:06 AM
Hi Pit

Thanx for your help, all works as it should.

Cheers
Lisa