[Erledigt] Menü ein - und ausklappen

abdullah · 03.02.2010, 19:55

hallo,
ich habe mich mit den ein - und ausklapbaren menüs tage lang beschäftigt und auch hier bzw. in den anderen foren oder google nichts passendes gefunden.

ich möchte nur mit css ( IE / FF / Opera ) gerecht ohne JS eine navigation haben, die wie folgt aussieht:

menü:
- eintrag 1
- eintrag 2
- eintrag 3

wenn man mit der maus auf eintrag 2 klickt sollen die unterpunkte angezeigt werden solange eintrag 1 oder eintrag 3 usw. angeklickt wird also bei eintrag 2.1 und eintrag 2.2 sollen auch unterpunkte von eintrag 2 zu sehen sein:

- eintrag 1
- eintrag 2
- eintrag 2.1
- eintrag 2.2
- eintrag 3

wenn aber jetzt auf eintrag 3 geklickt wird soll eintrag 2 mit den unterpunkten geschlossen werden und die unter punkte von eintrag 3 sich öffnen

- eintrag 1
- eintrag 2
- eintrag 3
- eintrag 3.1
- eintrag 3.2

ich habe mit visiblity: none; sowie visiblity: visible bzw. display: block und display: none versucht aber ohne erfolg

die menüs sind in einem div mit einer liste zu versehen:

Code:

<li><a href="index.php?site=jobs">Jobs</a></li>
<li><a href="index.php?site=anfahrt">Anfahrt</a>
<ul id="anfahrt" style="display: none;">
	<li><a href="index.php?site=anfahrt&id=karte">Anfahrtskarte</a></li>
	<li><a href="index.php?site=anfahrt&id=route">Routenplaner</a></li>
	<li><a href="index.php?site=anfahrtid=weg">Wegbeschreibung</a></li>
</ul>
</li>
<li><a href="index.php?site=anfahrt">Kontakt</a>
<ul id="anfahrt" style="display: none;">
	<li><a href="index.php?site=kontakt&id=form">formular</a></li>
</ul>
</li>

lg abdullah

psychedelic · 03.02.2010, 20:32

Navigation = <ul><li>usw.
Sichtbar:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.navi{
width:200px;
height:100px;
border:#666666 1px solid;
background: #CCCCCC;
display:none;
}
</style>
<script type="text/javascript">
function zeige(){
document.getElementById("element").style.display = "block";
}
</script>
</head>

<body>
<div id="element" class="navi"></div>
<button onclick="zeige()">ZeigeNavi</button>
</body>
</html>

Wo ist den jetzt genau das Problem ?
Fertig Coden wird dir das keiner

abdullah · 03.02.2010, 20:45

hi,
ich möchte keine meldungen bei IE bekommen wenn ich es mit JS lösen soll bzw. habe ich die vorgehensweise wie du es geschildert hast versucht.

ich möchte besonders auch mein script bei deaktiviertem js benutzen können

lg abdullah

nikosch · 03.02.2010, 20:50

Einen Klick kannst Du ohne Javascript überhaupt nicht auswerten. Es sei denn, Du löst alles über PHP, also pro Klick ein Request.

abdullah · 03.02.2010, 20:52

hi,
ich weiss jetzt nicht was du mit php meinst?

PS:
ich habe keine buttons sondern

Code:

<div id="content">
<div class="arrowlistmenu" style="float: left;">
<h3 class="headerbar">Haupt Navigation</h3>
<ul>
	<li><a href="index.php">Home</a></li>
	<li><a href="index.php?site=ueberuns">&Uuml;ber uns</a></li>
	<li><a href="index.php?site=modelle">Modelle</a>
	<ul id="modelle" style="display: none;">
		<li><a href="index.php?site=modelle&id=damen">Damen</a></li>
		<li><a href="index.php?site=modelle&id=herren">Herren</a></li>
	</ul>
	</li>
	<li><a href="index.php?site=ambiente">Ambiente</a></li>
	<li><a href="index.php?site=honorar">Honorar</a></li>
	<li><a href="index.php?site=jobs">Jobs</a></li>
	<li><a href="index.php?site=anfahrt">Anfahrt</a>
	<ul id="anfahrt" style="display: none;">
		<li><a href="index.php?site=anfahrt&id=karte">Anfahrtskarte</a></li>
		<li><a href="index.php?site=anfahrt&id=route">Routenplaner</a></li>
		<li><a href="index.php?site=anfahrt&id=weg">Wegbeschreibung</a></li>
	</ul>
	</li>
	<li><a href="index.php?site=kontakt">Kontakt</a></li>
	<li><a href="index.php?site=impressum">Impressum</a></li>
</ul>
</div>

die daten sind als dummy

nikosch · 03.02.2010, 20:53

Dann denk erstmal drüber nach. PHP heißt nicht Button.

abdullah · 03.02.2010, 21:16

hi,
habe das Problem mit php so gelöst:

PHP-Code:

  
<?php 

        switch($_GET["site"]) {

            case "anfahrt":

                echo '<li><a href="index.php?site=anfahrt">Anfahrt</a>

                        <ul id="anfahrt" style="display: block;">

                            <li><a href="index.php?site=anfahrt&id=karte">Anfahrtskarte</a></li>

                            <li><a href="index.php?site=anfahrt&id=route">Routenplaner</a></li>

                            <li><a href="index.php?site=anfahrt&id=weg">Wegbeschreibung</a></li>

                        </ul>

                        </li>';

                break;

            default:

                echo '<li><a href="index.php?site=anfahrt">Anfahrt</a></li>';

                break;

        }

    ?>

da anscheinend mit php einfacher geht, aber wie es mit JS oder CSS funktionieren sollte bleibt mir die frage offen, da durch ändern von display: none; auf display: block; und umgekehrt oder mit JS die aufgabe zu lösen bringt die benutzer ins schwierigkeiten wenn man beispielsweise nach deaktiviertem JS denkt..

na ja ... das problem ist gelösst

lg abdullah

KarlEgon · 04.02.2010, 10:46

Bei deaktiviertem JS sollte einfach das ganze Menü sichtbar sein. Sobald JS aktiviert ist, kannst du das Menü zusammenklappen und nur die entsprechenden Bereiche zeigen.
Wenn du kein Javascript benutzen willst, dann bleibt dir nichts anderes übrig als die Seite bei jedem Klick neu zu laden.

abdullah · 27.02.2010, 23:54

vielen dank leute, habe das problem schon gelösst wie oben beschrieben, was es mit Javascript oder mit css die Sache betrifft bin ich auch sehr zufrieden.

lg abdullah

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
Dropdown Menü mit SQL Datenbank	soulfly	PHP Tipps 2009	2	09.10.2009 15:13
Frage.: Dymanisches Datum im Drop Down Menü möglich?	badboygoofy	JavaScript, Ajax und mehr	1	24.07.2009 14:34
Aktives Menü ausgeklappt lassen	Black_Sheep	JavaScript, Ajax und mehr	12	14.03.2009 21:25
menu in einer xhtml seite	stripes	PHP Tipps 2009	31	04.01.2009 14:26
[Erledigt] Menü mit CSS und JavaScript	vollkommenegal	HTML, Usability und Barrierefreiheit	18	12.11.2008 13:50
horizontales Menü	Fritz73	Scriptbörse	9	26.05.2008 22:26
Menu navigation	marcels	PHP Tipps 2007	1	16.11.2005 18:47
wie gehts schöner/besser?	AliceD	HTML, Usability und Barrierefreiheit	1	06.09.2005 08:59
Menü Steuerung History !!!		PHP Tipps 2005-2	12	23.08.2005 11:51
Menü aus MySQL Datenbank ausgelesen		PHP Tipps 2005	9	02.06.2005 17:11
PHP Menu mit 2 untermenus		PHP Tipps 2005	3	23.05.2005 00:04
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24
html seite aus menü in php seite einbinden??		PHP Tipps 2004-2	4	21.12.2004 18:00
[Erledigt] drop down menü werte weitergeben		PHP Tipps 2004	3	24.08.2004 15:08
[Erledigt] PopDown Menü fast fertig!!		HTML, Usability und Barrierefreiheit	3	27.07.2004 00:11

03.02.2010, 19:55
abdullah Erfahrener Benutzer Registriert seit: 02.12.2009 Beiträge: 104 PHP-Kenntnisse: Anfänger	[Erledigt] Menü ein - und ausklappen hallo, ich habe mich mit den ein - und ausklapbaren menüs tage lang beschäftigt und auch hier bzw. in den anderen foren oder google nichts passendes gefunden. ich möchte nur mit css ( IE / FF / Opera ) gerecht ohne JS eine navigation haben, die wie folgt aussieht: menü: - eintrag 1 - eintrag 2 - eintrag 3 wenn man mit der maus auf eintrag 2 klickt sollen die unterpunkte angezeigt werden solange eintrag 1 oder eintrag 3 usw. angeklickt wird also bei eintrag 2.1 und eintrag 2.2 sollen auch unterpunkte von eintrag 2 zu sehen sein: - eintrag 1 - eintrag 2 - eintrag 2.1 - eintrag 2.2 - eintrag 3 wenn aber jetzt auf eintrag 3 geklickt wird soll eintrag 2 mit den unterpunkten geschlossen werden und die unter punkte von eintrag 3 sich öffnen - eintrag 1 - eintrag 2 - eintrag 3 - eintrag 3.1 - eintrag 3.2 ich habe mit visiblity: none; sowie visiblity: visible bzw. display: block und display: none versucht aber ohne erfolg die menüs sind in einem div mit einer liste zu versehen: Code: <li><a href="index.php?site=jobs">Jobs</a></li> <li><a href="index.php?site=anfahrt">Anfahrt</a> <ul id="anfahrt" style="display: none;"> <li><a href="index.php?site=anfahrt&id=karte">Anfahrtskarte</a></li> <li><a href="index.php?site=anfahrt&id=route">Routenplaner</a></li> <li><a href="index.php?site=anfahrtid=weg">Wegbeschreibung</a></li> </ul> </li> <li><a href="index.php?site=anfahrt">Kontakt</a> <ul id="anfahrt" style="display: none;"> <li><a href="index.php?site=kontakt&id=form">formular</a></li> </ul> </li> lg abdullah __________________ Jeder Code ist fehlerhaft! Wichtig ist dass man auf die Hinweise und Verbesserungsmöglichkeiten nicht den Rücken zu dreht!


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

03.02.2010, 20:45
abdullah Erfahrener Benutzer Registriert seit: 02.12.2009 Beiträge: 104 PHP-Kenntnisse: Anfänger	hi, ich möchte keine meldungen bei IE bekommen wenn ich es mit JS lösen soll bzw. habe ich die vorgehensweise wie du es geschildert hast versucht. ich möchte besonders auch mein script bei deaktiviertem js benutzen können lg abdullah __________________ Jeder Code ist fehlerhaft! Wichtig ist dass man auf die Hinweise und Verbesserungsmöglichkeiten nicht den Rücken zu dreht!

03.02.2010, 20:50
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Einen Klick kannst Du ohne Javascript überhaupt nicht auswerten. Es sei denn, Du löst alles über PHP, also pro Klick ein Request. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

03.02.2010, 20:53
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Dann denk erstmal drüber nach. PHP heißt nicht Button. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

03.02.2010, 21:16
abdullah Erfahrener Benutzer Registriert seit: 02.12.2009 Beiträge: 104 PHP-Kenntnisse: Anfänger	hi, habe das Problem mit php so gelöst: PHP-Code: <?php switch($_GET["site"]) { case "anfahrt": echo '<li><a href="index.php?site=anfahrt">Anfahrt</a> <ul id="anfahrt" style="display: block;"> <li><a href="index.php?site=anfahrt&id=karte">Anfahrtskarte</a></li> <li><a href="index.php?site=anfahrt&id=route">Routenplaner</a></li> <li><a href="index.php?site=anfahrt&id=weg">Wegbeschreibung</a></li> </ul> </li>'; break; default: echo '<li><a href="index.php?site=anfahrt">Anfahrt</a></li>'; break; } ?> da anscheinend mit php einfacher geht, aber wie es mit JS oder CSS funktionieren sollte bleibt mir die frage offen, da durch ändern von display: none; auf display: block; und umgekehrt oder mit JS die aufgabe zu lösen bringt die benutzer ins schwierigkeiten wenn man beispielsweise nach deaktiviertem JS denkt.. na ja ... das problem ist gelösst lg abdullah __________________ Jeder Code ist fehlerhaft! Wichtig ist dass man auf die Hinweise und Verbesserungsmöglichkeiten nicht den Rücken zu dreht!

04.02.2010, 10:46
KarlEgon Erfahrener Benutzer Registriert seit: 24.10.2008 Beiträge: 298 PHP-Kenntnisse: Fortgeschritten	Bei deaktiviertem JS sollte einfach das ganze Menü sichtbar sein. Sobald JS aktiviert ist, kannst du das Menü zusammenklappen und nur die entsprechenden Bereiche zeigen. Wenn du kein Javascript benutzen willst, dann bleibt dir nichts anderes übrig als die Seite bei jedem Klick neu zu laden.

27.02.2010, 23:54
abdullah Erfahrener Benutzer Registriert seit: 02.12.2009 Beiträge: 104 PHP-Kenntnisse: Anfänger	vielen dank leute, habe das problem schon gelösst wie oben beschrieben, was es mit Javascript oder mit css die Sache betrifft bin ich auch sehr zufrieden. lg abdullah __________________ Jeder Code ist fehlerhaft! Wichtig ist dass man auf die Hinweise und Verbesserungsmöglichkeiten nicht den Rücken zu dreht!