zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css menü ein und ausklappen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.02.2010, 21:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2009
Beiträge: 4
cakalman befindet sich auf einem aufstrebenden Ast
Standard css menü ein und ausklappen

hallo,
ich habe in vielen foren und einer lösung unter google ohne erfolgt gesucht um eine vertikale navigation zu erstellen, die wie folgt aussieht:

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


meine bisherigen dummy daten sind :

HTML-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>
und die css:
Code:
.arrowlistmenu {
	width: 180px; /*width of menu*/
}

.arrowlistmenu .headerbar {
	font: bold 14px Arial;
	color: white;
	background: black url(../media/titlebar.png) repeat-x center left;
	margin-bottom: 0px;
	margin: 0px;
	/*bottom spacing between header and rest of content*/
	text-transform: uppercase;
	padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-bottom: 0px;
	/*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li {
	padding-bottom: 0px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a {
	color: #A70303;
	background: url(../media/arrowbullet.png) no-repeat center left;
	/*custom bullet list image*/
	display: block;
	padding: 0px 0;
	padding-left: 19px; /*link text is indented 19px*/
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #dadada;
	font-size: 90%;
}

.arrowlistmenu ul li a:visited {
	color: #A70303;
}

.arrowlistmenu ul li a:hover { /*hover state CSS*/
	color: #A70303;
	background-color: #F3F3F3;
}

/* Second Level of Menu */
.arrowlistmenu ul ul li a:hover {
	color: black;
	background-color: #F3F3F3;
}

.arrowlistmenu ul ul li a:visited {
	color: #A70303;
	background-color: #F3F3F3;
}

.arrowlistmenu ul ul li {
	margin-left: 15px;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.02.2010, 21:31
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Gut ich nehm dir jetzt den Wind aus den Segeln: das was du vorhast ist nicht ohne JS oder dem Neuladen der Navigation möglich!
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.02.2010, 21:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2009
Beiträge: 4
cakalman befindet sich auf einem aufstrebenden Ast
Standard

hi,
wenn ich JS verwenden soll wie mache ich es denn? gibt es keinen problem bei IE und FF sowie OP Brwosern ?

und was ist wenn JS deaktiviert ist?

kenne mich mit JS nicht so gut aus sowie mit CSS

vielen dank
Mit Zitat antworten
  #4 (permalink)  
Alt 03.02.2010, 21:42
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von cakalman Beitrag anzeigen
hi,
wenn ich JS verwenden soll wie mache ich es denn? gibt es keinen problem bei IE und FF sowie OP Brwosern ?
im Grunde nicht, empfehle sehr jQuery für soetwas

Zitat:
Zitat von cakalman Beitrag anzeigen
und was ist wenn JS deaktiviert ist?
2 Möglichkeiten:
1) Schande über die die kein JS aktiviert haben
2) Schreibe das Menü so, das wenn kein js da ist das menü komplett ausgeklappt ist.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #5 (permalink)  
Alt 03.02.2010, 21:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2009
Beiträge: 4
cakalman befindet sich auf einem aufstrebenden Ast
Standard

ich habe das menü momentan so dass die untermenüs ausgeklappt sind und gerade möchte ich diese ja ändern

was den jQuery betrifft:
habe einiges darüber gelesen aber wie ich und von wo ich herunterlade und einrichte um es zu nutzen keine ahnung, wenn du es sagst mit jQuery gibt es keine probleme für das was ich erreichen möchte...

lg cakalman
Mit Zitat antworten
  #6 (permalink)  
Alt 03.02.2010, 21:58
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

binde einfach mal ans ende deines HTML Dokuments das folgende ein:
HTML-Code:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.1");</script>
und schau dir dann mal hier die Basics an: Tutorials - jQuery JavaScript Library

anschließend hast du schonmal jquery.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #7 (permalink)  
Alt 03.02.2010, 22:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2009
Beiträge: 4
cakalman befindet sich auf einem aufstrebenden Ast
Standard

das problem habe ich mit php gelösst jedoch bleibt mir das lösen mit CSS, JS oder jQuery offen....

und um die zu schließen würde ich gerne einen ansatz haben wollen, aber wenn es mit php geht, was ich letzt endlich geschafft habe ist es auch keine frage mehr...

lg abdullah
Mit Zitat antworten
  #8 (permalink)  
Alt 03.02.2010, 22:28
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

dadurch wird die navigation aber vollständig neugeladen nicht wahr?

Der Lösungsansatz für Javascript ist: du gibst dem Aktivierten Element beim anklicken eine Neue Klasse die das Menüanzeigt, solltest du nun auf einen neuen Punkt klicken so soll der alte "zugemacht" werden und der neue soll aufgeklappt werden.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #9 (permalink)  
Alt 03.02.2010, 23:39
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von cakalman Beitrag anzeigen
wenn man mit der maus auf eintrag 2 klickt sollen die unterpunkte angezeigt werden
Sonst soll nichts passieren? Eigentlich sollte doch dann auch die dazugehörige Seite erscheinen (das ist schließlich der Sinn des Klickens auf einen Menüpunkt), und die hat ihren eigenen HTML-Code, der dann auch die gewünschten Unterpunkte hat.

Oder der Menü-Code bleibt immer gleich und Du bestimmst per body-ID/Klasse, auf welcher Seite welche Subnavigationen angezeigt werden und welche nicht. Für eine JS-Lösung sehe ich absolut keinen Grund.

Den Sinn, per Klick ausschließlich Unterpunkte, aber keine neue Seite erscheinen zu lassen, sehe ich nicht. Dann lieber per :hover ein Dropdown-Menü (wobei das nervig ist, wenn es die übrigen Punkte nach unten schiebt, wie Du es evtl. vorhast).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (03.02.2010 um 23:42 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe bei CSS Menue gesucht CSS_Beginner CSS 2 21.09.2009 18:03
Problem mit CSS Dropline menü horst77 CSS 1 12.08.2009 12:49
herunterfahrendes Menü mit CSS Pablo CSS 1 27.12.2007 18:07
CSS Menü - Buttonfrage Ralgar CSS 6 01.12.2006 18:14
Menü mit CSS aber mit JS Animation? xy2er CSS 6 20.03.2005 21:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:05 Uhr.