Aufklapp- Menü mit Javascript?

[WebSorcerer]

Hallo,

hier im Forum ist bei "Suchen" und "Nützliche Links" eine Funktion hinterlegt, die bei einem Klick eine Art Menü öffnet. Hab mir den Quellcode schon angesehen, aber das was ich gefunden habe, war mit php gelöst - ich kann mich aber irren und vielleicht an den falschen Stellen geguckt.

Kann ich das per Javascript lösen?

Und kann ich diesen Bereich dann so positionieren, dass er mitläuft, wenn man eine Seite weiter nach unten scrollt? Ich möchte einfach eine Legende durch diese Funktion aufklappen lassen, die dann den gesamten Text über verfügbar ist.

Danke schonmal für eure Vorschläge!

[kLeiner_HobBes]

Nur ganz grob:

Läßt sich mit JavaScript machen, und zwar baust du dir die Legende in einem div-Tag auf, den du mit den css-Eigenschaften position-absolute oder so positionierst. Nun schreibst du dir ne Java-Script-Funktion, die den Tag mit dem DOM (dynamic object model) fest zum Fensterrand positioniert. Dann rufst diese Funktion im EventHandler von body, nämlich onIdle() (glaub ich heißt der) auf. Das heißt, wenn der Browser grad nix besseres zu tun hat, positioniert er das Ding neu.

Mit der css-Eigenschaft visible kannst du auch noch steuern, ob das Ding sichtbar ist oder nicht. Ach ja, z-index mußt du auch so setzen, daß es ganz oben ist.

Schau dir das ganze Zeug mal in SelfHTML an.

[WebSorcerer]

Kann mir jemand ne genauere Einleitung geben? Hab schon probiert, bei Google gesucht, aber es läuft nicht.

Der DIV Bereich ist wohl weniger mein Problem, aber ich weiß nicht, welche Bezeichnungen wie zueinander gehören müssen etc.

Ich hoffe, mir kann noch wer schildern, wie ich ein Menü (welches keine Funktion haben soll, einfach nur reinen Text beinhaltet) - mit Hilfe von OnMouseOver aufklappen lassen kann, dieses Menü soll hinter einem vorgegebenen Text liegen.

[kills]

dein bisheriger code?

[WebSorcerer]

der bisherige code bringt nichts, also da habe ich diese funktion noch nicht integriert, habe wie gesagt, nur probiert.

Ich brauche "einfach" ;-) den code der javascript datei und die html datei mit dem integrierten div-bereich.

[kills]

dann lad dir doch einfach die funktionen des Forums hier runter.

Siehe Quelltext, wo die JS dateien liegen

[WebSorcerer]

Ich hatte doch in meinem ersten Beitrag schon geschrieben, dass ich die richtige Bezüge daraus nicht ableiten konnte.

[johnhaltonx]

Ich hab sowas mal nachgebaut allerdings mit php/css und ein wenig javascript

stylesheet

a:link     { color: #606420 }

a:visited  { color: #606420 }

a:active   { color: #0000FF }

a:hover    { color: #DD0000 }

a:text     { color: #000000 }







body {

background-color:#EEF3F8;

}


#banner {

    height: 10%;

}

#links {

    position: relative;

    float: left;

    width: 150px;


ul {

	margin: 0;

    margin-top: 10%;

	padding: 0;

	list-style: none;

	width: 150px;

	border-bottom: 0;

	}


ul li {

	position: relative;

	}

li ul {

	position: absolute;

	left: 149px;

	top: 0;

	display: none;

	}

ul li a {

	display: block;

	text-decoration: none;

	color: #777;

	background: #fff;

	padding: 5px;

	border: 1px solid #ccc;

	border-bottom: 0;

	}

ul {

	margin: 0;

	padding: 0;

	list-style: none;

	width: 150px;

	border-bottom: 1px solid #ccc;

	}




li:hover ul, li.over ul {

	display: block; }




/* Fix IE. Hide from IE Mac \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */



}


#mitte {

    left: 25%;

    width: 69%;

    float: right;


}



#bottom {

  overflow: hidden;

  position: absolute;

  bottom: 1%;

  width: 69%;

  height: 3%;

}

Hauptfenster mit "div" containern

<?php

include "config/header.php";                                //HTML Header


echo "        <div id=\"root\">\n";                         // ganz oberer Div-Holder

echo "            <div id=\"banner\">\n";                   // banner

			            include "banner.php";

echo "            </div>\n";

echo "            <div id=\"mitte\">\n";                    // In der Mitte der Inhalt

			            include "inhalt.php";

echo "            </div>\n";

echo "            <div id=\"links\">\n";                    // linkes Menu

			            include "menu.php";

echo "            </div>\n";

echo "            <div id=\"bottom\">\n";

                        include "bottom.php";

echo "            </div>\n";

echo "            <br style=\"clear:both;\" />\n";          // css-float beenden

echo "       </div>\n";



echo "</BODY>\n";

echo "</HTML>\n";

?>

Das menu

 echo "    <li><b><a href=\"index.php\">Menu</a></b></li>\n";

 echo "    <li><a href=\"index.php?section=login\">Login</a></li>\n";

 echo "    <li><a href=\"index.php?section=help\">Hilfe</a>\n";

 echo "        <ul id=\"nav\">\n";

 echo "        <li><a href=\"index.php?section=doku\">Dokumentation</a></li>\n";

 echo "      </ul id=\"nav\">\n";

 echo "    </li>\n";

[Ragazza]

Vielleicht findest du hier was:

http://roflweb.de/