Problem: 2-Stufige CSS Navigation soll sich bei Klick öffnen und nicht bei Mouse-over

jilli · 14. Apr. 2011

Hallo,

ich habe mit CSS ein zweistufige Navigation erstellt - die soweit auch funktioniert. Ich möchte aber, dass sich die zweite Ebene erst beim Klick auf die Hauptrubrik (1. Ebene) öffnet.
Ich möchte dann Inhalte zur Hauptrubrik platzieren und parallel soll sich die 2. Ebene öffnen.

Momentan öffnet sich die 2. Ebene bei Mouse-over, wenn ich mit dem Cursor unter dem Rubriknamen der 1. Ebene bin. Was ich auch sehr benutzerunfreundlich finde.

Wo liegt mein Fehler bzw. was muss ich ändern?

zur WebSite

CSS: nav.css

Code:

#nav { 
	clear:both;
	font-family: arial;
	color: #8b8c91;
	text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9em;
	line-height: 35px;
	width:220px;
    float:left;
	text-indent:30px;
	}
	
#nav div { 
    background-color: #bde0f4;
	width: 220px; 
	border-bottom:1px solid #8b8c91;
	
    }
	
#nav div div { 
    width: 220px;
	border-bottom:none;
	display:none;
	text-transform: none;
	line-height: 20px;
	}
	
#nav div:hover div {display:block;}	
	
	
#nav a { 
    font-weight:bold;
	color: #797979;
	white-space:nowrap;
	display:block;
    text-decoration:none;
	padding: 1px 0px 1px 5px; 
   	}
	
#nav a.m_act {background-color:#aec8a5}

#nav a:hover { background-color: #d5ecfa;}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Pflege- & Therapiezentrum Volpp in Darmstadts | Langzeitpflege, Kurzzeitpflege, Fachpflege Demenz</title>
<link rel=stylesheet type="text/css" href="style.css">
<link rel=stylesheet type="text/css" href="nav.css">
<link rel=stylesheet type="text/css" href="nav2.css">

</head>

<body>
<div id="rahmen">
	<div id="header">
	<div id="logo"><img src="images/logo.gif" width="211" height="230"></div>
	<div id="foto"><img src="images/header_home.jpg" alt="" width="575" height="250" border="0"></div>
	</div>

	<div id="trenner">
		<ul id="nav2">
		<li><a href="index.htm" title="zur Startseite">Home |</a></li>
		<li><a href="kontk.htm">Kontakt |</a></li>
		<li><a href="impressum.htm">Impressum</a></li>
		</ul>
	</div>
<div class="clear abstand"></div>


<div id="nav">
  <div><A href="">Philosophie</A></div>
   		<div>
    		<div><a href="credo.htm">Unternehmenscredo</a></div>
    		<div><a href="entwicklung.htm">Entwicklung</a></div>
  		</div>
  
  <div>Unser Haus</div>
   		<div>
    		<div><a href="zimmer.htm">Zimmer</a></div>
            <div><a href="gemeinschaftsraeume.htm">Gemeinschaftsräume</a></div>
            <div><a href="speisen.htm">Speisenangebot</a></div>
            <div><a href="service.htm">Service</a></div>
            <div><a href="kosten.htm">Kosten</a></div>
  		</div>
  
  
  <div><A href="">Unser Team</A></div>
  		<div>
    		<div><a href="leitung.htm">Leitung</a></div>
            <div><a href="verwaltung.htm">Verwaltung</a></div>
            <div><a href="pflege.htm">Pflege & Betreuung</a></div>
            <div><a href="therapie.htm">Therapeutisches Arbeiten</a></div>
            <div><a href="hauswirtschaft.htm">Hauswirtschaft</a></div>
             <div><a href="hausmeister.htm">Hausmeister</a></div>
  		</div>
  
  
  <div><A href="">Ambulante Pflege</A></div>
  		<div>
  				<div><a href="a_leistungen.htm">Leistungen</a></div>
                <div><a href="mitarbeiter.htm">Mitarbeiter </a></div>
                <div><a href="pflegemodell.htm">Pflegemodell</a></div>
        </div>
  
  <div><A href="">Pflege & Betreuung</A></div>
  		<div>
               <div><a href="kurzzeit.htm">Kurzeitpflege</a></div>
               <div><a href="langzeit.htm">Langzeitpflege</a></div>
               <div><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="demenz.htm">Pflege Demenz</a></div>
               <div><a href="frueh.htm">Pflege ab dem 40. Lebensjahr</a></div>
        </div>
  
  
  <div><A href="">Betreutes Wohnen</A></div>
  		 <div>
                <div><a href="bw_leistungen.htm">Leistungen</a></div>
                <div><a href="wohnanlage.htm">Wohnanlage</a></div>
                <div><a href="bw_kosten.htm">Kosten</a></div>
             </div>
             
             
  <div><A href="">Soziale Arbeit</A></div>
  		<div>
               <div><a href="aktivitaeten.htm">Aktivitäten</a></div>
               <div><a href="veranstaltungen.htm">Veranstaltungen</a></div>
        </div>
 
 
 
 
</div>


	<div id="rechts">
	hallo<br />
	</div>  

	<div id="content">
   <p>
	Herzlich Willkommen im Pflege & Therapie-Zentrum Volpp.
    </p>
    Wir und unser Team freuen uns, Sie auf unserer Internetseite begrüßen und willkommen heißen zu dürfen.
    Genießen Sie die persönliche, freundliche und familiäre Atmosphäre unserer kleinen, gemütlichen Einrichtung mitten im Zentrum von Darmstadt.
    Wir wünschen allen unseren Bewohnern einen angenehmen Aufenthalt und freuen uns darauf, Ihr persönlicher Gastgeber zu sein.
    </p>
    <p>
    Ihre Familie Volpp

	</p>
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

</div>

</body>
</html>

Vielen Dank vorab - JILLI

kkapsner · 14. Apr. 2011

Dein HTML ist für deine Zwecke nicht geeignet.

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#menu li {
	display: block;
}
#menu li ul {
	display: none;
}
#menu li:hover ul, #menu li.active ul {
	display: block;
}
</style>
</head>
<body>
<ul id="menu">
	<li>erstes
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</li>
	<li>zweites
		<ul>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</li>
	<li class="active">drittes ist aktiv
		<ul>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</li>
</ul>
</body>
</html>

jilli · 15. Apr. 2011

Hallo kkapsner,

vielen Dank für Deine Antwort. Ich konnte Deinen Code schon zum Teil richtig umsetzen, leider aber nur zum Teil.

Folgende Fragen/Fehler habe ich noch:
1. Warum ist meine Navigation nach rechts eingerückt? Ich möchte das die border-bottom links bündig anschließt und die Navigation soll in dem linken hellblauen Bereich platziert werden.

2. Warum sind die Unterebenen bereits offen? ich möchte, dass sich die 2. Ebene erst nach Klick auf die 1. Ebene öffnet.

zur WerbSite

CSS:

Code:

#nav { 
	clear:both;
	font-family: arial;
	color: #8b8c91;
	font-weight: bold;
    font-size: 0.9em;
	line-height: 25px;
	width:220px;
    float:left;
	list-style: none;
	}


#menu li {
	float:left;
	list-style: none;
	background-color: #bde0f4;
	width: 200px; 
	border-bottom:1px solid #8b8c91;
	margin: 0;
	padding: 0;
}


#menu li ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	
}
#menu li:hover ul, #menu li.active ul {
	display: block;
	background-color: #d5ecfa;
	margin: 0;
	padding: 0;
}

HTML

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Pflege- & Therapiezentrum Volpp in Darmstadts | Langzeitpflege, Kurzzeitpflege, Fachpflege Demenz</title>
<link rel=stylesheet type="text/css" href="style.css">
<link rel=stylesheet type="text/css" href="nav_neu.css">
<link rel=stylesheet type="text/css" href="nav2.css">

</head>



<body>
<div id="rahmen">
	<div id="header">
	<div id="logo"><img src="images/logo.gif" width="211" height="230"></div>
	<div id="foto"><img src="images/header_home.jpg" alt="" width="575" height="250" border="0"></div>
	</div>

	<div id="trenner">
		<ul id="nav2">
		<li><a href="index.htm" title="zur Startseite">Home |</a></li>
		<li><a href="kontk.htm">Kontakt |</a></li>
		<li><a href="impressum.htm">Impressum</a></li>
		</ul>
	</div>
<div class="clear abstand"></div>

<div id="nav">
<ul id="menu">
	<li><A href="">Philosophie</A>
		<ul>
			<li><a href="credo.htm">Unternehmenscredo</a></li>
    		<li><a href="entwicklung.htm">Entwicklung</a></li>
		</ul>
	</li>
    
    
	<li>Unser Haus
		<ul>
			<li><a href="zimmer.htm">Zimmer</a></li>
            <li><a href="gemeinschaftsraeume.htm">Gemeinschaftsräume</a></li>
            <li><a href="speisen.htm">Speisenangebot</a></li>
            <li><a href="service.htm">Service</a></li>
            <li><a href="kosten.htm">Kosten</a></li>
		</ul>
	</li>
    
    
	<li class="active">Unser Team
		<ul>
			<li><a href="leitung.htm">Leitung</a></li>
            <li><a href="verwaltung.htm">Verwaltung</a></li>
            <li><a href="pflege.htm">Pflege & Betreuung</a></li>
            <li><a href="therapie.htm">Therapeutisches Arbeiten</a></li>
            <li><a href="hauswirtschaft.htm">Hauswirtschaft</a></li>
             <li><a href="hausmeister.htm">Hausmeister</a></li>
		</ul>
	</li>
    
    <li class="active">Ambulante Pflege
		<ul>
			<li><a href="a_leistungen.htm">Leistungen</a></li>
                <li><a href="mitarbeiter.htm">Mitarbeiter </a></li>
                <li><a href="pflegemodell.htm">Pflegemodell</a></li>
		</ul>
	</li>
    
    
    <li class="active">Pflege & Betreuung
		<ul>
			 <li><a href="kurzzeit.htm">Kurzeitpflege</a></li>
               <li><a href="langzeit.htm">Langzeitpflege</a></li>
               <li><img src="images/arrow2.gif" width="14" height="9" alt=""><a href="demenz.htm">Pflege Demenz</a></li>
               <li><a href="frueh.htm">Pflege ab dem 40. Lebensjahr</a></li>
               <li><a href="arzt.htm">Ärztliche Betreuung & mehr</a></li>
		</ul>
	</li>
    
    <li class="active">Betreutes Wohnen
		<ul>
				<li><a href="bw_leistungen.htm">Leistungen</a></li>
            	 <li><a href="wohnanlage.htm">Wohnanlage</a></li>
                <li><a href="bw_kosten.htm">Kosten</a></li>
		</ul>
	</li>
    
     <li class="active">Soziale Arbeit
		<ul>
				<li><a href="aktivitaeten.htm">Aktivitäten</a></li>
             <li><a href="veranstaltungen.htm">Veranstaltungen</a></li>
		</ul>
	</li>
</ul>
 </div>      


	<div id="rechts">
	hallo<br />
	</div>  

	<div id="content">
   <p>
	Herzlich Willkommen im Pflege & Therapie-Zentrum Volpp.
    </p>
    Wir und unser Team freuen uns, Sie auf unserer Internetseite begrüßen und willkommen heißen zu dürfen.
    Genießen Sie die persönliche, freundliche und familiäre Atmosphäre unserer kleinen, gemütlichen Einrichtung mitten im Zentrum von Darmstadt.
    Wir wünschen allen unseren Bewohnern einen angenehmen Aufenthalt und freuen uns darauf, Ihr persönlicher Gastgeber zu sein.
    </p>
    <p>
    Ihre Familie Volpp

	</p>
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

</div>

</body>
</html>

Ich würde mich riesig freuen, wenn ich noch Tipps von Dir / Euch bekomme.

Vielen Dank - Jilli

Dormilich · 15. Apr. 2011

jilli schrieb:
2. Warum sind die Unterebenen bereits offen? ich möchte, dass sich die 2. Ebene erst nach Klick auf die 1. Ebene öffnet.

weil #menu li.active ul eine höhere Priorität hat als #menu li ul. oder anders ausgedrückt, weil überall die CSS-Klasse "active" drin steht.

jilli · 15. Apr. 2011

Hallo Dormilich,

wie muss ich das CSS jetzt anpassen, dass die 2. Ebene erst bei Klick aufgeht?

Vielen Dank vorab - JILLI

Dormilich · 15. Apr. 2011

class="active" weglassen. ich hab zwar keine Ahnung, wie dann die Aktivierung funktionieren soll

active wirkt nur, wenn die Maustaste gedrückt ist), aber kkapsner wird schon wissen, wie’s weitergehen soll.

(also mit JS wüßte ich auch was)

anna55 · 15. Apr. 2011

Aus der CSS-Navi ist jetzt wohl ne JS-Navi geworden. Warum eigentlich?

Warum hast du dir nicht bei Stu Nicholls was rausgesucht?
http://www.cssplay.co.uk/menus/cssplay-click-vertical-concertina.html

Dormilich · 15. Apr. 2011

schick, das muß ich mir merken.

kkapsner · 17. Apr. 2011

Ich hatte da irgendwie was falsch verstanden - dachte, dass man auf eine neue Seite kommt, wenn man auf den Menüpunkt klickt. Da hätte man dann in dem neuen HTML einfach das .active setzen können.
Wenn man nicht weitergeleitet wird, würde ich mit JS arbeiten, damit man auf onclick reagieren kann (der Code von Stu Nicholls funktioniert (wie erwartet) nicht im IE7 - weder :focus noch :hover. IE6 hab' ich jetzt nicht getestet).

@jilli: BITTE schmeiß dieses JS weg! Das ist ja nicht auszuhalten: Menü wird nur von JS erzeugt (alle, die JS deaktiviert haben, werden deine Seite sofort verlassen), ganz schlimme <table>-Suppe (ganz fiese Mischung aus <table>-Layout und <div>-Suppe) und dann auch noch eine üble ID-Verwaltung... schlimm!

anna55 · 17. Apr. 2011

kkapsner schrieb:
..der Code von Stu Nicholls funktioniert (wie erwartet) nicht im IE7 - weder :focus noch :hover.

Nun, er funktioniert schon, weil Stu für den IE ein htc-File eingebaut hat. Er weist auf der Seite darauf hin.

kkapsner · 18. Apr. 2011

Also in meinem IE9 als 7er funktioniert das Menü nicht...

djheke · 19. Apr. 2011

Hallo,
ist vielleicht nicht ganz das was du willst aber einfacher und ohne JS

http://www.gipspferd.de/css/anleitung/a6/a6.php

mfg
henry

Problem: 2-Stufige CSS Navigation soll sich bei Klick öffnen und nicht bei Mouse-over

jilli

New member

kkapsner

Super Moderator

jilli

New member

Dormilich

New member

jilli

New member

Dormilich

New member

anna55

Moderator

Dormilich

New member

kkapsner

Super Moderator

anna55

Moderator

kkapsner

Super Moderator

djheke

New member