tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
4
ZUGRIFFE
338
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 16.11.07 20:17 #1
    mkoeni1 mkoeni1 ist offline
    Registriert seit
    Nov 2004
    Beiträge
    353
    Hallo Leute,

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

    PHP-Code:
    <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-Code:
    /* 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
    Geändert von mkoeni1 (16.11.07 um 20:24 Uhr)
     

    Zitieren Zitieren
  2. 16.11.07 20:33 #2
    Maik Tutorials.de Gastzugang
    Hi.

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12

    <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 :
    1
2
3

    <style type="text/css">
#sub1 { display:none; }
</style>
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <div id="navigation">
<ul>
    <li><a href="#" [b]onclick="show('sub1')"[/b]>test Link1</a>
        <ul [b]id="sub1"[/b]>
            <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>
     
    Zitieren Zitieren
  3. 18.11.07 15:04 #3
    mkoeni1 mkoeni1 ist offline
    Registriert seit
    Nov 2004
    Beiträge
    353
    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-Code:
    <!-- 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-Code:
    /* 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-Code:
    <!-- 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
     

    Zitieren Zitieren
  4. 18.11.07 16:05 #4
    ristone ristone ist offline Mitglied Silber
    Registriert seit
    Nov 2007
    Ort
    Leipzig
    Beiträge
    83
    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.
     
    Zitieren Zitieren
  5. 18.11.07 16:29 #5
    mkoeni1 mkoeni1 ist offline
    Registriert seit
    Nov 2004
    Beiträge
    353
    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-Code:
    <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-Code:
        $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
     

    Zitieren Zitieren
« fenster nacheinander öffnen | Text des Mutter-Items ändern »

Ähnliche Themen

  1. dynamisches menu mit xml jsp und java bean
    Von Merschi im Forum Enterprise Java (JEE, J2EE, Spring & Co.)
    Antworten: 0
    Letzter Beitrag: 18.08.07, 12:47
  2. rechte Maustaste->Menu->noch ein Menu
    Von fischmir im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 2
    Letzter Beitrag: 18.07.05, 15:15
  3. dynamisches Menu
    Von low-group im Forum PHP
    Antworten: 6
    Letzter Beitrag: 11.01.05, 11:30
  4. Dynamisches Menu
    Von mruppert im Forum Visual Basic 6.0
    Antworten: 6
    Letzter Beitrag: 30.11.04, 10:36
  5. Dynamisches Menu
    Von caharim im Forum PHP
    Antworten: 4
    Letzter Beitrag: 08.03.04, 17:56