Startseite Forum
Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:
Passwort vergessen? Benutzername vergessen?
Auf Thema antworten
Neues Thema
  • Seite:
  • 1

THEMA: Ausklappbares Menü

Ausklappbares Menü 2 Jahre, 4 Monate her #1331

  • Tysk
Hi,

und zwar brauche einen HTML Code für folgendes:

Ich will kleine, verhsciedene Tabellen erstellen. Platziere ich die allerdings untereinander wird meine Seite entlos lang. Also dachte ich mir, da gibt es doch solche Balken, die rechts ein + haben und dann wird die Tabelle ausgefahren...

Nun meine Frage: Wie nennt man solche Balken, wo man was verstecken kann und wie heißt der nötige Code dazu?? Wenn es geht bitte mit Beschreibung...

Wenn es geht, möchte ich bitte folgende Hintergrundgrafik der Balken haben:
http://kirmes-freizeitparks.jimdo.com/s/img/nav_bg.gif

SChriftart: Verdana
Größe: 12 Pixel
Farbe: Weiß

Danke
Antwort Zitieren

Ausklappbares Menü 2 Jahre, 4 Monate her #8033

  • Super_Mario
  • OFFLINE
  • Platinum Boarder
  • Beiträge: 623
  • Karma: 35
Hallo,

meinst du etwas in diese Richtung:
<table border="0" width="100">
<tr>
  <td width="33%" valign="top">
  <div onmouseover="javascript:Link(0)" onmouseout="javascript:Link(0)">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%" style="border: 1px solid #000000">Option 1</td>
      </tr>
      <tr>
        <td width="100%">
          <form name="Links" action="" style="position: absolute; display: none">
          <a href="http://www.adresse-deiner-webseite.de/link1.htm">Link 1</a><br>
          <a href="http://www.adresse-deiner-webseite.de/link2.htm">Link 2</a><br>
          <a href="http://www.adresse-deiner-webseite.de/link3.htm">Link 3</a><br>
          <a href="http://www.adresse-deiner-webseite.de/link4.htm">Link 4</a><br>
          <a href="http://www.adresse-deiner-webseite.de/link5.htm">Link 5</a><br>
          </form></td>
      </tr>
    </table>
  </div>
  </td>
</tr>
</table>
<script type="text/javascript">
<!--
function Link(Form)
{
if(document.Links.style.display=="none")
document.Links.style.display = "";
else if(document.Links.style.display=="")
document.Links.style.display = "none";
}
//-->
</script>
liebe Grüße
Super Mario

Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide!
Antwort Zitieren

Ausklappbares Menü 2 Jahre, 4 Monate her #8034

  • Tysk
Nee ich meinte das hier:

http://community.woltlab.com/db/index.php?...t&projectID=435

Weißt Du den Code dafür??
Antwort Zitieren

Ausklappbares Menü 2 Jahre, 4 Monate her #8035

  • Super_Mario
  • OFFLINE
  • Platinum Boarder
  • Beiträge: 623
  • Karma: 35
Achso, du meinst so eine Tabelle, die wie eine Kartei funktioniert Auf der Seite ist das eigentlich so gemacht, dass man beim Anklicken von einer Zelle auf eine neue Seite weitergeleitet wird, aber ich habe dir das Gaze mit Javascript gemacht (da brauchst du keine neuen Seiten zu laden)

Das ist der Code:
<table border="0" width="500" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%">
      <table border="0" width="100%" cellspacing="1" cellpadding="0">
        <tr>
          <td width="20%" id="Eins" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,0)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 1</font></td>
          <td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,1)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 2</font></td>
          <td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,2)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 3</font></td>
          <td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,3)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 4</font></td>
          <td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,4)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 5</font></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="100%" align="center" bgcolor="#EEEEEE" style="height: 60px">
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 1</font></form>
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 2</font></form>
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 3</font></form>
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 4</font></form>
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 5</font></form>
    </td>
  </tr>
</table>
<script type="text/javascript">
<!--
var Kategorien = new Array();
var ausgewaehlt = 0;

if(document.getElementById)
{
Kategorien[0] = document.getElementById("Eins");
Kategorien[0].style.color = "#333333";
Kategorien[0].style.backgroundColor = "#00FF00";
document.Inhalt[0].style.display = "";
}
else
ausgewaehlt = -1;

function Auswahl(Objekt,Objektindex)
{
if(!Kategorien[Objektindex])
Kategorien[Objektindex] = Objekt;

if(ausgewaehlt>-1)
{
Kategorien[ausgewaehlt].style.color = "#FFFFFF";
Kategorien[ausgewaehlt].style.backgroundColor = "#666666";
document.Inhalt[ausgewaehlt].style.display = "none";
}

Kategorien[Objektindex].style.color = "#333333";
Kategorien[Objektindex].style.backgroundColor = "#00FF00";
document.Inhalt[Objektindex].style.display = "";

ausgewaehlt = Objektindex;
}
//-->
</script>

Beim Anklicken einer Zelle wird der entsprechende Inhalt sichtbar gemacht. Wenn du eine Kategorie hinzufügen möchtest, fügst du bei den Zellen in dem table einfach eine neue Zelle ein (kopiere am Besten eine von den bereits vorhandenen Zellen).

Was beim Hinzufügen sehr wichtig ist, ist die rot geschriebene Indexnummer für die Zellen. Diese Nummer musst du anpassen, weil sie angibt, um die wievielte Zelle es sich handelt (Zählung beginnt bei 0, daher hat die erste Zelle eine 0, die Zweite Zelle eine 1, usw). Entsprechend dieser Nummer wird nämlich die Zelle grün eingefärbt und deren Inhalt sichtbar gemacht.

In den blau geschriebenen Bereichen kommt der Inhalt hin, der beim Klick auf die entsprechende Zelle erscheint.

Dieses Javascript funktioniert in allen Browsern, die CSS können. Browser, die getElementById() unterstützen, färben beim Laden der Seite automatisch die erste Zelle grün ein und lassen deren Inhalt erscheinen. W3C valide ist das Javascript natürlich auch
liebe Grüße
Super Mario

Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide!
Antwort Zitieren
Auf Thema antworten
Neues Thema
  • Seite:
  • 1
Javascript Forum
Sonstiges
Kurse, Tutorials und Zeug zum lernen
Powered by Kunena
Ladezeit der Seite: 0.33 Sekunden

Login

Aktuell im Forum

mehr