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.

Nintendo Switch review: Hands-on with the intuitive modular console and its disappointing games…

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

The updated 'Corel Painter inside Photoshop' plugin ParticleShop offers new brushes

Best running headphones | Best sport & fitness headphones: 4 brilliant pairs of wireless…