Einfaches Aufklappmenü mit Javascript und Stylesheets

Ronald

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

HTML

<!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("news","forum","chats","gaestebuch");


  function disp(wert)
    {
    for (i=0;i < menu.length; i++)
      {
      if (menu[i] != wert)
         {
         document.getElementById(menu[i]).style.display = 'none';
         }
      }
    if (wert == 0)
      {
      return;
      }
    if (document.getElementById(wert).style.display == 'block')
      {
      document.getElementById(wert).style.display = 'none';
      }
    else
      {
      document.getElementById(wert).style.display = 'block';
      }
    }
  var submenu = new Array("Deutschland");




  function dispSub(wert)
    {
    for (i=0;i < submenu.length; i++)
      {
      if (submenu[i] != wert)
         {
         document.getElementById(submenu[i]).style.display = 'none';
         }
      }
    if (wert == 0)
      {
      return;
      }
    if (document.getElementById(wert).style.display == 'block')
      {
      document.getElementById(wert).style.display = 'none';
      }
    else
      {
      document.getElementById(wert).style.display = 'block';
      }
    }




  //-->
  </script><style type="text/css">
<!--
td  {font-size:15px}
#menu  {
         display:block;
         font-size:13px;
         padding-left:20px;
         }
#menu a:before
         {
         content:" + ";
         }
#submenu  {
         display:block;
         font-size:13px;
         padding-left:40px;
         }
#submenu a:before
         {
         content:" - ";
         }
-->
</style>
</head>
<body onLoad="disp(0);dispSub(0)">
<table name="nav_table" style="width:100%;margin-top:30px" border="0" cellspacing="2" cellpadding="0" align="left">
  <tr>
    <td id="nav">[url='#']Startseite[/url]</td>
  </tr>
  <tr>
    <td id="nav">[url='javascript:void[]']Neuigkeiten[/url]</td>
  </tr>
  <tr>
    <td>
      <table class="subnav" id="news" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td id="menu">[url='javascript:void[]']Deutschland[/url]</td>
        </tr>
        <tr>
          <td>
            <table class="subnav" id="Deutschland" border="0" cellspacing="0" cellpadding="0">
             <tr>
               <td id="submenu">[url='#']Norddeutschland[/url]</td>
             </tr>
             <tr>
               <td id="submenu">[url='#']Süddeutschland[/url]</td>
             </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td id="menu">[url='#']Europa[/url]</td>
        </tr>
        <tr>
          <td id="menu">[url='#']Welt[/url]</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td id="nav">[url='javascript:void[]']Foren[/url]</td>
  </tr>
  <tr>
    <td>
      <table class="subnav" id="forum" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td id="menu">[url='#']Deutschland[/url]</td>
        </tr>
        <tr>
          <td id="menu">[url='#']Europa[/url]</td>
        </tr>
        <tr>
          <td id="menu">[url='#']Welt[/url]</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td id="nav">[url='javascript:void[]']Chats[/url]</td>
  </tr>
  <tr>
    <td>
      <table class="subnav" id="chats" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td id="menu">[url='#']Deutschland[/url]</td>
        </tr>
        <tr>
          <td id="menu">[url='#']Europa[/url]</td>
        </tr>
        <tr>
          <td id="menu">[url='#']Welt[/url]</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td id="nav">[url='javascript:void[]']Gästebücher[/url]</td>
  </tr>
  <tr>
    <td>
      <table class="subnav" id="gaestebuch" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td id="menu">[url='#']das neu Gästebuch[/url]</td>
        </tr>
        <tr>
          <td id="menu">[url='#']mein altes Gästebuch[/url]</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</center>
</body>
</html>

Alles anzeigen

phore

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

gruss - phore

Ronald

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

smashxl

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

Ronald

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

smashxl

Ja genau das meine ich

Ronald

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

smashxl

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

smashxl

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

wurmax

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

Ronald

Wenn du dein Select-Feld benutzt, dann geht das nur per Mouseclick zu öffnen.

G.a.d.M.

Ronald

DarkSyranus

Hat sich gelöst.
Er wollte das onclick durch onmousemove ersetzt haben.

fdmotion

hab das script hier verwendet, danke dafür. ...und zwar geht es um diese Navi: http://www.arganine-argan.com/navi_produkte.php

1. Die Navi funktioniert im Firefox, aber nicht im neuen IE 7.0
2. Wenn ich die Navi mit PHP include in diese Seite einbinde: http://www.arganine-argan.com/produkte.php, funktioniert das JavaScript nicht mehr...weder in Firefox noch IE. In Firefox funktioniert sie allerdings nach einmal klick, in IE zerhauts das ganze.

Weiss jemand woran das liegt? Danke

Verena

Ich habe das ausprobiert und das onclick durch onmousemove ersetzt. Jetzt ist es allerdings so, dass, wenn ich mit der Maus draufgehe und sie dann minimal bewege, sich das untere Kästchen ganz schnell öffnet und wieder schließt. Das schaut so aus, als ob es flimmern würde. Ich hätte das jetzt aber gerne so, dass, wenn man drauffährt, es die ganze Zeit geöffnet bleibt und nicht so flimmert und erst wenn man wieder ganz runtergeht, sollte es sich schließen.

BendOr

du musst wahrscheinlich onmouseover benutzen !

Tags