DropDown Menü Rocksolid Opensauce[Download hier]
Hallo Leute,
ich habe leider ein kleines Verständnisproblem mit CSS.
Im Moment experementiere ich mit dem freien Theme "Opensauce" von Rocksolid, an dieser Stelle nochmal herzlichen Dank für das Theme.
Bei diesem Theme ist zwar ein Level 2 Menü vorhanden, aber leider nicht als DropDown Menü.
Eigentlich sollte es ja nicht so schwer sein, dort ein DropDown Menü zu basteln aber leider komme ich nicht so Recht weiter.
Das Untermenü läßt sich nicht vernünftig wieder einblenden.
Ich nutze:
Contao 3.4.0
FireBug
Hier mal ein Link zur Testseite.
Das Hauptproblem liegt, wie immer, zwischen den Ohren :(.
Über einen kleinen Denkanstoß würde ich mich freuen.
Gruß
tschero
PS:
Sollte die Umsetzung funktionieren, stelle ich den Workflow / die CSS Datei natürlich gerne zur Verfügung.
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Leute,
wie angekündigt die DropDown-Menü CSS Erweiterung für das freie Theme "Open Sauce" von RockSolid..
Sollten Fehler auftauchen bitte ich um eine Info an mich.
Viel Spaß damit.
Gruß
tschero
Anhang 15084
Liste der Anhänge anzeigen (Anzahl: 1)
CSS verbessert
Hallo Leute,
nach etwas testen und Info´s von Nutzern stelle ich mal eine verbesserte Version des DropDown Menüs für das Rocksolid Theme "Open Sauce" zur Verfügung.
Änderungen:
- Aktive Links der zweiten Ebene werden jetzt auf voller Breite angezeigt
- der Hover Effekt wurde durch veränderte Verläufe verstärkt.
Anhang 15200
Über weitere Info´s zu Fehlern würde ich mich freuen.
Gruß
tschero
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo tab,
vielen Dank für die Info.
Das funktioniert sehr gut.
Hier mal die aktuelle *.css Datei zum Download.
Über weitere Info´s und Verbesserungsvorschläge würde ich mich freuen.
Anhang 15321
Gruß
tschero
kleiner Schönheitsfehler bei drop down Navigation mit Apple iPad
Hallo tschero,
das DropDown Menü ist für Rocksolid Opensauce eine prima Erweiterung. Ein kleiner Schönheitsfehler ist mir aufgefallen: Wenn man mit einem Apple iPad z.B. auf Deine Seite
http://rocksolid.webdesign24.biz/ind.../features.html
surft, öffnet sich das Features Menu nicht mehr beim drauftippen. Um die weiteren Einträge unterhalb "Features" zu sehen, muss man erst auf eine andere Seite springen. Bei einem "normalen" Desktopbrowser öffnet es sich hingegen beim hovern, wie man es erwartet.
Viele Grüsse
joerg.wall
drop down Navigation mit Apple iPad geht noch nicht
Hallo tschero,
auf Deiner Webpage
http://rocksolid.webdesign24.biz/ind.../features.html
ist das Verhalten mit dem iPad leider unverändert, das drop down menu zeigt sich bei geöffneten Menüpunkt noch immer nicht.
Viele Grüsse
joerg.wall
Liste der Anhänge anzeigen (Anzahl: 2)
Ja, genau das.
Ich bin jetzt soweit, dass ich das Dropdown angezeigt bekomme. Ich hatte die Höhe für die Navigation zu gering gesetzt, daher hab ich das nie gesehen.
Jetzt ist mein Problem noch, dass ich für das Dropdown die Formatierung noch nicht passend habe.
Aktuell ist es so, dass der ausgewählte bzw. der berührte Navigationspunkt farbig unterlegt wird.
Anhang 19690
Wenn ich in diesen Punkt eine Auswahl treffe, wird der Hauptpunkt allerdings doppelt gekennzeichnet und nicht nur einmal.
Anhang 19691
Hier die css, die ich für die Navigation nutze.
Code:
#header .mod_navigation {
height:500px;
left:15px;
position:absolute;
top:175px;
}
#header .mod_navigation ul {
width:auto;
float:left;
margin:0;
padding:0;
list-style-type:none;
}
#header .mod_navigation li {
width:auto;
float:left;
margin:0;
list-style-type:none;
}
#header .mod_navigation a {
display:block;
padding:15px 20px 20px;
border-right:3px solid #fff;
font-size:14px;
color:#666;
}
#header .mod_navigation span,
#header .mod_navigation .trail {
display:block;
padding:15px 20px 20px;
background-position:left bottom;
background-repeat:repeat-x;
border-right:3px solid #fff;
font-size:14px;
text-decoration:none;
color:#8c9c51;
background-image:url("files/fM_k0001/images/navigation_main_hover.gif");
}
#header .mod_navigation a:hover {
display:block;
padding:15px 20px 20px;
background-position:left bottom;
background-repeat:repeat-x;
border-right:3px solid #fff;
font-size:14px;
text-decoration:none;
color:#8c9c51;
background-image:url("files/fM_k0001/images/navigation_main_hover.gif");
}
#header .mod_navigation a:focus,
#header .mod_navigationMain a.trail {
display:block;
padding:15px 20px 20px;
background-position:left bottom;
background-repeat:repeat-x;
border-right:3px solid #fff;
font-size:14px;
text-decoration:none;
color:#8c9c51;
background-image:url("files/fM_k0001/images/navigation_main_hover.gif");
}
#header .mod_navigation .level_2 {
width:0;
height:0;
left:-32768px;
position:absolute;
overflow:hidden;
display:inline;
top:-32768px;
}
#header .mod_navigation .level_2 li {
clear:both;
}
#header .mod_navigation li:hover .level_2 {
width:auto;
height:auto;
min-width:120px;
left:auto;
top:auto;
overflow:auto;
display:block;
background-color:#E9E9E9;
z-index: 1000;
}
#header .mod_navigation .level_2 a,
#header .mod_navigation .level_2 span {
font-size:13px;
line-height:32px;
font-weight:normal;
}
Evtl. kann ja jemand damit schon etwas anfangen. Ich bin aber auch dabei die Installation auf einer Sub-Domain einzurichten, dann kann ich euch das auch live zeigen.
Schon einmal vielen Dank!
Liste der Anhänge anzeigen (Anzahl: 1)
Ich habe die Seite mit einer kleinen Struktur nun live --> http://contao.st-sebastianus-schwitten.de
Unter dem Punkt "Chronik" gibt es ein Untermenü, sobald ich dort einen Punkt aufrufe, wird der Oberpunkt "doppelt" gekennzeichnet und tiefer gestellt.
Anhang 19692
Hat jemand ne Idee wie ich es hinbekomme, dass nur eine Markierung da ist und auch keine Verschiebung entsteht?
Dropdown klappt beim initialen Aufruf nicht untereinander auf
Hallo an alle,
ich habe das Dropdown-CSS bei mir auch eingebaut, weil eine Freundin das so haben wollte. Vielen Dank für die Arbeit. Es klappt auch ganz gut, aber bei einem initialen Aufruf der Seite unter
http://neu.iss-was-besseres.de/
gibt es den Fehler, dass bei der ersten Kategorie "Ernährungscoaching" der Unterpunkt "Ernährungscoaching für Kinder" nicht darunter dargestellt wird, sondern exakt darübergelegt wird. Bei dem anderen Menüpunkt "Kontakt" passiert das nicht. Das Fehlverhalten verschwindet allerdings auch, wenn man zwischenzeitlich andere Seiten aufgerufen hat und dann die Navigation weiter bedient. Dann ist es OK.
Hat dafür jemand einen Tipp? Hat das eventuell mit irgendwelchen Klassen zu tun wie "first" o.ä.?
