dynamische Position

Dieser Tipp ist veraltet, mit den neuen Möglichkeiten von CSS3 gibt es komfortablere Möglichkeiten, drop Down Menüs zu erstellen. Siehe dazu meine CSS3 Tipps

In diesem Tutorial habe ich ein kleines dynamisches Menü erstellt. Dieser Tipp ist absichtlich einfach gehalten, um das Prinzip zu verstehen. Bei komplexeren Menüs sollte man sich ein paar Funktionen ausdenken, die alle Eventualitäten abdecken.

Jeder Link wurde in ein Div-Tag eingebunden. Es gibt hier 2 Arten von Menüpunkten Hauptpunkte und Unterpunkte. Das Aussehen wie Hintergrundfarbe, Rand etc. wird in den Stilen class d1 für Hauptpunkte und d2 für Unterpunkte definiert und zugewiesen. Darüberhinaus bekommt jedes Element eine ID. Die Hauptpunkte bekommen die IDs box1, box2 von oben nach unten. Die Unterpunkte bekommen die IDs p1, p2 auch von oben nach unten. In den IDs werden die Positionen mit position:absolute definiert. Außerdem werden die Unterpunkte mit der Eigenschaft visibility: hidden beim Aufruf der Seite unsichtbar gemacht. Der Z-Index bestimmt die Reihenfolge im Sinne von vorne und hinten. Das ist wichtig, um zu bestimmen, welches Element ein anderes Element verdeckt.

Die beiden Links der Oberpunkte rufen jeweils eine Funktion auf. Der erste Link die Funktion move1(), der zweite die Funktion move2(). In den Funktionen werden die Positionen der Oberpunkte und die Sichtbarkeit der Unterpunkte geändert.

Ich habe unten 2 Arten von Funktionen aufgeführt. Funktionen Vers.1 ist leicht zu verstehen aber diese Version hat den Nachteil, dass bei nochmaligen Klicken auf den ersten Link das Menü nicht zuklappt.

Die Funktionen Vers.2 wurde auf dieser Seite eingesetzt. Die Funktion move1() arbeitet mit einer if-Struktur und der Variablen m1. Die Variable m1 wird beim Aufruf der Seite auf 0 gesetzt. In der if-Struktur wird abgefragt, ob m1 den Wert 0 hat. Ist dass der Fall, wird das Menü aufgeklappt und die Variable m1 wird auf 1 gesetzt. Klickt man nochmals auf den ersten Link ist die Bedingung nicht erfüllt und der else Bereich wird ausgeführt, das Menü klappt wieder zu. Außerdem muss auch in der Funktion move2() die Variable m1 auf 0 gesetzt werden.

Style Sheets

#p1 {
position:absolute;
left:20px;
top:50px;
z-index:2;
visibility: hidden;
}
#p2 {
position:absolute;
left:20px;
top:70px;
z-index:1;
visibility: hidden;
}

.d1 {
width:150px;
height:20px;
color: #000000;
background-color: #B6AA69;
border: 1px solid #660000;
text-indent: 3px;
padding-top: 2px;
}

.d2 {
width:150px;
height:20px;
color: #000000;
background-color: #DEDEBC;
text-indent: 10px;
border-bottom: 1px dotted #996600;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #996600;
border-left-color: #996600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px;
border-top-color: #996600;
margin-top: 2px;
line-height: 15pt;
}
-->
</style>

Funktionen Vers.1

function move2(){
document.getElementById("box2").style.top = "50px";
document.getElementById("p1").style.visibility = "hidden";
document.getElementById("p2").style.visibility = "hidden";
}
</script>

Funktionen Vers.2

function move1(){

if(m1==0){
document.getElementById("box2").style.top = "90px";
document.getElementById("p1").style.visibility = "visible";
document.getElementById("p2").style.visibility = "visible";
m1=1;
}
else{
m1=0;
document.getElementById("box2").style.top = "50px";
document.getElementById("p1").style.visibility = "hidden";
document.getElementById("p2").style.visibility = "hidden";
}
}

function move2(){
m1=0;
document.getElementById("box2").style.top = "50px";
document.getElementById("p1").style.visibility = "hidden";
document.getElementById("p2").style.visibility = "hidden";
}
</script>

Links im Body-Bereich

<div id="box1" class="d1"><a href="javascript:;" onclick="move1()">ID box1</a> class d1 </div>
<div id="box2" class="d1"><a href="javascript:;" onclick="move2()">ID box2</a> class d1 </div>
<div id="p1" class="d2">ID p1 class d2</div>
<div id="p2" class="d2">ID p2 class d2</div>
<h1 align="right">dynamische Position</h1>


Javascript Tipps