drop down menu

  waydekirrane 12:11 20 May 04
Locked

hi there, i'm using the script for a drop down menu similar to the one in windows explorer - ie with an folder (folder.gif) icon turning into an open one (ofolder.gif) when you click on it and when it doesn't expand any further a plain button (button.gif). as it stands the file line all expands on one vertical line. i was wondering how hard it is to move the expanded files along (like in windows explorer) so it looks neater. maybe even have a right angled line under the expanded folder so the new item opened comes out of it, like so:

folder
+ new folder
+ item


here is the script i'm basing my menu on

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>

!-- Expanding Menu Script Starts Here -->
!-- Place in HEAD section of Page -->


SCRIPT LANGUAGE="JavaScript">
function clickHandler() {
var targetId, srcElement, targetElement;
srcElement = window.event.srcElement;
if (srcElement.className == "Outline") {
targetId = srcElement.id + "d";
targetElement = document.all(targetId);
if (targetElement.style.display == "none") {
targetElement.style.display = "";
srcElement.src = "dhtml/images/ofolder.gif";
} else {
targetElement.style.display = "none";
srcElement.src = "dhtml/images/folder.gif";
}
}
}

document.onclick = clickHandler;

/SCRIPT>
!-- Expanding Menu Script Ends Here -->




title>Untitled Document /title>
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
/head>

body>


!-- Expanding Menu Code Starts Here -->
!-- Show correct file path for images -->
DIV ID="Out0">

IMG SRC="folder.gif" ID="Out1" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> Registration BR>
DIV ID="Out1d" STYLE="display:None">

IMG SRC="folder.gif" ID="Out2" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> Sub Directory 1 BR>

DIV ID="Out2d" STYLE="display:None">
IMG SRC="button.gif" WIDTH="12" HEIGHT="12"> a target="mainFrame" href="1.1htm"> Member Registration /a> BR>
IMG SRC="button.gif" WIDTH="12" HEIGHT="12"> Item 1.1.2 BR>
/DIV>
DIV ID="Out3d" STYLE="display:None">
IMG SRC="folder.gif" ID="Out4" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> Sub Directory 2 BR>
DIV ID="Out4d" STYLE="display:None">
IMG SRC="button.gif" WIDTH="12" HEIGHT="12"> Item 1.2.1 BR>
IMG SRC="button.gif" WIDTH="12" HEIGHT="12"> Item 1.2.2 BR>
/DIV>
IMG SRC="button.gif" WIDTH="12" HEIGHT="12"> Item 1.3 BR>
/DIV>
IMG SRC="button.gif" WIDTH="12" HEIGHT="12"> Separate Item BR>
/DIV>

DIV ID="Out5">
IMG SRC="folder.gif" ID="Out6" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> Section 2 BR>
DIV ID="Out6d" STYLE="display:None">
IMG SRC="folder.gif" ID="Out7" CLASS="Outline" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> Sub Directory 1 BR>
DIV ID="Out7d" STYLE="display:None">
IMG SRC="button.gif" WIDTH="12" HEIGHT="12"> Item 2.1.1 BR>
IMG SRC="button.gif" WIDTH="12" HEIGHT="12"> Item 2.1.2 BR>
/DIV>
/DIV>
/DIV>
!-- Expanding Menu Code Ends Here -->


/body>
/html>

  waydekirrane 12:21 20 May 04

not sure if that made sense so i'll visually describe what i want

click here

  Taran 12:47 20 May 04

This page is not available.

We're sorry, but this page is currently unavailable for viewing.

  waydekirrane 15:56 20 May 04

strange! works on my computer! must be geocities

try this

click here

This thread is now locked and can not be replied to.

What is Amazon Go and will it come to the UK? The store without checkouts or queues

1995-2015: How technology has changed the world in 20 years

Hands-on with the Star Wars fighting drones you can fly yourself

iPhone 9 and beyond: 32 amazing future smartphone developments - graphene, supercapacitor…