Untermenus Hinweis-Icon

nlphansli · #1 (**permalink**) 08.12.2010, 15:43

Hallo
Trotz intensiver (stundenlanger) Suche sowohl im Forum als auch im Web bin ich nicht fündig geworden. Ich wusste auch nicht richtig, wonach ich im Forum suchen sollte...
Ich bin dran, ein horizontales Dropdown-Menu zu gestalten. Das klappt bisher alles recht gut. Nun möchte ich, dass man bei jedem Menupunkt sieht, ob er ein Untermenu hat, z.b. mittels eines kleinen Pfeiles. Man sieht das recht oft, ich habe aber auch mit Firebug nicht herausgefunden, wie man das macht. Und ich möchte kein JS verwenden, nur CSS.
Danke für die Hilfe.

Manfred62 · #2 (**permalink**) 08.12.2010, 16:19

Mit Grafiken, z.B. so:
Listamatic: Using images for bullets

Gruß Manfred

nlphansli · #3 (**permalink**) 08.12.2010, 16:29

Danke für deine Antwort. Dies ist jedoch nicht genau das, was ich suche, offenbar habe ich mich nicht ganz klar ausgedrückt.
Ich möchte das Pfeilchen nur bei den Menupunkten haben, die auch ein Untermenu haben, bei den anderen nicht, so dass dem Besucher klar ist, dass da noch etwas drunter zu finden ist.

andir · #4 (**permalink**) 08.12.2010, 16:31

Ich finde diese Frage berechtigt und mir fiel auch gleich eine CSS-Lösung dafür ein.

Sieh mal hier, als Beispiel mit unterschiedlichen Hintergrundfarben gelöst.
Keine Ahnung obs das schon gibt

))

Viel Spass damit.

HTML-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" xml:lang="de" lang="de">

<head>
    <title>Untermenühinweis automatisiert mit CSS</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="Hinweis auf Untermenü automatisiert mit CSS" />
    <meta name="author" content="CSS; andir, XHTML-Forum" />
    <style type ="text/css"><!--

* {
        margin: 0;
    padding: 0;
}

div {
    margin: 5em;
}

ul {
    height: 1.3em;
    background-color: black;
    color: white;
    width: auto;
    list-style-type: none;
}
li {
    float: left;
    width: 15em;
    position: relative;
    border-right: 1px solid white;
    text-align: center;

}
li span {
    margin-right: 20px;
}
li ul.sub1 {
      position: absolute;
      width: 20px;
      right: 0;
      background-color: #ccc;
      margin: 0;
      top: 0em;
}
li ul li {
    display: none;
    float: none;
    width: auto;
    background-color: #ccc;
    }
li:hover ul.sub1 {
    display: block;
    width: 100%;
    height: auto;
    top: 1.3em;
        }
li:hover ul.sub1 li {
    display:block;
    width: 100%;

}
h2 {
    font-weight: bold;
    font-size: 1.3em;
    font-family: sans-serif;
    padding-bottom: 1em;
}
 --></style>
</head>

<body>
<div><h2>andirs automatisierte Untermenüanzeige- style das second level!</h2><ul><li>Ein Punkt</li><li><span>mit Unterpunkt</span><ul class="sub1"><li>bli</li><li>bla</li><li>blubb</li></ul></li><li>nochn Punkt</li></ul></div>
</body>
</html>

heiko_rs · #5 (**permalink**) 08.12.2010, 16:34

Zitat:

Zitat von nlphansli

Nun möchte ich, dass man bei jedem Menupunkt sieht, ob er ein Untermenu hat

Im Prinzip die einzige Lösung ist eine Klasse für die Menüpunkte, die außer ihrem Link auch noch eine Subnavi haben.

Edit: Mit einem zus. Element geht es natürlich auch, aber da wäre mir die Klasse lieber

andir · #6 (**permalink**) 08.12.2010, 16:36

Widerspruch

Edit: Achwas, das span habe ich nur aus Faulheit reingesetzt, wozu gibts padding für das Linkelement und transparente hintergrunde für die ul und andere? (Edit 2: oder margin... Lösungen gibt es viele - aber es geht)

heiko_rs · #7 (**permalink**) 08.12.2010, 18:13

Stimmt, ich hatte gar nicht so genau geschaut

Ich hatte eine ähnliche Idee, und zwar die Subnavi per neg. margin-top unter a der Hauptnavi zu schieben. Dann behält sie immer ihre Position, auch wenn ihre li beim Hovern des dazugehörigen Haupt-li sichtbar werden, und damit ist auch die Grafik, die das Vorhandensein der Subnavi kenzeichnet, immer da, und ändert auch ihre Position nicht, wenn die Subnavi erscheint. Aber ich war zu faul, das Ganze weiter auszuarbeiten, deswegen schrieb ich im Prinzip nur per Klasse

Aber jetzt habe ich mir die Mühe doch mal gemacht. Die border der Subnavi demonstriert nur, dass deren Position sich nie ändert, so dass ihre bg-Grafik immer ihre Position behält (und dass der rote Punkt links statt rechts erscheint, ist nur der Einfachheit halber, solange keine Grafik vorhanden ist).

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" 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">

* {
	margin: 0;
	padding: 0;
	}

body {
	padding: 30px;
	font-family: sans-serif;
	}

ul {
	list-style: none;
	width: 100%;
	float: left;
	}

li {
	float: left;
	background: #c0c0c0;
	margin-right: 1px;
	}

a {
	display: block;
	color: #000;
	position: relative;
	z-index: 1;
	padding: 5px 17px;
	}

ul ul {
	width: 10px;
	height: 10px;
	background: #c00;
	float: none;
	position: absolute;
	margin: -1.2em 0 0 2px;
	}

ul ul li {
	float: none;
	position: absolute;
	top: -9999px;
	left: -9999px;
	margin: 0;
	}

ul ul a {
	background: #000;
	color: #fff;
	padding: 5px;
	}

ul li:hover ul {
	width: 8em;
	height: auto;
	background: transparent;
	padding-top: 1.2em;
	border-left: 10px solid #c00;
	}

ul li:hover ul li {
	position: static;
	}

</style>
</head>

<body>

<ul>
<li><a href="#">Text</a></li>
<li><a href="#">Text mit Unterpunkt</a>
	<ul>
	<li><a href="#">Text</a></li>
	<li><a href="#">Text</a></li>
	<li><a href="#">Text</a></li>
	</ul>
</li>
<li><a href="#">Text</a></li>
</ul>

</body>

</html>

Für den IE < 8 muss man natürlich noch etwas hacken, und für den IE < 7 ja sowieso

andir · #8 (**permalink**) 08.12.2010, 22:42

Ich glaube der Threadstarter hat uns vergessen

Aber eine schöne Lösung hast Du da gebastelt

Da haben wir doch alle was von dieser Fragestellung gehabt.
Spart JS und ggf. PHP-Code.

heiko_rs · #9 (**permalink**) 08.12.2010, 23:43

Ja, und es ist ja eh immer eine gute Sache, vorhandene Elemente auch wirklich zu nutzen. Ich mache das z.B. gerne mit Elementen, die zwar im HTML stehen, aber dennoch nicht zu sehen sein sollen, wie z.B. <h2>Navigation</h2> über der Navi. Dieses Element lässt sich z.B. sehr gut für einen Header mit Gilder/Levin nutzen: Der Header braucht dann kein leeres Element, sondern man legt einfach besagte h2 darüber, mit der Header-Grafik als Hintergrund und text-indent: -9999px;.

nlphansli · #10 (**permalink**) 09.12.2010, 00:14

Zitat:

Zitat von andir

Ich glaube der Threadstarter hat uns vergessen

Kaum... Ich bin bloss nicht so schnell! Zwischen der Erfüllung von körperlichen Grundbedürfnissen von Familienangehörigen (Teenager füttern) versuche ich eure Erklärungen zu verstehen. Und sobald als möglich werde ich dann versuchen, sie nachzubauen.
Jedenfalls danke ich allen herzlich für die Hilfe, die Praxis folgt zwischendurch!! Und ich verfolge weiterhin eure Diskussion.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Link mit Icon - Icon in IE falsch angezeigt bei zweizeiligem Link	jorainbo	CSS	4	02.07.2008 19:00
Icon über HTML-Elemente	gelleneu	(X)HTML	1	16.09.2007 19:58
Icon vor Link \| wenn Zeilenumbruch verschwindet Icon	NicolaibassDH	CSS	0	28.03.2007 15:14
Icon für "Rechte"	Schneemann	Offtopic	7	05.02.2007 12:12
Copyright Hinweis entfernen trotz OpenSource?	Weyoun	Offtopic	13	18.07.2006 01:47