Pullmenü mit Layer

[Maik]

Guten Tag,

Ich möchte sehr gerne ein Menü machen, welches, wenn man auf einen Link klickt, ein Untermenü eine Zeile darunter erscheint.

Dafür habe ich mir folgendes schon mal zusammengeschnipselt:

--------------------------------------
<SCRIPT LANGUAGE="JavaScript">

var visibleVar="null";

function init(){

if (navigator.appName == "Netscape") {

layerStyleRef="layer.";

layerRef="document.layers";

styleSwitch="";

visibleVar="show";

}else{
                layerStyleRef="layer.style.";

layerRef="document.all";

styleSwitch=".style";

visibleVar="visible";
        }

}

function showHideLayerSwitch(layerName){

if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar')){

hideLayer(layerName);
        }else{
            showLayer(layerName);
        }
    }

function showLayer(layerName){
        eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');

}

function hideLayer(layerName)

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');

}

function showLayer1(layerName){

if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar')){

showLayer(layerName);
        }
    }
    function hideLayer1(layerName){

if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar')){

hideLayer(layerName);
        }
    }
</SCRIPT>

<STYLE TYPE="text/css">
#pulldownButton {position: absolute; z-index: 59800; left: 100px; top: 60px;}
#pulldownMenu {position: absolute; z-index: 59900; visibility: hidden; left: 100px; top: 116px;}
#pulldownMenu1 {position: absolute; z-index: 59900; visibility: hidden; left: 100px; top: 116px;}
</STYLE>

<div id="pulldownButton" >
        <a href="javascript:showHideLayerSwitch('pulldownMenu');">
        <font color="#000000">Home</font></a>
         <a href="javascript:showHideLayerSwitch('pulldownMenu1');">
        <font color="#000000">blabla</font></a>
</div>
    <div id="pulldownMenu">
        <table cellpadding=1 width=300 border=0>
        <tr>
            <td width="100"><b><center>Die 1. Links</center></b></td>
            <td width="100"><b><center>Die 2. Links</center></b></td>
            <td width="100"><b><center>Die 3. Links</center></b></td>
        </tr>
        </table>
    </div>
     <div id="pulldownMenu1">
        <table cellpadding=1 width=300 border=0>
        <tr>
            <td width="100"><b><center>DU DU DU </center></b></td>
            <td width="100"><b><center>Die 2. Links</center></b></td>
            <td width="100"><b><center>Die 3. Links</center></b></td>
        </tr>
        </table>
    </div>
---------------

Allerdings habe ich jetzt das Problem, dass wenn man auf "Home" klickt und dann auf "blabla" überlagern sich die Layer, ich hätte aber lieber, das sie sich wechseln anstatt sich zu überlagern?

Weiß jemand für dieses Problem Abhilfe?
Oder gibt es elegantere und weitaus unkompliziertere Möglichkeiten???

Im voraus schon mal danke!

[wahsaga]

hi,

<a href="javascript:showHideLayerSwitch('pulldownMenu');">

bitte binde javascript-funktionsaufrufe nicht derart sinnfrei ein, sondern

• nutze onClick dafür und
• gib als href eine sinnvolle alternative für nutzer ohne JS an.

Allerdings habe ich jetzt das Problem, dass wenn man auf "Home" klickt und dann auf "blabla" überlagern sich die Layer, ich hätte aber lieber, das sie sich wechseln anstatt sich zu überlagern?

dann solltest du beim klick auf "blabla" auch noch dafür sorgen, dass die anderen (oder der zuletzt) angezeigte layer wieder ausgeblendet werden. (vor dem "wie?"-fragen bitte selber drüber nachdenken.)

gruss,
wahsaga

[Elya]

Hallo Maik,

<SCRIPT LANGUAGE="JavaScript">

hier fehlt type="text/javascript"

if (navigator.appName == "Netscape") {
        }else{
                layerStyleRef="layer.style.";

du hast nur die zwei alten Browser-DOMs berücksichtigt. Mozilla wird Deine Script-Abfrage nicht mögen, weil es weder document.layer noch document.all kennt

if (eval

eval is evil ;)

Allerdings habe ich jetzt das Problem, dass wenn man auf "Home" klickt und dann auf "blabla" überlagern sich die Layer, ich hätte aber lieber, das sie sich wechseln anstatt sich zu überlagern?

Du willst also, daß sich der zuletzt geöffnete Layer "schließt", wenn der aktuelle sich "öffnet"? Setze eine Variable, die du beim Öffnen abfragst.

Ausnahmsweise mal ein Scriptschnipsel, ich finde den passenden Originalthread von Sven R. im Archiv gerade nicht:

ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
v6 = (document.getElementById)? true:false;
//die etwas bessere Browserabfrage!

lastlayer=-1;
//der zuletzt geöfnete Layer, initialisiert auf -1

function showlayer(layerid)
  {
 if (lastlayer!=-1)  {hidelayer(lastlayer);}
 if (ns4) document.layers[layerid].visibility = "show"
   else if (v6) document.getElementById(layerid).style.visibility = "visible";
   else if (ie4) document.all[layerid].style.visibility = "visible"
 lastlayer=layerid; //setzen der Variable, um auf den letzten Layer zugreifen zu können
 }

function hidelayer(layerid)

{
 if (ns4) document.layers[layerid].visibility = "hide"
  else if (v6) document.getElementById(layerid).style.visibility = "hidden";
  else if (ie4) document.all[layerid].style.visibility = "hidden"
  }

Ist es ungefähr das, was du willst? Dann geht es tatsächlich einfacher ;)

Gruß aus Köln-Ehrenfeld,

Elya