✔ Aufklappbare Menüs

[lisa5]

Hallo,
derzeit bin ich dabei, ein Menü für meine Homepage zu erstellen, ich kenne mich leider noch nicht so gut mit CSS aus. Am besten sollte diese vertikal aufklappbar sein, sodass Seite 1.1, Seite 1.2, usw. nur angezeigt werden, wenn man auf Rubrik 1 klickt. Allerdings weiß ich nicht, wie ich dies am besten umsetzen kann und die Informationen im Internet darüber haben mir auch nur wenig weitergeholfen, da ich noch nicht so viel CSS-Kenntnisse habe. Ich würde mich freuen, wenn ihr mir bitte weiterhelfen könntet. Vielen Dank.
Viele Grüße
Lisa

<div id="sitemap">
<ul>
<li><a class="home" href="#" title="zur Startseite">Home</a>
	<ul>
	<li><a class="rubrik" href="#">Rubrik 1</a>
		<ul>
		<li><a href="#">Seite 1.1</a></li>
		<li><a href="#">Seite 1.2</a></li>
		</ul>
	</li>	
	<li><a class="rubrik" href="#">Rubrik 2</a>
		<ul>
		<li><a href="#">Seite 2.1</a></li>
		<li><a href="#">Seite 2.2</a></li>
		</ul>
	</li>
</li>
</ul>
</div>

#sitemap {
width: 200px;
margin: 0 0 0 0;
}

#sitemap ul {
list-style-type: none;
}

#sitemap ul li a {
display: block;
text-decoration: none;
}

#sitemap ul li a {
padding: 5px 0 5px 40px;
}
#sitemap ul ul li a {
padding-left: 40px;
}
#sitemap ul ul ul li a {
padding-left: 60px;
}

#sitemap ul li a.home {
padding-left: 20px;
}
#sitemap ul li a.rubrik {
padding-left: 40px;
}
#sitemap ul ul li a.rubrik {
padding-left: 40px;
}

#sitemap ul li a:hover,
#sitemap ul li a:hover.home,
#sitemap ul li a:hover.rubrik {
border: 1px solid #d4d4d4;
}

/* IE Zusatz*/
* html #sitemap ul li {
display: inline;
}
* html #sitemap ul li a {
height: 1%;
}
/* IE Zusatz Ende */

 

[Maik]

Hi.

Am besten sollte diese vertikal aufklappbar sein, sodass Seite 1.1, Seite 1.2, usw. nur angezeigt werden, wenn man auf Rubrik 1 klickt.

Wenn die Untermenüs beim Anklicken der Menüpunkte (beständig) angezeigt werden sollen, ist hierfür Javascript vonnöten.

Dies wurde aber schon mehrfach hier im CSS-Forum erörtert, wie erst vor wenigen Tagen wieder in dem (gleichnamigen!) Thema Aufklappbares Menü, das sich auf der ersten Themenübersichtsseite des CSS-Forums findet.

Hier sind zwei Beispiele, die deiner technischen Vorstellung (Aufklappen bei Klick) entsprechen:

• http://www.stunicholls.com/menu/simple.html
• http://www.stunicholls.com/menu/click_through.html

Das Thema wird somit von mir ins Javascript-Forum verschoben.

mfg Maik

 

[lisa5]

Vielen Dank für die schnelle Antwort!