crazychaz: Menu

Hallo, folgendes:

ich habe eine seite, auf der 12 links stehen die ich per klick öffne nun zum thema:

wenn ich auf einen link klicke soll dieser darunter geöffnet werden d.h.:
link1
->öffne die ***.php
link2
->öffne die ****.php
usw.

verstanden die links sollen halt expandiert werden.

MfG chaz

  1. Hallo,

    verstanden die links sollen halt expandiert werden.

    verstanden.

    *SCNR

    Grüße, Matze

  2. Liebe(r) crazychaz,

    wenn ich auf einen link klicke soll dieser darunter geöffnet werden d.h.:
    link1
    ->öffne die ***.php
    link2
    ->öffne die ****.php
    usw.

    verstanden die links sollen halt expandiert werden.

    ich habe nix verstanden. *SCNRE*

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
  3. ja ich brauche halt nen ansporn wie das funktionieren würde das das mit js geht weiß ich ja aber wie

    1. Hallo!

      ja ich brauche halt nen ansporn wie das funktionieren würde das das mit js geht weiß ich ja aber wie

      Ich habe nicht verstanden, was du genau willst. Soll nach einem Klick auf einen Menüpunkt ein Untermenü aufgehen? Oder was?

      Dazu brauchst du einen Eventhandler (z.B. onclick) der eine Funktion aufruft. Diese Funktion verändert dann die Style-Eigenschaften des Elements, auf das du per getElementById() zugreifst.

      ciao, Lukas

      --
      Nach einem Korrspondentenbericht der New York Times aus der umkämpften Stadt, wurden zur „Ausschaltung eines einzigen feindlichen Scharfschützen mehrere 500-Pfund-Bomben, 35 Artilleriegranaten des Kalibers 255, zehn Schüsse aus der Abrams-Panzerkanone sowie 30 000 Patronen leichter Munition benötigt”. „Die Gebäude waren daraufhin Ruinen”, schreibt die New York Times, „aber der Scharfschütze schoss weiter...”
      1. gut und wie genau würde das funktionieren?

        1. Hallo,

          gut und wie genau würde das funktionieren?

          das hat Lukas alias wucher wichtel dir doch gerade eben erklärt.

          Ciao,
           Martin

          --
          Kleine Geschenke erhalten die Freundschaft.
          Große verderben sie aber meist auch nicht.
          1. Hallo,

            gut und wie genau würde das funktionieren?

            das hat Lukas alias wucher wichtel dir doch gerade eben erklärt.

            Ciao,
            Martin

            könnte mir das bitte jmd vorgeben, d.h. schreiben? weil ich kann das nicht

            1. Hallo!

              könnte mir das bitte jmd vorgeben, d.h. schreiben? weil ich kann das nicht

              Damit wirst du wohl hier nicht weit kommen. Keiner wird die Zeit und Lust haben, dir ein Script zu schreiben.

              Entweder du schaust bei Google (da gibt's sowas sicher), oder du probierst es und wir helfen dir dann weiter.

              ciao, Lukas

              --
              Nach einem Korrspondentenbericht der New York Times aus der umkämpften Stadt, wurden zur „Ausschaltung eines einzigen feindlichen Scharfschützen mehrere 500-Pfund-Bomben, 35 Artilleriegranaten des Kalibers 255, zehn Schüsse aus der Abrams-Panzerkanone sowie 30 000 Patronen leichter Munition benötigt”. „Die Gebäude waren daraufhin Ruinen”, schreibt die New York Times, „aber der Scharfschütze schoss weiter...”
              1. Hallo!

                könnte mir das bitte jmd vorgeben, d.h. schreiben? weil ich kann das nicht

                Damit wirst du wohl hier nicht weit kommen. Keiner wird die Zeit und Lust haben, dir ein Script zu schreiben.

                Entweder du schaust bei Google (da gibt's sowas sicher), oder du probierst es und wir helfen dir dann weiter.

                ciao, Lukas

                ok...

                nun ich habe ein solches script gefunden nur wenn ich das bei mir auf die seite einfüge macht er das einfach nicht

                1. Hallo!

                  nun ich habe ein solches script gefunden nur wenn ich das bei mir auf die seite einfüge macht er das einfach nicht

                  Und wie soll man dir weiterhelfen? Wir kennen deine Seite nicht, deinen Code nicht. Wir können leider nicht hellsehen :-(

                  ciao, Lukas

                  --
                  Nach einem Korrspondentenbericht der New York Times aus der umkämpften Stadt, wurden zur „Ausschaltung eines einzigen feindlichen Scharfschützen mehrere 500-Pfund-Bomben, 35 Artilleriegranaten des Kalibers 255, zehn Schüsse aus der Abrams-Panzerkanone sowie 30 000 Patronen leichter Munition benötigt”. „Die Gebäude waren daraufhin Ruinen”, schreibt die New York Times, „aber der Scharfschütze schoss weiter...”
                  1. hier die auszüge
                    die php datei
                    <script type="text/javascript" src="menuscript01.js"></script>
                    </head>

                    <body bgcolor="#000000">
                    <h1>Hybrid Theory</h1>

                    <h3>
                    <ul id="containerul">
                    <li>1. Papercut</a><br />  </li>
                    <li>2. One Step Closer  <br /> </li>
                    <li>3. With You  <br /> </li>
                    <li>4. Points Of Authority   <br /> </li>
                    <li>5. Crawling  <br /> </li>
                    <li>6. Runaway  <br /> </li>
                    <li>7. By Myself   <br /> </li>
                    <li>8. In The End  <br /> </li>
                    <li>9. A Place For My Head <br /> </li>
                    <li>10. Forgotten  <br /> </li>
                    <li>11. Cure For The Itch  <br /> </li>
                    <li>12. Pushing Me Away<br /></li></ul> </h3>
                    <script type="text/javascript">
                    initiate();
                    </script>

                    die css datei

                    #containerul li{
                    margin:           0 0 0 20px;   (left margin für Einrückung)
                    color:            #00AD66;
                    font-family:      Verdana,Arial,Helvetica;
                    font-size:        10px;
                    text-decoration:  none;
                    text-transform:   uppercase;
                    }

                    die js datei

                    var temp, temp2, cookieArray, cookieArray2, cookieCount;

                    function initiate(){

                    cookieCount=0;

                    if(document.cookie){

                    cookieArray=document.cookie.split(";");
                        cookieArray2=new Array();

                    for(i in cookieArray){
                          cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
                        }

                    }

                    cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();

                    temp=document.getElementById("containerul");

                    for(var o=0;o<temp.getElementsByTagName("li").length;o++){

                    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){

                    temp2                                = document.createElement("span");
                          temp2.className                        = "symbols";
                          temp2.style.backgroundImage        = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus01.gif)":"url(plus01.gif)"):"url(plus01.gif)";
                          temp2.onclick=function(){
                            showhide(this.parentNode);
                            writeCookie();
                          }

                    temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

                    temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

                    if(cookieArray[cookieCount]=="true"){
                            showhide(temp.getElementsByTagName("li")[o]);
                          }

                    cookieCount++;

                    }
                        else{

                    temp2                                = document.createElement("span");
                          temp2.className                        = "symbols";
                          temp2.style.backgroundImage        = "url(plus01.gif)";

                    temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);

                    }

                    }

                    }

                    function showhide(el){

                    el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";

                    el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus01.gif)":"url(plus01.gif)";

                    }

                    function writeCookie(){                // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.

                    cookieArray=new Array()

                    for(var q=0;q<temp.getElementsByTagName("li").length;q++){

                    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
                          if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){

                    cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");

                    }
                        }

                    }

                    document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();

                    }

                    1. Hallo!

                      <script type="text/javascript" src="menuscript01.js"></script>

                      Ist das JavaScript das du unten aufgeführt hast in der Datei menuscript01.js?

                      </head>

                      <body bgcolor="#000000">

                      Wenn du CSS benutzt, warum machst du es dann nicht durchgängig so?

                      <h1>Hybrid Theory</h1>

                      Ein ziemlich geiles Album :-))

                      die js datei

                      In der JS-Datei steht vorallem irgendwas mit Cookies. Das tut aber nichts zur Sache (bei diesem Problem). Ist folgende Funktion das Script, das du irgendwo gefunden hast? Wenn nein, dann glaube ich, dass du etwas vergessen hast zu posten. Wenn ja, dann fehlt etwas in deinem Code. Erstens der Eventhandler (siehe mein erstes Posting) und zweitens hast du kein einziges <span> in deinem HTML-Code (auf welches du aber mit getElementsByTagName("span")[0] zugreifen willst).

                      function showhide(el){

                      el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";

                      el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus01.gif)":"url(plus01.gif)";

                      }

                      ciao, Lukas

                      --
                      Nach einem Korrspondentenbericht der New York Times aus der umkämpften Stadt, wurden zur „Ausschaltung eines einzigen feindlichen Scharfschützen mehrere 500-Pfund-Bomben, 35 Artilleriegranaten des Kalibers 255, zehn Schüsse aus der Abrams-Panzerkanone sowie 30 000 Patronen leichter Munition benötigt”. „Die Gebäude waren daraufhin Ruinen”, schreibt die New York Times, „aber der Scharfschütze schoss weiter...”
                      1. huhu^^

                        ja ok wenn das so ist^^ aber komischer weise ist das hier in dem folgendem quelltext. dieser quelltext ist aus der bsp. htm die beim script dabei war:

                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                        <html>
                        <head>
                        <title>Navigation</title>

                        <script type="text/javascript" src="menuscript01.js"></script>

                        <style type="text/css">
                        <!--
                        body {
                        scrollbar-face-color: #FFFFFF;
                        scrollbar-shadow-color: #FFFFFF;
                        scrollbar-highlight-color: #FFFFFF;
                        scrollbar-3dlight-color: #D9D9D9;
                        scrollbar-darkshadow-color: #D9D9D9;
                        scrollbar-track-color: #FFFFFF;
                        scrollbar-arrow-color: #000000;
                        font-family : Verdana,Arial,Helvetica;
                        font-size:12px;
                        font-weight:normal;
                        text-decoration:none;
                        color: #000000;
                        background-color : #FFFF84;

                        margin-right:0px;
                        margin-left:0px;
                        margin-top:0px;
                        margin-bottom:0px;
                        }

                        #containerul, #containerul ul{
                          text-align:left;
                          margin:0;                          /* browser default margins überschreiben */
                          padding:0;                         /* browser default padding überschreiben */
                        }

                        #containerul li{
                        margin:0 0 0 20px;                   /* left margin für Einrückung */
                        color: #000000;
                        font-family:Verdana,Arial,Helvetica;
                        font-size:12px;
                        text-decoration:none;
                        padding:0;                           /* browser default margins überschreiben */
                        list-style-type:none;                /* browser default padding überschreiben */
                        }

                        #containerul .symbols{               /* styles positionierung symbole */
                          float:left;
                          width:12px;
                          height:1em;
                          background-position:0 50%;
                          background-repeat:no-repeat;
                        }

                        a{
                        color: #000000;
                        font-family:verdana,arial,helvetica;
                        font-size:12px;
                        text-decoration:none;
                        }

                        a:visited{
                        color: #000000;
                        font-family:verdana,arial,helvetica;
                        font-size:12px;
                        text-decoration:none;
                        }
                        a:hover{
                        color: #FF007F;
                        font-family:verdana,arial,helvetica;
                        font-size:12px;
                        text-decoration:none;
                        }

                        -->
                        </style>
                        </head>
                        <body text="#000000" bgcolor="#FFDF00" link="#FFFFE8" vlink="#000000" alink="#000000" marginwidth="0" marginheight="0" bottommargin="0" rightmargin="0" topmargin="0" leftmargin="0">

                        <img src="transpixel.gif" width="1" height="30" border="0" alt=""><br>

                        <ul id="containerul">

                        <li>Mini Images
                            <ul>
                             <li><a href="#">Buttons</a></li>
                             <li><a href="#">Smilies</a></li>
                             <li><a href="#">Piktogramme</a></li>
                            </ul>
                        </li>
                        <li>Web-Toolbox
                            <ul>
                            <li><a href="#">CSS-Beispiele</a></li>
                            <li><a href="#">JavaScripts</a>
                               <ul>
                               <li><a href="#">Mathematik</a></li>
                               <li><a href="#">Formulare</a></li>
                               <li><a href="#">Datum</a></li>
                               </ul>
                            </li>
                            </ul>
                        </li>

                        <li>Geilenkirchen
                            <ul>
                            <li><a href="#">unsere Stadt</a></li>
                            <li><a href="#">Infrastruktur</a></li>
                            <li><a href="#">Adressen</a>
                               <ul>
                               <li><a href="#">Gastronomie</a></li>
                               <li><a href="#">Beh&ouml;rden</a></li>
                               <li><a href="#">Vereine</a></li>
                               </ul>
                            </li>
                            <li><a href="#">CSS-Beispiele</a></li>
                            </ul>
                        </li>

                        </ul>

                        <script type="text/javascript">
                        initiate();                // This must be placed immediately after the menu in order to format it properly.
                        </script>
                        <br><br>

                        </body>
                        </html>

                        1. Ok jungs habs hinbekommen^^ danke trotzdem^^

                    2. Hallo,

                      <h3>
                      <ul id="containerul">
                      <li>1. Papercut</a><br />  </li>
                      <li>2. One Step Closer  <br /> </li>
                      <li>3. With You  <br /> </li>
                      <li>4. Points Of Authority   <br /> </li>
                      <li>5. Crawling  <br /> </li>
                      <li>6. Runaway  <br /> </li>
                      <li>7. By Myself   <br /> </li>
                      <li>8. In The End  <br /> </li>
                      <li>9. A Place For My Head <br /> </li>
                      <li>10. Forgotten  <br /> </li>
                      <li>11. Cure For The Itch  <br /> </li>
                      <li>12. Pushing Me Away<br /></li></ul> </h3>

                      das ist ungültiges HTML: Ein h3-Element darf keine weiteren Blockelemente wie etwa ul enthalten. Davon abgesehen finde ich es semantisch ziemlich seltsam, eine ganze Liste als Überschrift auszuzeichnen.
                      Die br-Elemente sind übrigens allesamt unsinnig: Wozu ein Zeilenumbruch, wenn das li-Element sowieso keinen weiteren Inhalt hat? Die Leerzeichen halte ich jetzt mal für Editor-Unfälle.

                      <script type="text/javascript">
                      initiate();
                      </script>

                      Das Script habe ich mir nur oberflächlich angesehen. Wucher wichtel sagt zwar, du hättest in deinem HTML-Code kein eiziges span-Element (und keine Eventhandler), aber das Script erzeugt einige davon. Allerdings an einer Stelle, wo sie nicht stehen dürfen, nämlich span als direkte Kindelemente des ul.
                      Somit komme ich zu der Überzeugung, dass das Script in der Form völlig unbrauchbar ist. Die tatsächliche Funktion ist mir aber nur ansatzweise klargeworden.

                      So long,
                       Martin

                      --
                      Wenn du beim Kochen etwas heißes Wasser übrig hast, friere es ein.
                      Heißes Wasser kann man immer gebrauchen.
                      1. Hallo!

                        Wucher wichtel sagt zwar, du hättest in deinem HTML-Code kein eiziges span-Element (und keine Eventhandler), aber das Script erzeugt einige davon.

                        Oh. Ist völlig an mir vorbei gegangen. Danke!

                        ciao, Lukas

                        --
                        Nach einem Korrspondentenbericht der New York Times aus der umkämpften Stadt, wurden zur „Ausschaltung eines einzigen feindlichen Scharfschützen mehrere 500-Pfund-Bomben, 35 Artilleriegranaten des Kalibers 255, zehn Schüsse aus der Abrams-Panzerkanone sowie 30 000 Patronen leichter Munition benötigt”. „Die Gebäude waren daraufhin Ruinen”, schreibt die New York Times, „aber der Scharfschütze schoss weiter...”
                      2. das ist ungültiges HTML: Ein h3-Element darf keine weiteren Blockelemente wie etwa ul enthalten. Davon abgesehen finde ich es semantisch ziemlich seltsam, eine ganze Liste als Überschrift auszuzeichnen.

                        das h3 element ist in der css so angelegt:

                        h3 {color:#808080; font-size:14px}

                        1. Hi,

                          das ist ungültiges HTML: Ein h3-Element darf keine weiteren Blockelemente wie etwa ul enthalten. Davon abgesehen finde ich es semantisch ziemlich seltsam, eine ganze Liste als Überschrift auszuzeichnen.

                          das h3 element ist in der css so angelegt:
                          h3 {color:#808080; font-size:14px}

                          ja, schon recht. Das ändert aber nichts daran, dass h3 kein ul enthalten darf, und dass eine komplette Liste(!) als Überschrift IMHO nicht wirklich sinnvoll ist, selbst wenn der Code valide wäre.

                          So long,
                           Martin

                          --
                          Der Gast geht solange zum Tresen, bis er bricht.
    2. Hallo

      ja ich brauche halt nen ansporn wie das funktionieren würde das das mit js geht weiß ich ja aber wie

      besser geht das mit HTML und CSS, siehe zum Beispiel:

      SELFHTML, CSS-basierte Navigationsleisten.

      Freundliche Grüße

      Vinzenz