Forum

BartTheDevil89 · 06.07.2007, 16:57:47

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.

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

theHacker · 06.07.2007, 21:26:16

Vergiss JavaScript

z.B. http://www.cssplay.co.uk/menus/dd_valid.html

BartTheDevil89 · 06.07.2007, 22:30:13

Zitat:

Zitat von theHacker

Vergiss JavaScript

z.B. http://www.cssplay.co.uk/menus/dd_valid.html

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

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

Der passende Code ist das hier:

<script type="text/javascript">

</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-Code:

1:
2:
3:
4:
5:
6:
7:


		
			
<?

$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.

Hoffe ihr habt es verstanden, denn ist etwas kompliziert!

Zman · 06.07.2007, 22:50:00

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

theHacker · 06.07.2007, 22:57:58

Zitat:

Zitat von BartTheDevil89

Problem ist, dass ich es komplett untereinander habe muss.

Ich sagte "z.B."
Wie wärs mit dem: http://www.cssplay.co.uk/menus/slide_definition.html

Zitat:

Zitat von BartTheDevil89

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-Code:

1:

Der Rest funktioniert ja schon.

BartTheDevil89 · 06.07.2007, 23:58:22

Zitat:

Zitat von theHacker

Ich sagte "z.B."
Wie wärs mit dem: http://www.cssplay.co.uk/menus/slide_definition.html

Bei onLoad eben einmal show() für das betreffende Menü aufrufen.

HTML-Code:

1:

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.

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

<body onload="show(<?php echo $menue; ?>);">

Samy · 07.07.2007, 10:36:34

HTML-Code:

1:
2:
3:

#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:

Zitat:

Zitat von BartTheDevil89

Außerdem kommt das Menü mitten im ersten Menü und fügt sich nicht unten an, wie ja eigentlich gewollt.

^ der effekt is damit aber beseitigt

BartTheDevil89 · 07.07.2007, 10:52:05

Zitat:

Zitat von Samy

HTML-Code:

1:
2:
3:

#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?

theHacker · 07.07.2007, 14:29:01

Zitat:

Zitat von BartTheDevil89

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-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:


		
			
<?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" "http://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.

BartTheDevil89 · 09.07.2007, 14:51:26

Zitat:

Zitat von theHacker

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: http://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?

Astrodan · 09.07.2007, 15:07:24

Zitat:

Zitat von BartTheDevil89

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

BartTheDevil89 · 09.07.2007, 15:15:37

Zitat:

Zitat von Astrodan

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.

theHacker · 09.07.2007, 16:45:33

Zitat:

Zitat von BartTheDevil89

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

PHP-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:


		
			
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 ?

BartTheDevil89 · 09.07.2007, 17:01:10

Zitat:

Zitat von theHacker

Ich denke, das kriegst du doch wohl selber hin

PHP-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:


		
			
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.

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

PHP-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:


		
			
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*

theHacker · 09.07.2007, 18:08:17

Zitat:

Zitat von BartTheDevil89

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

Kannst du sonst keine Programmiersprache ? Dachte, du könntest PHP

Zitat:

Zitat von BartTheDevil89

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

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

Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:

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 ... currentshown='none'; //... und mach sonst nix weiter 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; }

06.07.2007, 16:57:47	#1 (permalink)
BartTheDevil89 Devilution Media ID: 87739 Lose senden Reg: 02.05.2006 Beiträge: 3.963	[HTML/Javascript] Ein Aufklapp-Menü erstellen, das bei allen Browsern läuft? 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. EDIT: Das ganze sollte mit Buttons, also Grafiken für die Links funktionieren. Rabatt-Gutscheine-Kostenlos.de - Rabattgutscheine für diverse Onlineshops. Immer kostenlos.. Grillmatten - Grillmatte.de zeigt dir alle Infos Geändert von BartTheDevil89 (06.07.2007 um 17:22:51 Uhr)

06.07.2007, 21:26:16	#2 (permalink)
theHacker sieht vor lauter Ads den Content nicht mehr ID: 69505 Lose senden Reg: 20.04.2006 Beiträge: 22.685	Vergiss JavaScript z.B. http://www.cssplay.co.uk/menus/dd_valid.html NEU theHacker.blog NEU – It's just a glitch in the Matrix – OpenIsles - das freie Insel-Aufbauspiel \| www.theHacker.ws v3 \| WhatPulse-Team

06.07.2007, 22:50:00	#4 (permalink)
Zman Erfahrener Benutzer Reg: 04.05.2006 Beiträge: 332	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 Kostenlose Banner- und Avatarerstellung Debian Lenny Nutzer \| XHTML/CSS Umsetzer \| Schweizer Studio für Neue Medien und Design

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[PHP/Javascript]Ausgabe über <script> läuft nicht richtig	BartTheDevil89	Programmierung	4	01.08.2008 19:17:19
[PHP/MYSQL]Menü in Baumstruktur erstellen...	BartTheDevil89	Programmierung	10	13.05.2008 16:47:21
[Javascript] Menü mit 2 verbundenen Dropdown-Menüs+kleines Problem	BartTheDevil89	Programmierung	3	16.03.2008 21:37:44
Flash Menü erstellen	ghost_writer	Lose4Graphics	4	18.06.2007 21:42:03
[HTML] Markiersperren, funtzen net in allen Browsern	Matthiasnet	Programmierung	17	20.08.2006 02:42:44

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)