JavaScript-Menü (mit Layern?)

DutziMan · 16.06.2004, 15:32

Hallo!

Für dieses Design möchte ich ein Menü machen.
Man klickt auf einen der Menüpunkte (schon vorhanden) und unter den beiden mittleren Menüpunkten
öffnet sich dann das Menü mit z. B. sechs Menüpunkten.

Tabellen dafür zu nutzen, ist nicht möglich, das sie das Layout zerreißen würden.
Also was gibt es für alternativen? Layer?

Ashergul · 16.06.2004, 15:57

hmm wie wärs mit divs die mit der css-eigenschaft "display" entsprechend anpasst?

im ürbigens finde ich das design nicht so toll, ich fahr mit einer relativ hohen aulösen (1400 x 1050) und muss scrollen...

DutziMan · 16.06.2004, 20:50

Naja, es geht ja jetzt um's Menü

An DIVs habe ich auch schon gedacht.
Aber drückt ein z. B. 150 Pixel hoher DIV nicht alles darunter um 150 Pixel nach unten?
Oder wird er einfach drauf gelegt?

Das ist nämlich dass, worauf es mir ankommt.

DutziMan · 16.06.2004, 21:59

So, ich habe mir jetzt ein JavaScript geschrieben, dass die passenden Menüs einblendet.
Ist ein Menü geöffnet und man klickt auf ein anderes, kommt das Alte weg und das Neue kommt.
Klickt man auf ein geöffnetes Menü, wird es geschlossen

Code:

<!--
	var visible      = false;
	var visible_menu = '';
	
	function menu(menuid)
	{
		if ( visible && ( visible_menu == menuid ) )
		{
			hide(menuid);
		}
		else
		{
			if ( visible )
			{
				hide(visible_menu);
			}
			
			show(menuid);
		}
	}
	
	function show(menuid)
	{
		document.getElementById(menuid).style = 'visibility: visible';
		
		visible      = true;
		visible_menu = menuid;
	}
	
	function hide(menuid)
	{
		document.getElementById(menuid).style = 'visibility: hidden';
		
		visible      = false;
		visible_menu = '';
	}
//-->

So, das habe ich jetzt mal mit zwei DIVs und zwei Buttons ausprobiert.
Aber jeder DIV blockiert eine Zeile.
Wie entferne ich diesen Effekt?

DutziMan · 16.06.2004, 22:03

Hatte bis gerade eben

Code:

visibility: [hidden] [visible];

Jetzt habe ich

Code:

display: [none] [table];

Jetzt ist es genau, wie ich es mir vorstelle.
Aber was ist die display-Eigenschaft table?

Göke · 16.06.2004, 22:04

CSS, DIV und Java-Script käme bei Deinem Vorschlag wohl zum Einsatz. Es gibt da bereits ganz egschickte Lösungen für... kram Dich am Besten mal bei Dr. Web durch - die hatten letztens erst einen hervorrgenden Artikel darüber!

:P

DutziMan · 16.06.2004, 22:27

Zitat:

Zitat von Göke

CSS, DIV und Java-Script käme bei Deinem Vorschlag wohl zum Einsatz. Es gibt da bereits ganz egschickte Lösungen für... kram Dich am Besten mal bei Dr. Web durch - die hatten letztens erst einen hervorrgenden Artikel darüber!

:P

Danke, das werde ich morgen mal machen, im Moment funktioniert's ja auch so

Nur halt dann ins Design eingebaut, wieß ich halt nicht wie's aussieht.

BtW wird das jetzt mittels ModRewrite geregelt, dass die einzelnen Topics und Foren jetzt über topic123 und forum123 angesprochen werden?
Dient das ganze der Suchmaschinenkompatibilität (Scheißwort

)?

Göke · 16.06.2004, 23:11

Jup,

die Umstellung wurde bzgl. des Apache-Servers mittels mod_rewrite für die Suchmaschinenoptimierung realisiert :wink:

Dr. Web hat echt gute Tipps und Links - lohnenswert - sehenswert!

:P

DutziMan · 16.06.2004, 23:22

Code:

position: absolute;
left: 13;
top: 13;
width: 123;
height: 123;
visibility: [hidden] [visible];

Und es wird einfach draufgelegt

// Edit:
So jetzt funktioniert alles wie es soll

DutziMan · 17.06.2004, 08:18

http://www.world-of-dutziman.de/dun-modan/layout.html

Wenn man auf die Navigation klickt, kommt der DIV-Layer

Danke schön!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
Lange Verarbeitungszeiten - Zuviel JavaScript?	[-UFO-]Melkor	HTML, Usability und Barrierefreiheit	2	15.06.2007 23:54
http user mit Javascript abfrage	tennessee	HTML, Usability und Barrierefreiheit	3	31.10.2006 13:18
Unsichtbares Formularfeld mit Javascript ansprechen	mAy^daY	HTML, Usability und Barrierefreiheit	6	13.08.2006 21:25
PHP + Javascript + MYSQL	socke	PHP Tipps 2006	4	02.04.2006 22:02
Variable wird geändert bei Übergabe an Javascript		PHP Tipps 2007	4	17.12.2005 16:53
Javascript durch PHP ausdrücken		PHP Tipps 2007	10	09.11.2005 20:04
2 javascript fragen	Rotti	HTML, Usability und Barrierefreiheit	4	03.08.2005 11:40
[Erledigt] Mouseover Menü in Javascript und PHP Lösung ?		PHP Tipps 2005-2	4	20.07.2005 08:48
Php soll Javascript beschleunigen		PHP Tipps 2005	4	17.04.2005 12:56
Javascript ON/OFF	Connar	PHP Tipps 2005	3	03.04.2005 09:47
[Erledigt] JavaScript +mehrereFenster		HTML, Usability und Barrierefreiheit	5	03.02.2005 15:08
JavaScript in JavaScript geschriebene Html-Datei einbinden.	woods	HTML, Usability und Barrierefreiheit	6	06.09.2004 18:33
Javascript		HTML, Usability und Barrierefreiheit	5	31.08.2004 18:30
php + Javascript, Variablenübergabe		PHP Tipps 2004	14	28.07.2004 15:42

16.06.2004, 15:32
DutziMan Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 529	JavaScript-Menü (mit Layern?) Hallo! Für dieses Design möchte ich ein Menü machen. Man klickt auf einen der Menüpunkte (schon vorhanden) und unter den beiden mittleren Menüpunkten öffnet sich dann das Menü mit z. B. sechs Menüpunkten. Tabellen dafür zu nutzen, ist nicht möglich, das sie das Layout zerreißen würden. Also was gibt es für alternativen? Layer?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.06.2004, 15:57
Ashergul Erfahrener Benutzer Registriert seit: 24.08.2003 Beiträge: 714	hmm wie wärs mit divs die mit der css-eigenschaft "display" entsprechend anpasst? im ürbigens finde ich das design nicht so toll, ich fahr mit einer relativ hohen aulösen (1400 x 1050) und muss scrollen... __________________ mfg Floh Programmers don't die, they GOSUB without RETURN

16.06.2004, 20:50
DutziMan Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 529	Naja, es geht ja jetzt um's Menü An DIVs habe ich auch schon gedacht. Aber drückt ein z. B. 150 Pixel hoher DIV nicht alles darunter um 150 Pixel nach unten? Oder wird er einfach drauf gelegt? Das ist nämlich dass, worauf es mir ankommt.

16.06.2004, 21:59
DutziMan Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 529	So, ich habe mir jetzt ein JavaScript geschrieben, dass die passenden Menüs einblendet. Ist ein Menü geöffnet und man klickt auf ein anderes, kommt das Alte weg und das Neue kommt. Klickt man auf ein geöffnetes Menü, wird es geschlossen Code: <!-- var visible = false; var visible_menu = ''; function menu(menuid) { if ( visible && ( visible_menu == menuid ) ) { hide(menuid); } else { if ( visible ) { hide(visible_menu); } show(menuid); } } function show(menuid) { document.getElementById(menuid).style = 'visibility: visible'; visible = true; visible_menu = menuid; } function hide(menuid) { document.getElementById(menuid).style = 'visibility: hidden'; visible = false; visible_menu = ''; } //--> So, das habe ich jetzt mal mit zwei DIVs und zwei Buttons ausprobiert. Aber jeder DIV blockiert eine Zeile. Wie entferne ich diesen Effekt?

16.06.2004, 22:03
DutziMan Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 529	Hatte bis gerade eben Code: visibility: [hidden] [visible]; Jetzt habe ich Code: display: [none] [table]; Jetzt ist es genau, wie ich es mir vorstelle. Aber was ist die display-Eigenschaft table?

16.06.2004, 22:04
Göke Erfahrener Benutzer Registriert seit: 14.04.2003 Beiträge: 697	CSS, DIV und Java-Script käme bei Deinem Vorschlag wohl zum Einsatz. Es gibt da bereits ganz egschickte Lösungen für... kram Dich am Besten mal bei Dr. Web durch - die hatten letztens erst einen hervorrgenden Artikel darüber! :P __________________ Bewerben war gestern – heute wirst Du gefunden!

16.06.2004, 23:11
Göke Erfahrener Benutzer Registriert seit: 14.04.2003 Beiträge: 697	Jup, die Umstellung wurde bzgl. des Apache-Servers mittels mod_rewrite für die Suchmaschinenoptimierung realisiert :wink: Dr. Web hat echt gute Tipps und Links - lohnenswert - sehenswert! :P __________________ Bewerben war gestern – heute wirst Du gefunden!

16.06.2004, 23:22
DutziMan Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 529	Code: position: absolute; left: 13; top: 13; width: 123; height: 123; visibility: [hidden] [visible]; Und es wird einfach draufgelegt // Edit: So jetzt funktioniert alles wie es soll

17.06.2004, 08:18
DutziMan Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 529	http://www.world-of-dutziman.de/dun-modan/layout.html Wenn man auf die Navigation klickt, kommt der DIV-Layer Danke schön!