[HTML/Javascript] Ein Aufklapp-Menü erstellen, das bei allen Browsern läuft?

BartTheDevil89

Devilution Media
ID: 87739
L
2 Mai 2006
3.960
103
Hallo,

ich möchte ein Aufklappmenü erstellen. Also ich habe folgende Linkstruktur:

Link1
-1
-2
-3
Link2
-4
-5
-6
Link3
-7
-8

Normal soll die Navi dann also so aussehen:

Link1
Link2
Link3

Und erst, wenn ich beispielsweise auf "Link2" klicke soll sich das drunterliegende Menü öffnen und dann also sowas dastehen:

Link1
Link2
-4
-5
-6
Link3

Was ich bereits herausgefunden habe ist, dass es vermutlich mit javascript gehen soll und display:none bzw. display block!

Aber alles, was ich bisher über google, etc. gefunden habe, hat entweder nicht funktioniert oder war einfach vollkommen verwirrend.

Könnt ihr mir helfen, wie ich sowas am besten aufsetze? Wichtig ist auch, dass es natürlich bei allen Browsern laufen sollte. :roll:

EDIT: Das ganze sollte mit Buttons, also Grafiken für die Links funktionieren.
 
Zuletzt bearbeitet:

Problem ist, dass ich es komplett untereinander habe muss. Hier ist das, was ich jetzt mit Hilfe von einem Freund zusammengebracht habe:

https://www.zocko.de/menuetest2.php

Der passende Code ist das hier:

<script type="text/javascript">
<!--
window.onload=show;
function show(id)
{

var d = document.getElementById(id);

for (var i = 1; i<=10; i++)
{
if (document.getElementById('smenu'+i) && document.getElementById('smenu'+i) != d)
{
document.getElementById('smenu'+i).style.display='none';
}
}

if (d) {


if (d.style.display == 'none')
{
d.style.display = 'block';
}
else {
d.style.display = 'none';
}
}
}
//-->
</script>

Allerdings hab ich jetzt ein Problem. Und zwar möchte ich eigentlich noch gern das ganze so beeinflussen, dass ein Menü als Standart geöffnet ist. Also wenn man die Seite aufruft, soll eines der Menüs geöffnet sein. Das möchte ich dann per php-Variable bestimmen. Deswegen hab ich es so versucht:

PHP:
<?
$menue = $_GET['menue']; //das GET jetzt nur zum testen
if ($menue == "")
{
$menue="smenu1"; //als Standart, wenn ich nichts angebe, soll also immer das 1. Menü geöffnet werden
}
?>

Aber wie schaffe ich es jetzt, dass das Menü, das ich per php anspreche beim ersten Aufruf geöffnet ist, aber sobald ich dann ein anderes Menü anklicke, sich das geöffnete schließt? Denn im Moment ist es ja auch so, dass das Menü sich schließt, wenn ich irgendein anderes auswähle. Aber ich schaffe es nicht die php-variable so mit in diese script-Funktion einzubinden, dass es wirklich nur beim Aufruf diese Menü öffnet. :roll:

Hoffe ihr habt es verstanden, denn ist etwas kompliziert! :(
 
Zuletzt bearbeitet:
Wenn du sagst, es soll in allen Browsern gut erreichbar sein, dann solltest du aber kein Javascript verwenden, sonst schließt du immer wen aus ;)
 
Problem ist, dass ich es komplett untereinander habe muss.
Ich sagte "z.B."
Wie wärs mit dem: https://www.cssplay.co.uk/menus/slide_definition.html

Aber wie schaffe ich es jetzt, dass das Menü, das ich per php anspreche beim ersten Aufruf geöffnet ist, aber sobald ich dann ein anderes Menü anklicke, sich das geöffnete schließt?
Bei onLoad eben einmal show() für das betreffende Menü aufrufen.
HTML:
<body onload="show(<?php echo $_GET['foo']; ?>);">
Der Rest funktioniert ja schon.
 
Ich sagte "z.B."
Wie wärs mit dem: https://www.cssplay.co.uk/menus/slide_definition.html

Bei onLoad eben einmal show() für das betreffende Menü aufrufen.
HTML:
<body onload="show(<?php echo $_GET['foo']; ?>);">
Der Rest funktioniert ja schon.

OK, hab mich jetzt mal versucht durch deine Version oben zu arbeiten, aber bin leider nicht viel weiter gekommen als es soweit zu vereinfachen:

www.zocko.de/test2.php

Mein Problem ist, dass css-code nicht meine Spitze ist, daher weiß ich nicht so wirklich was ich alles rausnehmen kann. Hab aber mal vesucht alle Farben, Größen rauszunehmen und mal die ersten Buttons reinzumachen.

Aber wie du siehst hab ich gleich ein Problem und zwar ist das einfache öffnen des ersten menüs und dann das klicken eines unteren buttons nicht möglich, da das system auf einmal zum zweiten menü überspringt. Außerdem kommt das Menü mitten im ersten Menü und fügt sich nicht unten an, wie ja eigentlich gewollt. :roll:

EDIT: Bei meiner anderen Variante geht das mit dem irgendwie auch nicht:

<body onload="show(<?php echo $menue; ?>);">
 
Zuletzt bearbeitet:
HTML:
#menu li:hover dl, #menu li a:hover dl {
height:20em;
}
meine erfahrungen mit höhenangeben war immer die, das es alles putt macht....
entweder passt du die an oder du lässt sie weg

mfg

edit:
Außerdem kommt das Menü mitten im ersten Menü und fügt sich nicht unten an, wie ja eigentlich gewollt. :roll:
^ der effekt is damit aber beseitigt :)
 
Zuletzt bearbeitet:
HTML:
#menu li:hover dl, #menu li a:hover dl {
height:20em;
}
meine erfahrungen mit höhenangeben war immer die, das es alles putt macht....
entweder passt du die an oder du lässt sie weg

mfg

OK, hab es rausgenommen aber leider genauso......

Und habt ihr vielleicht ne Idee für meinen Aufruf eines Menüs bei meiner ersten Version? :(
 
EDIT: Bei meiner anderen Variante geht das mit dem irgendwie auch nicht:

<body onload="show(<?php echo $menue; ?>);">
Das liegt daran, dass zum Zeitpunkt von onLoad() die DOM-Struktur noch nicht vorhanden is.
Ich hab dir mal schnell was zusammengebaut:
PHP:
<?php
header("content-type: text/html");
$white_list=array('foo','bar','foobar');
if(!isset($_GET['menu']) || !in_array($_GET['menu'],$white_list))
  $menu_default='foo';
else
  $menu_default=$_GET['menu'];
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Menü-Test</title>

<script type="text/javascript">
var currentshown = 'none';

function show(id)
{
  if(show==currentshown) return;
  
  if(currentshown != 'none')
    document.getElementById('menu_'+currentshown).style.display='none';
  document.getElementById('menu_'+id).style.display='block';
  currentshown=id;
}
</script>
</head>

<body>
<h1>Menutest</h1>
<ul>
  <li><a href="#" onclick="show('foo');">foo-Menü</a>
    <ul id="menu_foo" style="display: none;">
      <li><a href="#">foo 1</a></li>
      <li><a href="#">foo 2</a></li>
      <li><a href="#">foo 3</a></li>
      <li><a href="#">foo 4</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="show('bar');">bar-Menü</a>
    <ul id="menu_bar" style="display: none;">
      <li><a href="#">bar 1</a></li>
      <li><a href="#">bar 2</a></li>
      <li><a href="#">bar 3</a></li>
      <li><a href="#">bar 4</a></li>
      <li><a href="#">bar 5</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="show('foobar');">foobar-Menü</a>
    <ul id="menu_foobar" style="display: none;">
      <li><a href="#">foobar 1</a></li>
      <li><a href="#">foobar 2</a></li>
      <li><a href="#">foobar 3</a></li>
    </ul>
  </li>
</ul>

<script type="text/javascript">show('<?=$menu_default?>');</script>

</body>
</html>
Bedenke bei sowas aber immer, dass jemand ohne JavaScript nur die Oberpunkte sieht und niemals die versteckten Links anklicken kann.

Eine Alternative wäre, alle Links zu zeigen und dann mit JavaScript beim onLoad() alles auszublenden.
 
Eine Alternative wäre, alle Links zu zeigen und dann mit JavaScript beim onLoad() alles auszublenden.

Hi,
hab es jetzt mal als extra Datei hochgeladen: https://www.zocko.de/menuetest2.php

Und ich muss sagen genau so sollte es sein! Allerdings würden mich noch zwei Sachen interessieren:

1. Beim Klick auf ein geöffnetes Menü, wie schaffe ich es, dass es das noch schließt?

2. Deine Idee mit dem genau anders herum machen ist garnicht so schlecht. Hätte doch mehrer Vorteile, oder? 1. Die User ohne Javascript hätten alle Links und 2. würden doch suchmaschienen-Bots auch reinkommen, oder? Denn javascript können die doch auch nicht? Wie könnte man es schaffen, dass es genau anders herum läuft?
 
Suchmaschinenbots scheren sich aber auch einen sch*-Dreck darum, ob etwas nun sichtbar ist, oder nicht ;)

Achso ok gut, dachte dass die mit javascript da auch bisschen ihre Probleme hätten. Wäre aber natürlich gut, wenn man das noch so umbauen könnte, dass die Nicht-Javascript-User auch die Buttons sehen können.
 
1. Beim Klick auf ein geöffnetes Menü, wie schaffe ich es, dass es das noch schließt?
Ich denke, das kriegst du doch wohl selber hin :roll:
PHP:
function show(id)
{
  // Wenn geöffnetes Menü geklickt, ignoriere
  if(show==currentshown) return;
  
  // Wenn ein Menü offen ist, ...
  if(currentshown != 'none')
    // ... schließe das geöffnete
    document.getElementById('menu_'+currentshown).style.display='none';

  // Öffne das gewünschte Menü
  document.getElementById('menu_'+id).style.display='block';
  // Merke dir das neue geöffnete Menü
  currentshown=id;
}
Was musst du da wohl ändern, dass es sich so verhält, wie du willst ? ;)
 
Ich denke, das kriegst du doch wohl selber hin :roll:
PHP:
function show(id)
{
  // Wenn geöffnetes Menü geklickt, ignoriere
  if(show==currentshown) return;
  
  // Wenn ein Menü offen ist, ...
  if(currentshown != 'none')
    // ... schließe das geöffnete
    document.getElementById('menu_'+currentshown).style.display='none';

  // Öffne das gewünschte Menü
  document.getElementById('menu_'+id).style.display='block';
  // Merke dir das neue geöffnete Menü
  currentshown=id;
}
Was musst du da wohl ändern, dass es sich so verhält, wie du willst ? ;)


Bin leider mit javascript noch ein sehr unbeholfener Mensch, deswegen bin ich ja eben froh, dass mir jemand helfen kann. :roll:

Hab es jetzt mal so probiert, aber das wirkt nicht wirklich um es beim Klick wieder zu schließen:


PHP:
function show(id)
{
  // Wenn geöffnetes Menü geklickt...
  if(show==currentshown)
...//dann schließes es
    document.getElementById('menu_'+currentshown).style.display='none'; 
  
  // Wenn ein Menü offen ist, ...
  if(currentshown != 'none')
    // ... schließe das geöffnete
    document.getElementById('menu_'+currentshown).style.display='none';

  // Öffne das gewünschte Menü
  document.getElementById('menu_'+id).style.display='block';
  // Merke dir das neue geöffnete Menü
  currentshown=id;
}

Und wie ich es schaffe, dass er die Menüs schließt und eben nicht anzeigt, hab ich leider auch noch nicht wirklich rausbekommen. *schäm*
 
Hab es jetzt mal so probiert, aber das wirkt nicht wirklich um es beim Klick wieder zu schließen:
Im Moment schließt du es richtig, um es dann gleich wieder aufzumachen :biggrin:
Kannst du sonst keine Programmiersprache ? Dachte, du könntest PHP :think:

Bin leider mit javascript noch ein sehr unbeholfener Mensch, deswegen bin ich ja eben froh, dass mir jemand helfen kann. :roll:

Hab es jetzt mal so probiert, aber das wirkt nicht wirklich um es beim Klick wieder zu schließen:
Code:
[FONT=Courier New][COLOR=#000000][COLOR=#007700]function [/COLOR][COLOR=#0000bb]show[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000bb]id[/COLOR][COLOR=#007700])
{
  [/COLOR][COLOR=#ff8000]// Wenn geöffnetes Menü geklickt...
  [/COLOR][COLOR=#007700]if([/COLOR][COLOR=#0000bb]show[/COLOR][COLOR=#007700]==[/COLOR][COLOR=#0000bb]currentshown[/COLOR][COLOR=#007700]) [COLOR=DarkOrchid][B]{[/B][/COLOR]
    [/COLOR][COLOR=#ff8000]//dann schließes es, ...
    [/COLOR][COLOR=#0000bb]document[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]getElementById[/COLOR][COLOR=#007700]([/COLOR][COLOR=#dd0000]'menu_'[/COLOR][COLOR=#007700]+[/COLOR][COLOR=#0000bb]currentshown[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]display[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]'none'[/COLOR][COLOR=#007700];
[/COLOR][/COLOR][/FONT][FONT=Courier New][COLOR=DarkOrchid]    // ...merke dir, dass nix mehr offen is ...
[B]    currentshown=[/B][B]'none';[/B][/COLOR][/FONT]
      [FONT=Courier New][COLOR=#000000][COLOR=#ff8000][COLOR=DarkOrchid]//... und mach sonst nix weiter[/COLOR][/COLOR][/COLOR][/FONT][FONT=Courier New][B][COLOR=DarkOrchid]
    return;[/COLOR][/B]
[/FONT] [FONT=Courier New][COLOR=#000000][COLOR=#007700]  [COLOR=DarkOrchid][B]}[/B][/COLOR]
  
  [/COLOR][COLOR=#ff8000]// Wenn ein Menü offen ist, ...
  [/COLOR][COLOR=#007700]if([/COLOR][COLOR=#0000bb]currentshown [/COLOR][COLOR=#007700]!= [/COLOR][COLOR=#dd0000]'none'[/COLOR][COLOR=#007700])
    [/COLOR][COLOR=#ff8000]// ... schließe das geöffnete
    [/COLOR][COLOR=#0000bb]document[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]getElementById[/COLOR][COLOR=#007700]([/COLOR][COLOR=#dd0000]'menu_'[/COLOR][COLOR=#007700]+[/COLOR][COLOR=#0000bb]currentshown[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]display[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]'none'[/COLOR][COLOR=#007700];

  [/COLOR][COLOR=#ff8000]// Öffne das gewünschte Menü
  [/COLOR][COLOR=#0000bb]document[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]getElementById[/COLOR][COLOR=#007700]([/COLOR][COLOR=#dd0000]'menu_'[/COLOR][COLOR=#007700]+[/COLOR][COLOR=#0000bb]id[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]display[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]'block'[/COLOR][COLOR=#007700];
  [/COLOR][COLOR=#ff8000]// Merke dir das neue geöffnete Menü
  [/COLOR][COLOR=#0000bb]currentshown[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#0000bb]id[/COLOR][COLOR=#007700];
}  [/COLOR][/COLOR][/FONT]
 
Im Moment schließt du es richtig, um es dann gleich wieder aufzumachen :biggrin:
Kannst du sonst keine Programmiersprache ? Dachte, du könntest PHP :think:

Doch, PHP ist aber im Vergleich zu javascript verdammt logisch aufgebaut^^;)

Denn mit der Version, die du mir grad geschickt hast, gehts leider auch nicht. (siehe online) :roll:

:(Kann mir niemand bei den beiden Ideen von theHacker helfen? :roll:
 
Zuletzt bearbeitet von einem Moderator:
theHacker's Version:
Code:
[FONT=Courier New][COLOR=#000000][COLOR=#007700]function [/COLOR][COLOR=#0000bb]show[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000bb]id[/COLOR][COLOR=#007700])
{
  [/COLOR][COLOR=#ff8000]// Wenn geöffnetes Menü geklickt...
  [/COLOR][COLOR=#007700]if([/COLOR][COLOR=#0000bb]show[/COLOR][COLOR=#007700]==[/COLOR][COLOR=#0000bb]currentshown[/COLOR][COLOR=#007700]) [COLOR=DarkOrchid][B]{[/B][/COLOR]
    [/COLOR][COLOR=#ff8000]//dann schließes es, ...
    [/COLOR][COLOR=#0000bb]document[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]getElementById[/COLOR][COLOR=#007700]([/COLOR][COLOR=#dd0000]'menu_'[/COLOR][COLOR=#007700]+[/COLOR][COLOR=#0000bb]currentshown[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]display[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]'none'[/COLOR][COLOR=#007700];
[/COLOR][/COLOR][/FONT][FONT=Courier New][COLOR=DarkOrchid]    // ...merke dir, dass nix mehr offen is ...
[B]    currentshown=[/B][B]'none';[/B][/COLOR][/FONT]
      [FONT=Courier New][COLOR=#000000][COLOR=#ff8000][COLOR=DarkOrchid]//... und mach sonst nix weiter[/COLOR][/COLOR][/COLOR][/FONT][FONT=Courier New][B][COLOR=DarkOrchid]
    return;[/COLOR][/B]
[/FONT] [FONT=Courier New][COLOR=#000000][COLOR=#007700]  [COLOR=DarkOrchid][B]}[/B][/COLOR]
  
  [/COLOR][COLOR=#ff8000]// Wenn ein Menü offen ist, ...
  [/COLOR][COLOR=#007700]if([/COLOR][COLOR=#0000bb]currentshown [/COLOR][COLOR=#007700]!= [/COLOR][COLOR=#dd0000]'none'[/COLOR][COLOR=#007700])
    [/COLOR][COLOR=#ff8000]// ... schließe das geöffnete
    [/COLOR][COLOR=#0000bb]document[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]getElementById[/COLOR][COLOR=#007700]([/COLOR][COLOR=#dd0000]'menu_'[/COLOR][COLOR=#007700]+[/COLOR][COLOR=#0000bb]currentshown[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]display[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]'none'[/COLOR][COLOR=#007700];

  [/COLOR][COLOR=#ff8000]// Öffne das gewünschte Menü
  [/COLOR][COLOR=#0000bb]document[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]getElementById[/COLOR][COLOR=#007700]([/COLOR][COLOR=#dd0000]'menu_'[/COLOR][COLOR=#007700]+[/COLOR][COLOR=#0000bb]id[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000bb]style[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]display[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]'block'[/COLOR][COLOR=#007700];
  [/COLOR][COLOR=#ff8000]// Merke dir das neue geöffnete Menü
  [/COLOR][COLOR=#0000bb]currentshown[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#0000bb]id[/COLOR][COLOR=#007700];
}  [/COLOR][/COLOR][/FONT]
Deine Version
Code:
<script type="text/javascript">
var currentshown = 'none';

function show(id) {
 // Wenn geöffnetes Menü geklickt... 
if(show==currentshown) { //dann schließes es, ... 
document.getElementById('menu_'+currentshown).style.display='none'; // ...merke dir, dass nix mehr offen is ... 
[B]currentshown='none'; //... und mach sonst nix weiter return; [/B]
} // Wenn ein Menü offen ist, ... 
if(currentshown != 'none') // ... schließe das geöffnete 
document.getElementById('menu_'+currentshown).style.display='none'; // Öffne das gewünschte Menü 
document.getElementById('menu_'+id).style.display='block'; // Merke dir das neue geöffnete Menü 
currentshown=id; }
</script>
.... und jetzt vergleiche
mfg

was soll eigentlich die var show... müsste die nich id heißen?
 
Zuletzt bearbeitet:
was soll eigentlich die var show... müsste die nich id heißen?


Genau, hab die jetzt mal mit id ausgetauscht und eine Leerzeile noch reingemacht und schon läuft es mit dem Schließen, danke! :D

Aber nun noch zum zweiten: Wie schaffe ich es, dass die Bilder alle angezeigt werden und das Javascript sie dann schließt. Also ich meine den Vorschlag hier von theHacker, denn der ist ja eigentlich perfekt, da ja auch Nicht-Javascript-Leute die Links dann sehen können:

Eine Alternative wäre, alle Links zu zeigen und dann mit JavaScript beim onLoad() alles auszublenden.


Danke für eure Hilfe, denn bei Javascript muss ich noch ne Menge lernen, das weiß ich....:roll:

https://www.zocko.de/menuetest2.php
 
Zuletzt bearbeitet:
Aber nun noch zum zweiten: Wie schaffe ich es, dass die Bilder alle angezeigt werden und das Javascript sie dann schließt. Also ich meine den Vorschlag hier von theHacker, denn der ist ja eigentlich perfekt, da ja auch Nicht-Javascript-Leute die Links dann sehen können:

indem du allen das attribut block anstatt none gibst und die dan via javascript alle auf none setzt...

ps: achja wegen dem doppelten style zuweissung ist bei mir im FF immer alles offen....
 
indem du allen das attribut block anstatt none gibst und die dan via javascript alle auf none setzt...

ps: achja wegen dem doppelten style zuweissung ist bei mir im FF immer alles offen....

Welche doppelten Style-Anweisungen?

So, hab jetzt alle auf "block", aber wie setze ich jetzt oben ein, dass er alle auf none setzt und dann eben das eine auf block wieder? Muss ich da für jedes Menü ein:

document.getElementById('menu_foo).style.display='none';
document.getElementById('menu_foobar).style.display='none';
...

machen und dann eben die andere Funktion oder geht das auch irgenwie automatisch mit einer Funktion?

Na, kann mir beim letzten Schritt noch jemand helfen? :roll:
 
Zuletzt bearbeitet von einem Moderator: