zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Untermenus Hinweis-Icon

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.12.2010, 14:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2010
Beiträge: 6
nlphansli befindet sich auf einem aufstrebenden Ast
Standard Untermenus Hinweis-Icon

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.12.2010, 15:19
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.136
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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

Gruß Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.12.2010, 15:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2010
Beiträge: 6
nlphansli befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 08.12.2010, 15:31
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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>
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 08.12.2010, 15:34
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
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 nlphansli Beitrag anzeigen
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
__________________
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 (08.12.2010 um 15:38 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 08.12.2010, 15:36
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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)
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (08.12.2010 um 15:47 Uhr) Grund: Noch was hinzugefügt...
Mit Zitat antworten
  #7 (permalink)  
Alt 08.12.2010, 17:13
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
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

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
__________________
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 (08.12.2010 um 17:16 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 08.12.2010, 21:42
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #9 (permalink)  
Alt 08.12.2010, 22:43
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
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

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;.
__________________
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.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.12.2010, 23:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2010
Beiträge: 6
nlphansli befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von andir Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
dropdown, horizontal, menü, suckerfish, untermenü

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
Link mit Icon - Icon in IE falsch angezeigt bei zweizeiligem Link jorainbo CSS 4 02.07.2008 18:00
Icon über HTML-Elemente gelleneu (X)HTML 1 16.09.2007 18:58
Icon vor Link | wenn Zeilenumbruch verschwindet Icon NicolaibassDH CSS 0 28.03.2007 14:14
Icon für "Rechte" Schneemann Offtopic 7 05.02.2007 11:12
Copyright Hinweis entfernen trotz OpenSource? Weyoun Offtopic 13 18.07.2006 00:47


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