| Autor |
Nachricht |
hellgold
Threadersteller
Dabei seit: 05.10.2006
Ort: Duesseldorf
Alter: 35
Geschlecht:
|
Verfasst Do 17.02.2011 10:13
Titel Suche ein CSS-Menü, das folgendes kann: |
 |
|
Hallo,
ich suche ein CSS Menü, das folgendes kann/tut:
- Es befindet sich in einem querformatigen DIV mit fester Größe und einer Farbe
- Die einzelnen Menüpunkte sind <li> Elemente in einer <ul>
- Bei a:hover sollen die Menüpunkte farblich hervorgehoben werden, dort wo Text steht + 2px mehr (der farblich hervorgehobene Bereich soll ein klein größer sein als die Schrift)
Jetzt kommt das knifflige: Die Untermenüpunkte sollen jeweils nur nach rechts (!) ausklappen, nur in der einen Zeile des Hauptmenüpunkts. Die meisten Menüs, die ich gefunden habe klappen die Untermenüpunkte zwar nach rechts aus, aber dann als Liste nach unten. In meinem Layout würde dadurch aber ein Teil des Hauptmenüs verdeckt werden.
Zusätzlich sollten die Untermenüpunkte sichtbar bleiben, solange man sich auf der jeweiligen Unterseite befindet. Das „submenü“ soll also eingeblendet bleiben.
Ein ungefähres Beispiel, wie ich es mir von der Anordnung vorstelle findet Ihr hier: Menübeispiel
Die Seite dort ist aber mit Tabellen aufgebaut und das Menü läuft scheinbar über Scripte?
Hat jdm. so ein Menü, oder einen Ansatz, den man weiterenwickeln könnte?
Danke schonmal
HG
|
|
| |
|
 |
| |
|
 |
deeesi
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 30
Geschlecht:
|
Verfasst Do 17.02.2011 10:33
Titel
|
 |
|
meinst du so wie hier bei design duft und produkte?
Beispiel
nur halt in die andere richtung...
|
|
| |
|
 |
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 23
Geschlecht:
|
Verfasst Do 17.02.2011 10:41
Titel
|
 |
|
Gib doch den li´s ein
dann werden sie auch schön nebeneinander angezeigt
oder haperts an der gesamten umsetzung?
gruß...
|
|
| |
|
 |
hellgold
Threadersteller
Dabei seit: 05.10.2006
Ort: Duesseldorf
Alter: 35
Geschlecht:
|
Verfasst Do 17.02.2011 11:16
Titel
|
 |
|
| deeesi hat geschrieben: | meinst du so wie hier bei design duft und produkte?
Beispiel
nur halt in die andere richtung... |
yep. Die Unterpunkte sollten aber erst erscheinen, wenn man über den jeweiligen Menüpunkt fährt. Sonst könnte ich mir den ganzen Aufwand ja sparen und eine Wortwolke bauen, in der man dann wahlweise die Worte anklickt.
Finde ich aber nicht so schöööööönnn....
Gruß
HG
|
|
| |
|
 |
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 46
Geschlecht:
|
Verfasst Do 17.02.2011 11:16
Titel
|
 |
|
Bis auf die letzte Definition lassen sich alle Anforderungen rein mit CSS je nach eigenem Können in unter einer Stunde schreiben.
Für die letzte Anforderung wird einfach serverseitig eine entsprechende Klasse gesetzt.
Auf welche Probleme bist du bei deiner Umsetzung gestoßen bei denen wir dir helfen können?
Gruß
Karl
|
|
| |
|
 |
hellgold
Threadersteller
Dabei seit: 05.10.2006
Ort: Duesseldorf
Alter: 35
Geschlecht:
|
Verfasst Do 17.02.2011 11:53
Titel
|
 |
|
| Karlarsch hat geschrieben: | | Bis auf die letzte Definition lassen sich alle Anforderungen rein mit CSS je nach eigenem Können in unter einer Stunde schreiben. |
Ich wollte erstmal wisse, ob das überhaupt geht. Das scheint ja so zu sein. Meine letzte Anforderung lasse ich jetzt mal unter den Tisch fallen.
Da ich nicht soo der CSS-Crack bin benötige ich jetzt einen Ansatz, den ich weiterentwickeln kann:
Wie muss die Liste formatiert sein?
Wie die Listenelemente?
Ein Beispiel wäre toll, indem ich sehen kann, wie man das grundsätzlich aufbaut.
Bisher habe ich die Hauptliste, mehr nicht...
Gruß
HG
|
|
| |
|
 |
deeesi
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 30
Geschlecht:
|
|
| |
|
 |
Morgo
Dabei seit: 10.08.2005
Ort: -
Alter: 27
Geschlecht:
|
Verfasst Do 17.02.2011 12:12
Titel
|
 |
|
Ansatz:
| Code: |
ul#nav {
width: 100px;
}
ul#nav li {
display: block;
position: relative;
}
ul#nav li ul {
width: 300px;
position: absolute;
left: 100px;
top: 0;
display: none;
}
ul#nav li:hover ul {
display: block;
}
ul#nav li ul li {
display: inline;
}
|
| Code: |
<ul id="nav">
<li>Test
<ul>
<li>Ebene 2</li>
<li>Test 2 2</li>
</ul>
</li>
<li>Test 2</li>
</ul> |
|
|
| |
|
 |
| |
|
 |
| Ähnliche Themen |
CSS Menü - Finde nicht das richtige Menü
[CSS] Frage zu horizontalem Menü mit CSS
CSS Menü
CSS-Menü
Problem mit JS/CSS-Menü
CSS MEnü Problem
|
 |