Dynamisches Menu

mkoeni1 · 16. November 2007

Hallo Leute,

ich habe ein Problem und brauche Eure Hilfe.
Ich bin dabei ein dyn. Menu zu programmieren.

PHP:

<div id="navigation">
<ul>
    <li><a href="#">test Link1</a>
        <ul>
            <li><a href="#">test unterLink1</a></li>
            <li><a href="#">test unterLink1</a></li>
        </ul>
    </li>

    <li><a href="#">test Link2</a></li>
    <li><a href="#">test Link3</a></li>
    <li><a href="#">test Link4</a></li>
    <li><a href="#">test Link5</a></li>
    <li><a href="#">test Link6</a></li>
</ul>
</div>

Das soll folgendermaßen aussehen, wenn ich auf den ersten Link (test Link1) klicke soll darunter ein Bereich erscheinen der die weiteren Links hervorbringt ->test unterLink1, test unterLink1. Ein weiterer Klick auf den Link -> soll diesen Berecih wieder verschließen -> test Link1.

Hat hierzu jemand ein paar Zeilen JavaScript Quellcode?

Die css Datei sieht bis jetzt so aus:

PHP:

/* Navigation */
#navigation{
	position: absolute;
	width: 150px;
	background-color: red;
	margin-top: 98px;
	margin-left: -2px;
	height: 554px;
}

#navigation ul{

   padding: 0;

   margin: 0 0 0px 0;

   list-style: none;

}

#navigation li{

   border: none;

   padding: 0px;

   border: solid 1px #fff;

   border-width: 1px 0 1px 1px;

}

#navigation li a{

   border: solid 1px #99A4AF;

   border-width: 1px 0 1px 1px;

   display: block;

   padding: 3px;

   color: blue;

   text-decoration: none;

   background-color: #e0e8ef;

}



#navigation li a:hover{

   background-color: #fff;

   color: black;

}

Vielen Dank und Gruß
Matze

Maik · 16. November 2007

Hi.

Code:

<script type="text/javascript">
function show(id){

    if(document.getElementById(id).style.display == 'block') {
        document.getElementById(id).style.display = 'none';
    }
    else {
        document.getElementById(id).style.display = 'block';
    }

}
</script>

Code:

<style type="text/css">
#sub1 { display:none; }
</style>

Code:

<div id="navigation">
<ul>
    <li><a href="#" onclick="show('sub1')">test Link1</a>
        <ul id="sub1">
            <li><a href="#">test unterLink1</a></li>
            <li><a href="#">test unterLink1</a></li>
        </ul>
    </li>
    <li><a href="#">test Link2</a></li>
    <li><a href="#">test Link3</a></li>
    <li><a href="#">test Link4</a></li>
    <li><a href="#">test Link5</a></li>
    <li><a href="#">test Link6</a></li>
</ul>
</div>

mkoeni1 · 18. November 2007

Hi,

cool, Danke für den Quell-Code. Ich hab es jetzt so gelöst. D.h. mit harten Werten in der Javascript-Funktion.
Hier mal der Quell-code:

PHP:

<!-- Bereich der linken Navigation -->
<div id="navigation">
    <div id="box1" class="d1"><a href="javascript:;" onclick="move1()">Mannschaft</a></div>
    <div id="box2" class="d1"><a href="javascript:;" onclick="move2()">Wichtig</a></div>
    <div id="box3" class="d1"><a href="javascript:;" onclick="move3()">Sonstiges</a></div>
<!-- 1ter Unterpunkte -->
    <div id="p1" class="d2">letztes Spiel</div>
    <div id="p2" class="d2">Tabelle</div>
    <div id="p3" class="d2">n&auml;chstes Spiel</div>
    <div id="p4" class="d2">Archiv</div>

<!-- 2te Unterpunkte -->
    <div id="p5" class="d2">Training</div>
    <div id="p6" class="d2">Termine</div>

<!-- 3 Unterpunkte -->
    <div id="p7" class="d2">Bilder</div>

</div>

Die dazugehörende CSS Datei sieh so aus:

PHP:

/* dynamische linke Navigation -> Aussehen */
/* 1ter Block */
 #box1 {
    position:absolute;
    top: 0px;
    left: 0px;
    width: 148px; 
    z-index:4;
}
 #box1 a{
    text-decoration: none;
}
 #box1 a:hover{
    text-decoration: underline;
    color: black;
}

/* 2ter Block */
#box2 {
    position:absolute;
    top: 20px;
    left: 0px;
    width: 148px;
    z-index:3;
}
#box2 a{
    text-decoration: none;
}
#box2 a:hover{
    text-decoration: underline;
    color: black;
}

/* 3ter Block */
#box3 {
    position:absolute;
    top: 40px;
    left: 0px;
    width: 148px;
    z-index:3;
}
#box3 a{
    text-decoration: none;
}
#box3 a:hover{
    text-decoration: underline;
    color: black;
}


/* Unterpunkte in der Navigation */
#p1 {
    left: 0px;
    top: 20px;
    width: 148px;
    z-index:2;
    visibility: hidden;
}
#p2 {
    position: absolute;
    left: 0px;
    top: 40px;
    width: 148px;
    z-index:1;
    visibility: hidden;
}
#p3 {
    position: absolute;
    left: 0px;
    top: 60px;
    width: 148px;
    z-index:1;
    visibility: hidden;
}
#p4 {
    position: absolute;
    left: 0px;
    top: 80px;
    width: 148px;
    z-index:1;
    visibility: hidden;
}

/* 2ter Block */
#p5 {
    position: absolute;
    left: 0px;
    top: 40px;
    width: 148px;
    z-index:1;
    visibility: hidden;
}
#p6 {
    position: absolute;
    left: 0px;
    top: 60px;
    width: 148px;
    z-index:1;
    visibility: hidden;
}

/* 3ter Block */
#p7 {
    position: absolute;
    left: 0px;
    top: 60px;
    width: 148px;
    z-index:1;
    visibility: hidden;
}

/* Ausehen der Hauptpunkte */
.d1 {
    left: 0px;
    top: 70px;
    width: 150px;
    height: 20px;
    color: #000000;
    background-color: #CBE095;
    border: 1px solid #660000;
    text-indent: 3px;
    padding-top: 2px;
}

/* Aussehen der Unterpunkte */
.d2 {
    position: absolute;
    width: 150px;
    height: 20px;
    color: #000000;
    background-color: #e0e8ef;
    text-indent: 10px;
    border-bottom: 1px dotted #996600;
    border-top: 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;
}

und der Quell-Code der Java-Script Funktion:

PHP:

<!-- Dynamische linke Navigation -->
<script language="JavaScript" type="text/javascript">
var m1;
m1=1;

function move1(){
if(m1==0){
// 1ter Block Unterpunkte 
    document.getElementById("box2").style.top = "100px";
    document.getElementById("box3").style.top = "120px";
    document.getElementById("p1").style.visibility = "visible";
    document.getElementById("p2").style.visibility = "visible";
    document.getElementById("p3").style.visibility = "visible";
    document.getElementById("p4").style.visibility = "visible";

// 2ter Block Unterelemente
    document.getElementById("p5").style.visibility = "hidden";
    document.getElementById("p6").style.visibility = "hidden";

// 3ter Block Unterelemente
    document.getElementById("p7").style.visibility = "hidden";
m1=1;
}
else{
    m1=0;
    document.getElementById("box2").style.top = "20px";
    document.getElementById("box3").style.top = "40px";
// 1ter Block Unterpunkte 
    document.getElementById("p1").style.visibility = "hidden";
    document.getElementById("p2").style.visibility = "hidden";
    document.getElementById("p3").style.visibility = "hidden";
    document.getElementById("p4").style.visibility = "hidden";
}
}
 

function move2(){
if(m1==0){
    document.getElementById("box1").style.top = "0px";
    document.getElementById("box2").style.top = "20px";
    document.getElementById("box3").style.top = "40px";
// 1ter Block Unterpunkte
    document.getElementById("p1").style.visibility = "hidden";
    document.getElementById("p2").style.visibility = "hidden";
    document.getElementById("p3").style.visibility = "hidden";
    document.getElementById("p4").style.visibility = "hidden";

// 2ter Block Unterpunkte 
    document.getElementById("p5").style.visibility = "hidden";
    document.getElementById("p6").style.visibility = "hidden";

// 3ter Block Unterpunkte 
    document.getElementById("p7").style.visibility = "hidden";
m1=1;
}
else{
    m1=0;
    document.getElementById("box1").style.top = "0px";
    document.getElementById("box2").style.top = "20px";
    document.getElementById("box3").style.top = "80px";
// 1ter Block Unterpunkte
    document.getElementById("p1").style.visibility = "hidden";
    document.getElementById("p2").style.visibility = "hidden";
    document.getElementById("p3").style.visibility = "hidden";
    document.getElementById("p4").style.visibility = "hidden";

// 2ter Block Unterpunkte 
    document.getElementById("p5").style.visibility = "visible";
    document.getElementById("p6").style.visibility = "visible";
}
}

function move3(){
if(m1==0){
    document.getElementById("box1").style.top = "0px";
    document.getElementById("box2").style.top = "20px";
    document.getElementById("box3").style.top = "40px";
// 1ter Block Unterpunkte
    document.getElementById("p1").style.visibility = "hidden";
    document.getElementById("p2").style.visibility = "hidden";
    document.getElementById("p3").style.visibility = "hidden";
    document.getElementById("p4").style.visibility = "hidden";

// 2ter Block Unterpunkte 
    document.getElementById("p5").style.visibility = "hidden";
    document.getElementById("p6").style.visibility = "hidden";

// 3ter Block Unterpunkte 
    document.getElementById("p7").style.visibility = "hidden";
m1=1;
}
else{
    m1=0;
    document.getElementById("box1").style.top = "0px";
    document.getElementById("box2").style.top = "20px";
    document.getElementById("box3").style.top = "40px";
// 1ter Block Unterpunkte
    document.getElementById("p1").style.visibility = "hidden";
    document.getElementById("p2").style.visibility = "hidden";
    document.getElementById("p3").style.visibility = "hidden";
    document.getElementById("p4").style.visibility = "hidden";

// 2ter Block Unterpunkte 
    document.getElementById("p5").style.visibility = "hidden";
    document.getElementById("p6").style.visibility = "hidden";

// 3ter Block Unterpunkte 
    document.getElementById("p7").style.visibility = "visible";
}
}
</script>

Das ist ganz schön umständlich das mit den harten Werten in de Funktionen zu machen. Das Problem das ich habe, ist dieses, dass ich immer erst auf jeden Link 2mal klicken muss, bis dieser die Aktion annimmt.

Komme hier gerade nicht weiter.

Gruß und Vielen Dank
Matze

ristone · 18. November 2007

Schau mal hier gibts ein gutes Beispiel.

http://www.cssplay.co.uk/menus/flyoutt.html

Das Menü geht zwar im Beispiel nach rechts auf aber im CSS kannst du das leicht andern. (top, left). Das die Hauptmenüpunkte nebeneinander sein geht mit float.

mkoeni1 · 18. November 2007

Hi,

werde ich gleich mal ausprobieren. Das Problem das ich allerdings jetzt gerade feststelle ist folgendes:

Ich habe die Struktur der Navgation jetzt verlinkt. Das sieht wie folgt aus:

PHP:

<div id="navigation">
    <div id="box1" class="d1"><a href="tutorials5.php?content=mannschaft" onclick="move1()">Mannschaft</a></div>

unten auf der Seite fange ich die URL mit

PHP:

    $content = $_GET['content'];
    switch($content){
        case mannschaft:
       echo 'bla bla bla';
        break;
}

Das Problem das ich jetzt habe ist folgendes (ich kommuniziere mit dem Server), d.h. die Seite lädt neu und daraufhin ist mein dynamisches Menu kurz aufgepoppt und schließt sich dann wieder zugeht.

Wie kann ich diesem Phänomen entgegenwirken? ich habe viel gegoogelt aber nichts gescheites gefunden. Ist des Rätsels Lösung einfach das weiter clientseitige Arbeiten mit Javascript? D.h. dass ich meinen Content ähnlich aufbauen muss?

Vielen Dank und Gruß
Matze

Dynamisches Menu

mkoeni1

Erfahrenes Mitglied

Maik

mkoeni1

Erfahrenes Mitglied

ristone

Mitglied

mkoeni1

Erfahrenes Mitglied

Neue Beiträge