IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - JavaScript: aufklappbares Menü



JavaScript: aufklappbares Menü

Um Platz zu sparen, kann man mit JavaScript aufklappbare Menüs gestallten. Dieses Tutorial zeigt wie.


Autor: Patrick Faes (dreamer)
Datum: 01-02-2004, 09:04:45
Referenzen: keine
Schwierigkeit: Fortgeschrittene
Ansichten: 77574x
Rating: 9 (2x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einleitung

Dieses kurze Tutorial will zeigen wie man mit JavaScript aufklappbare Menüs macht. Diese sparen ja eine Menge Platz. In diesem Beispiel verwende ich Listen die aufgeklappt werden, indem Teile der Liste unsichtbar sind und auf Knopfdruck sichtbar gemacht werden. Der Anfang wird gemacht mit einem kurzen JavaScript im HEAD-Bereich.

<script type="text/javascript">
function switchlayer(Layer_Name)
{
  var GECKO = document.getElementById? 1:0 ;
  var NS = document.layers? 1:0 ;
  var IE = document.all? 1:0 ;

  if (GECKO)
       {document.getElementById(Layer_Name).style.display=
	   (document.getElementById(Layer_Name).style.display=='block') ? 'none' : 'block';}
  else if (NS)
       {document.layers[Layer_Name].display=(document.layers[Layer_Name].display==
	   'block') ? 'none' : 'block';}
  else if (IE)
       {document.all[Layer_Name].style.display=(document.all[Layer_Name].style.display==
	   'block') ? 'none' : 'block';}
}
</script>
Anfangs wird gecheckt welchen Browsertyp der Besucher verwendet. Dies macht man durch checken welcher Objekt-Typ verwendet wird (diese wurden durch die Browser-Hersteller nicht standarisiert). Was Sie da sehen, ist eine verkürzte Version von einer IF-Abfrage. Es wird eine Bedingung gestellt (Fragezeichen) und dann kommt die Anweisung für dem Browser wenn es TRUE ergibt (Variable bekommt den Wert "1") und danach die Anweisung für dem Fall das die Abfrage FALSE ergibt (Variable bekommt den Wert "0"). Wenn das Script aufgerufen wird, wird ein Element, je nachdem ob es sichtbar ist oder nicht, sichtbar bzw. unsichtbar gemacht (anfangs soll das Untermenü auf "display:none;" stehen).

Jetzt kommen wir zur Navigationsliste selbst. Nur zwei Listenpunkten werden angezeigt, wenn man jedoch eine davon auswählt, wird ein Unterteil sichtbar gemacht. Beim betätigen des Links wird das Script ausgeführt. Man soll aber als Parameter die ID der Untermenüs mitgeben. Desweiteren wird beim onClick-Befehl "return false" definiert. Dies teilt den Browser mit, dass er den eigentlichen Link nicht folgen soll. Wenn JavaScript inaktiv ist, wird so der alternative Link gefolgt, aber auch nur dann. Um das aufklappbare Menü alternativ auch mit PHP zu bauen, klicken Sie HIER (mit JavaScript muss die Seite nicht jedesmal neu geladen werden). Wenn Sie mehr wissen möchten über Listen, klicken Sie HIER.

<ul>
  <li><a href="untermenue.php" onclick="javascript:switchlayer('ferrari');
	 return false;">Ferrari</a></li>
 <ul id="ferrari" type="circle" style="display:none;">
  <li>F355 Spider</li>
  <li>F40</li>
  <li>Maranello</li>
  <li>Testarossa</li>
 </ul>
  <li><a href="untermenue2.php" onclick="javascript:switchlayer('porsche');
	 return false;">Porsche</a></li>
 <ul id="porsche" type="circle" style="display:none;">
  <li>Roadster</li>
  <li>911</li>
 </ul>
</ul>
Und zu guter letzt das Praxisbeispiel.


Jimmy
Rookie
Beitrag vom:
25-10-2007, 01:31:19

Ich habe den Fehler bei mir gefunden, ich hatte hier: <ul id="links" type="circle" style="display:none;">

"links" groß geschrieben, anstatt klein

Aber ich danke dir trotzdem für deine Mühe und besonders für dieses script.

-----------------------------------------------------


Jimmy
Rookie
Beitrag vom:
25-10-2007, 00:01:36

Ja, sorry, das hatte ich auf der Startseite wiklich zweimal drin, aber daran liegt es nicht, habe es da nun einmal raus genommen, geht trotzdem unter Firefox nicht auf, ich habe jetzt nochmal den Code kontrolliert ob ich evtl. etwas nicht richtig reinkopiert habe, aber steht genauso drin, wie hier vorgegeben, ich weiß wirklich nicht, woran das liegt.

-----------------------------------------------------


dreamer
Expert
Beitrag vom:
24-10-2007, 13:30:41

Sieht so aus als ob du die Funktion switchlayer() zweimal im Quellcode stehen hast. Das könnte dazu führen dass ein Browser beim Parsen des Quellcodes deiner Seite einen Fehler aufruft, nl. dass die Funktion switchlayer() schon vorher definiert wurde.

-----------------------------------------------------


Jimmy
Rookie
Beitrag vom:
23-10-2007, 23:45:52

Ich habe mir das Script oben so bei mir rein geschrieben, aber in FireFox opera usw klappen die Untermenuüs nicht auf sonder es kommt er verbindet zur Seite ...Untermenue.php. kannst du dir hier mal anschauen, wenn du magst www.my-skalare.de, die untermenues sind bei Links und bei Besuche. Mit IE funktioniert das tadellos, nur ich bekam Zuschriften, das diese mit den anderen Browsern nicht geht. Bei mir mit Firefox gehts auch nicht.

-----------------------------------------------------


dreamer
Expert
Beitrag vom:
23-10-2007, 13:13:13

@ Jimmy

Was genau meinst du? Funktioniert doch alles. Hab's getestet im Internet Explorer, Mozilla, Firefox, Konquerer und Opera.

-----------------------------------------------------


Jimmy
Rookie
Beitrag vom:
23-10-2007, 10:48:22

Und die anderen Browser

Wie ist das mit den anderen Browsern? in FireFox, Opera, usw. nur im Code IE ersetzen?

-----------------------------------------------------


dreamer
Expert
Beitrag vom:
14-10-2007, 13:11:10

Was meinst du denn mit einem "Hintergrundstyle"? Grafiken, Farben, ... ? Das geht mit CSS und hat nichts mit der Eigenschaft "display" zu tun. Weiß aber nicht was du genau meinst.

-----------------------------------------------------


emil07
Rookie
Beitrag vom:
14-10-2007, 11:41:44

Style

Hallo!

Ich habe mal eine Frage.
Und zwar würde ich gerne wissen wie man da einen Hintergrundstyle einbaut!

Also durch das style="display:none" wird ja kein Hintergrund angezeigt, aber ich weiß nicht wie ich das machen soll !?

Mit freundlichen Grüßen

Emil07

-----------------------------------------------------


localx
Rookie
Beitrag vom:
02-08-2005, 14:29:12

hi,

möchte mal fragen wie ich das mit <div id=XX></div> machen kann?
====
<a href="#" onclick="javascript:switchlayer('1'); return false;"><strong>Christian Mühlroth</strong></a>
<div id="1">
Ich komme aus Deutschland!
</div>
<br><br>
<a href="#" onclick="javascript:switchlayer('2'); return false;"><strong>Bilanovic Marko</strong></a>
<div id="2">
Ich komme aus Schweiz!
</div>
====

das die unterkategorie bleibt draussen wen ich auf die seite zugreife, wie kann ich das verhindern?

EDIT:
fall gelöst ;) hab " style="display:none;" " vergessen ;)

-----------------------------------------------------


dreamer
Expert
Beitrag vom:
24-02-2005, 18:47:37

@ Tabira

öffne mal einen Thread im Forum "Programmieren" und dann sehen wir mal ;-)

-----------------------------------------------------


Tabira
Rookie
Beitrag vom:
24-02-2005, 15:52:12

hallo :)

zufällig bin ich auf dieses Forum gestoßen und hier scheine ich das zu finden, was ich so dringend suche.
Ich möchte auf meiner HP eine Menüleiste haben, die ich 1. farblich gestalten kann und 2. wo Untermenü´s angezeigt werden, wenn man den jeweiligen Menüpunkt anklickt. Das aufklapbare Menü ist schon sehr schön, aber ganz reicht mir das nicht.

Es wäre lieb, wenn mir da jemand weiterhelfen könnte.

LG

Tabi


-----------------------------------------------------


dreamer
Expert
Beitrag vom:
10-02-2005, 14:46:55

@ DaBa

Versuch mal folgendes Script (ich hoffe wir können bald im Forum weiterreden):

<html>
<head>

<script type="text/javascript">
GECKO = document.getElementById? 1:0 ;
NS = document.layers? 1:0 ;
IE = document.all? 1:0 ;

function haupt(untermenue)
{
var hauptmenues = new Array('ferrari','lamborghini','porsche');

for (var menue in hauptmenues)
{
var das_menue = hauptmenues[menue];
if (GECKO) {document.getElementById(das_menue).style.display = 'none';}
else if (NS) {document.layers[das_menue].style.display = 'none';}
else if (IE) {document.all[das_menue].style.display = 'none';}
}

aufklappen(untermenue);
}

function aufklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'block';}
else if (NS) {document.layers[untermenue].style.display = 'block';}
else if (IE) {document.all[untermenue].style.display = 'block';}
}

function zuklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'none';}
else if (NS) {document.layers[untermenue].style.display = 'none';}
else if (IE) {document.all[untermenue].style.display = 'none';}
}
</script>

</head>
<body>

<ul>
<li><a href="untermenue.php" onMouseOver="haupt('ferrari');" onClick="zuklappen('ferrari');return false;"Ferrari</a></li>
<ul id="ferrari" type="circle" style="display:none;">
<li>F355 Spider</li>
<li><a href="untermenue.php" onMouseOver="aufklappen('pferdestaerke');" onClick="zuklappen('pferdestaerke');return false;">F40</a></li>
<ul id="pferdestaerke" style="display:none;">
<li>500 PS</li>
<li>600 PS</li>
<li>700 PS</li>
</ul>
<li>Maranello</li>
<li>Testarossa</li>
</ul>
<li><a href="untermenue2.php" onMouseOver="haupt('lamborghini');" onClick="zuklappen('lamborghini');return false;">lamborghini</a></li>
<ul id="lamborghini" type="circle" style="display:none;">
<li>Diablo</li>
</ul>
<li><a href="untermenue2.php" onMouseOver="haupt('porsche');" onClick="zuklappen('porsche');return false;">Porsche</a></li>
<ul id="porsche" type="circle" style="display:none;">
<li>Roadster</li>
<li>911</li>
</ul>
</ul>

</body>
</html>

-----------------------------------------------------


DaBa
Rookie
Beitrag vom:
10-02-2005, 11:48:54

toller Artikel

Hallo,

fand den Artikel sehr interessant. Fast genau wonach ich immer suchte.
Wie aber macht man es, dass die Untermenüs schon bei mouseover aufklappen, dann sichtbar bleiben, so dass man auch evtl. eines der Untermenüs anklicken kann und erst wieder einklappen, wenn man mit der Mouse über ein anderes Hauptmenü fährt?

-----------------------------------------------------


Morraldor
Senior Member
Beitrag vom:
01-02-2004, 22:08:03

sollen sie ja auch nicht.

Wie du im JavaScript siehst ist das "return false" der Befehl den Link NICHT zu verfolgen.

Er soll ja das Menü öffnen und nicht auf eine andere Seite gehen....

-----------------------------------------------------
Wer dem Leben zu lang zuschaut verpasst es


Dani
Senior Member
Beitrag vom:
01-02-2004, 15:41:59

Die Links gehen nciht (404)

-----------------------------------------------------
\"I have to share the credit. I may have invented it, but I think Bill made it famous. -- When he used it for the NT logon, that\'s what I meant. okay?\" (David Bradley über Ctrl-Alt-Del)


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04510
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06247
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1157
Comments: 0