Stefan Muenz: Java-Script-Menue im Explorer Look

Beitrag lesen

Hallo Matthias,

Ich suche ein Java-Script-Menue welches leicht zu erweitern ist. Dieses Menue soll im Explorer-Look (geoeffnete Ordner, geschlossene Ordner usw.) erscheinen.

Ich poste Dir hier mal eines rein, dass allerdings nur mit MS IE 4 funktioniert. Als Grafiken dienen dabei die ueblichen Ordner-Symbole aus SELFHTML x1.gif, x2.gif, x3.gif). Christine Kuehnel hat aber auch ein Script, das ab Netscape 2.x funktioniert.

<HTML>
<HEAD>
<STYLE TYPE='text/css'>
<!--
li.oItem { color:#0000CC; cursor:hand; font-family:Verdana; font-size:9pt; margin-left:-18px; font-weight:bold; line-height:12pt; list-style-image:url(x3.gif) } ;
li.oParent { color:#CC6600; cursor:hand; font-family:Verdana; font-size:9pt; font-weight:bold; margin-left:-18px;  line-height:12pt; list-style-image:url(x1.gif) } ;
li.oParopen { color:#CC6600; cursor:hand; font-family:Verdana; font-size:9pt; font-weight:bold; margin-left:-18px;  line-height:12pt; list-style-image:url(x2.gif) } ;
ul ul { display: none; } ;
// -->
</STYLE>

<SCRIPT LANGUAGE='Javascript'>
<!--
// Returns the closest parent tag with tagName containing
// the src tag. If no such tag is found - null is returned.
function checkParent( src, tagName ) {
  while ( src != null ) {
   if (src.tagName == tagName)
    return src;
   src = src.parentElement;
  }
  return null;
}

// Returns the first tag with tagName contained by  
// the src tag. If no such tag is found - null is returned.  
function checkContent( src, tagName ) {  

var pos = src.sourceIndex ;
  while ( src.contains( document.all[++pos] ) )
   if ( document.all[pos].tagName == tagName )
    return document.all[pos] ;
  return null ;
}

// Handle onClick event in the outline box
function outlineAction() {    
  var src = event.srcElement ;
  var item = checkParent( src, "LI" ) ;
  if(src.className == "oParent") src.className = "oParopen";
  else if(src.className == "oParopen") src.className = "oParent";

if ( parent != null ) {
   var content = checkContent( item, "UL" ) ;

if ( content != null )
    if ( content.style.display == "" )
     content.style.display = "block" ;
    else
     content.style.display = "" ;
  }
  event.cancelBubble = true;
}

function chg(obj,mode) {       

event.cancelBubble = true;
      if(mode == 1)
       obj.style.color = "#FFFFFF";
      if(mode == 2)
       obj.style.color = "#FFCC33";
    }

function Go(to,mode)
{
if(mode==1)
  top.location.href=to;
if(mode==2)
  self.location.href=to;
}

// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF TEXT=#000000>

<DIV id="Outline" style="position:absolute; top:10px; left:5px; width:280px" onClick="JavaScript:outlineAction();">

<UL>
     <LI class='oParent'>Suchdienste
      <UL>
      <LI class='oItem' onClick="Go('http://www.altavista.digital.com/',2)">Altavista</LI>
      <LI class='oItem' onClick="Go('http://www.crawler.de/',2)">Crawler</LI>
      <LI class='oItem' onClick="Go('http://www.dino-online.de/',2)">DINO Online</LI>
      <LI class='oItem' onClick="Go('http://www.excite.de/',2)">Excite</LI>
      <LI class='oItem' onClick="Go('http://www.infoseek.com/',2)">InfoSeek</LI>
      <LI class='oItem' onClick="Go('http://www.yahoo.de/',2)">Yahoo</LI>
     </LI>
     <LI class='oParent'>Information/Auskunft
      <UL>
      <LI class='oItem' onClick="Go('http://www.teleinfo.de/abfragen/bin/neuabfrage.pl',2)">Telefonauskunft (TeleInfo)</LI>
      <LI class='oItem' onClick="Go('http://www.branchenbuch.com/index.html',2)">Branchenbuch</LI>
      <LI class='oItem' onClick="Go('http://www.iicm.edu/ref.m10/',2)">Meyer's Lexikon</LI>
      <LI class='oItem' onClick="Go('http://db3.telebuch.de/telebuch/de/index.htm',2)">ABC Bücherdienst</LI>
      <LI class='oItem' onClick="Go('http://www.wetteronline.de/',2)">Wetter online (weltweit)</LI>
            <LI class='oItem' onClick="Go('http://bahn.hafas.de/',2)">DB Fahrplanauskunft</LI>
      </UL>
     </LI>
     <LI class='oParent'>Nachrichten und Aktuelles
      <UL>
      <LI class='oItem' onClick="Go('http://www.br-online.de/news/aktuell/',2)">Nachrichtenticker des BR</LI>
      <LI class='oItem' onClick="Go('http://www.yahoo.de/schlagzeilen/',2)">Nachrichtenticker Yahoo</LI>
      <LI class='oItem' onClick="Go('http://videotext.ardzdf.de:9090/telenet/ARD/100/1.html',2)">Videotext ARD</LI>
      <LI class='oItem' onClick="Go('http://www.cs.vu.nl/~gerben/news.html',2)">Daily News</LI>
      <LI class='oItem' onClick="Go('http://www.mathematik.uni-ulm.de/germnews/',2)">German News</LI>
      </UL>
     </LI>
     <LI class='oParent'>Software
      <UL>
      <LI class='oItem' onClick="Go('http://www.winfiles.com/',2)">Winfiles (Shareware)</LI>
      <LI class='oItem' onClick="Go('http://www.shareware.com/',2)">Shareware.com</LI>
      <LI class='oItem' onClick="Go('http://www.filez.com/',2)">Filez (Dateisuche)</LI>
      <LI class='oItem' onClick="Go('http://www.softline.de/',2)">Softline (Versand)</LI>
      </UL>
  </LI>
</UL>
</DIV>

<!-- *************** DHTML Outline (end) ***************** -->

</BODY>
</HTML>

Dieses Script stammt aus HomeSite 3.0.

Viele Gruesse
  Stefan Muenz