Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 15

Thema: Einfaches Aufklappmenü mit Javascript und Stylesheets

  1. #1
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Einfaches Aufklappmenü mit Javascript und Stylesheets

    Hi,

    ich habe mal ein einfaches Menü-Script von mir modifiziert, da ja häufiger nach so etwas gefragt wird. Es ist jetzt in der Optik natürlich noch ganz einfach, man kann es aber mit Stylesheets beliebig anpassen.

    Momentan ist es für drei Ebenen ausgelegt, unter "Neuigkeiten -> Deutschland" gibt es zum Ansehen noch eine weitere Untergruppe.

    Das ganze ließe sich beliebig erweitern, man sollte allerdings die Javascripte besser in eine eigene Datei auslagern, die Stylesheets sowieso.

    Have Fun

    Ronald
    Code:
    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
    
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>aufklappmenue</title>
    
      <base target="_self">
      <script type="text/javascript" language="JavaScript">
      <!--
      var menu = new Array&#40;"news","forum","chats","gaestebuch"&#41;;
    
      function disp&#40;wert&#41;
        &#123;
        for &#40;i=0;i < menu.length; i++&#41;
          &#123;
          if &#40;menu&#91;i&#93; != wert&#41;
             &#123;
             document.getElementById&#40;menu&#91;i&#93;&#41;.style.display = 'none';
             &#125;
          &#125;
        if &#40;wert == 0&#41;
          &#123;
          return;
          &#125;
        if &#40;document.getElementById&#40;wert&#41;.style.display == 'block'&#41;
          &#123;
          document.getElementById&#40;wert&#41;.style.display = 'none';
          &#125;
        else
          &#123;
          document.getElementById&#40;wert&#41;.style.display = 'block';
          &#125;
        &#125;
      var submenu = new Array&#40;"Deutschland"&#41;;
    
    
      function dispSub&#40;wert&#41;
        &#123;
        for &#40;i=0;i < submenu.length; i++&#41;
          &#123;
          if &#40;submenu&#91;i&#93; != wert&#41;
             &#123;
             document.getElementById&#40;submenu&#91;i&#93;&#41;.style.display = 'none';
             &#125;
          &#125;
        if &#40;wert == 0&#41;
          &#123;
          return;
          &#125;
        if &#40;document.getElementById&#40;wert&#41;.style.display == 'block'&#41;
          &#123;
          document.getElementById&#40;wert&#41;.style.display = 'none';
          &#125;
        else
          &#123;
          document.getElementById&#40;wert&#41;.style.display = 'block';
          &#125;
        &#125;
    
    
      //-->
      </script><style type="text/css">
    <!--
    td  &#123;font-size&#58;15px&#125;
    #menu  &#123;
             display&#58;block;
             font-size&#58;13px;
             padding-left&#58;20px;
             &#125;
    #menu a&#58;before
             &#123;
             content&#58;" + ";
             &#125;
    #submenu  &#123;
             display&#58;block;
             font-size&#58;13px;
             padding-left&#58;40px;
             &#125;
    #submenu a&#58;before
             &#123;
             content&#58;" - ";
             &#125;
    -->
    </style>
    </head>
    <body onLoad="disp&#40;0&#41;;dispSub&#40;0&#41;">
    <table name="nav_table" style="width&#58;100%;margin-top&#58;30px" border="0" cellspacing="2" cellpadding="0" align="left">
      <tr>
        <td id="nav">Startseite</td>
      </tr>
      <tr>
        <td id="nav">Neuigkeiten</td>
      </tr>
      <tr>
        <td>
          <table class="subnav" id="news" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td id="menu">Deutschland</td>
            </tr>
            <tr>
              <td>
                <table class="subnav" id="Deutschland" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                   <td id="submenu">Norddeutschland</td>
                 </tr>
                 <tr>
                   <td id="submenu">Süddeutschland</td>
                 </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td id="menu">Europa</td>
            </tr>
            <tr>
              <td id="menu">Welt</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td id="nav">Foren</td>
      </tr>
      <tr>
        <td>
          <table class="subnav" id="forum" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td id="menu">Deutschland</td>
            </tr>
            <tr>
              <td id="menu">Europa</td>
            </tr>
            <tr>
              <td id="menu">Welt</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td id="nav">Chats</td>
      </tr>
      <tr>
        <td>
          <table class="subnav" id="chats" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td id="menu">Deutschland</td>
            </tr>
            <tr>
              <td id="menu">Europa</td>
            </tr>
            <tr>
              <td id="menu">Welt</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td id="nav">Gästebücher</td>
      </tr>
      <tr>
        <td>
          <table class="subnav" id="gaestebuch" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td id="menu">das neu Gästebuch</td>
            </tr>
            <tr>
              <td id="menu">mein altes Gästebuch</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    </center>
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru
    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    gute idee - vielleicht noch etwas kommentieren - wobei, die dies lesen wollen können ja auch fragen..

    gruss - phore

  3. #3
    Forum Guru
    Themenstarter

    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von ph0re
    gute idee - vielleicht noch etwas kommentieren - wobei, die dies lesen wollen können ja auch fragen..

    gruss - phore
    Ja, das mit dem kommentieren hatte ich mir auch erst überlegt, bin dann aber zu dem Schluß gekommen, daß es nicht viel bringt.
    Ich stehe aber gerne hilfsbereit zur Verfügung wenn es jemand verwenden möchte und dann gezielte Fragen dazu hat.

    So ohne vernünftige Stylesheets sieht es langweilig aus, ich habe leider die HP wo ich es verwende noch nicht online (es gibt schon eine Online-HP, aber da ist es noch nicht drinnen, kommt erst mit dem großen Update-Packet rein, da ich sonst zu viel zwischendurch umbaun muß).

    Ich werd aber mal eine Nette version fertig machen und die auf meinen testwebspace legen.

    G.a.d.M.

    Ronald

  4. #4
    HTML Newbie
    Registriert seit
    04.05.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wollte mal Fragen ob man auch bilder in dein script einbauen kann oda obs nur mit text läuft.

  5. #5
    Forum Guru
    Themenstarter

    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wie meinst du das mit den Bilderm willst du grafische Links benutzen?

  6. #6
    HTML Newbie
    Registriert seit
    04.05.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ja genau das meine ich

  7. #7
    Forum Guru
    Themenstarter

    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das geht sicherlich, man müßte das Script nur dafür entsprechend anpassen, sprich einfach die Textlinks durch Grafiken ersetzen.
    Wenn die grafischen Links allerdings auch noch Hovereffekte haben sollen, dann wird es etwas aufwendiger, weil dann entweder ein weiteres Javascript oder aber für jeden Link ein eigenes Style benötigt wird.

    G.a.d.M.

    Ronald

  8. #8
    HTML Newbie
    Registriert seit
    04.05.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Aufklappmenü

    Danke habs schon ausprobiert, dabei ist mir aber aufgefallen das im IE alles richtig läuft, aber Firefox es nicht anzeigen kann.

  9. #9
    HTML Newbie
    Registriert seit
    04.05.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Okay muss mich berichtigen habs jetzt soweit das es mit jedem Browser läuft .

  10. #10
    wurmax
    Gast

    Standard

    moin,
    ich wollte noch fragen, ob es auch möglich ist, dass wenn man nur die maus drauf hällt, dass dann das von alleine runterklappt, ohen das man erst drauf klickt.
    mfG
    wurmax

Ähnliche Themen

  1. Einfaches Javascript will nicht funktionieren...Need Help
    Von NeedHelp im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 39
    Letzter Beitrag: 14.04.2008, 22:52
  2. Aufklappmenü
    Von Cruz im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 12
    Letzter Beitrag: 13.01.2006, 20:22
  3. IFrame und Stylesheets
    Von Gast alias im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 18.09.2005, 15:22
  4. Stylesheets
    Von Lion im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 15.06.2004, 19:20
  5. CSS Stylesheets!
    Von Franzi im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 15.05.2004, 16:01

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •