✔ Horizontales Dropdown Menü

Jo, das wird wohl das Beste sein, wenn es dir nicht möglich ist, einfach nur den geparsten Code (Browser -> Ansicht -> Seitenquelltext anzeigen) und die Grafikdateien in einem ZIP-Archiv hier hochzuladen :rolleyes:

mfg Maik
 
Na schön...vielleicht hilft das mehr...ist der komplette Ordner + Seitenquellcode[Geschaeft].
das aktive Template ist "huricannachbildung"
 
Zuletzt bearbeitet von einem Moderator:
Lieber zu viel als zu wenig....hoffe es wird richtig angezeigt

Ich sollte vielleicht noch angeben, wo sich die CSS-Dateien genau befinden, die das Menü betreffen:
swg6\templates\huricannachbildung\css\template.css Nur #naviEP.
und swg6\modules\mod_mainmenu\css\dropdown.css

Kann man das Menü nun überhaupt ansehen? Datenbank ist ja keine dabei...wäre euch über Feedback dankbar, wenn ich schon den ganzen Ordner hochlade...
 
Warum sollte man von dem Menü nichts sehen, wo du doch das komplette Projektverzeichnis hier hochgeladen hast?


  • dropdown.css
CSS: 
ul.dropdown ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 700;
        /*width: 100%;*/ /* auskommentiert = deaktiviert */
        background-color:#509C1F;
        float: left; /* bewirkt, dass sich die Elementbreite durch den Inhalt ergibt, hier durch den längsten <li>-Eintrag "Stellenangebote" */
}

/* ggfs. mit diesen Erweiterungen im best. Selektor "ul.dropdown ul li"  analog zu template.css */
ul.dropdown ul li, ul.dropdown ul li a {
        float: none;
        display: block;
}
  • template.css
CSS: 
#naviEP ul ul li, #naviEP ul ul li a {
        float: none;
        display: block;
}

mfg Maik
 
Hey danke, es funktioniert. Weißt du bei meinem zweiten Problem vielleicht auch weiter?
Er zeigt ja von Anfang an schon links neben einem Menüpunkt den Teil einer runden Ecke.
Denn wenn man mit der Maus über einen Menüpunkt drüberfährt, soll ein Umrandung mit runden Ecken um den Menüpunkt erfolgen.
Vorher soll da nur der Menüpunkt alleine stehen, nur der Text. Intuitiv hätte ich jetzt folgendes gemacht...
Das ist gegebene:

Code: 
#naviEP li a {
	float:left;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	height:28px;
	line-height:27px;
	padding: 0 12px;
	margin:0;
	cursor:pointer;
	background: transparent url(../images/topleft.gif) no-repeat top left;
}

#naviEP li a:hover, #pillmenu li a#active_menu-nav {
	background: transparent url(../images/t_menu_hover.png) no-repeat top left;	
}

Dann das "background: transparent url(../images/topleft.gif) no-repeat top left;" von ]#naviEP li a in #naviEP li a:hover, #pillmenu li a#active_menu-nav verschieben, dass es dann so aussieht:

Code: 
#naviEP li a:hover, #pillmenu li a#active_menu-nav {
	background: transparent url(../images/topleft.gif) no-repeat top left;
	background: transparent url(../images/t_menu_hover.png) no-repeat top left;	
}

Leider tut er ned, was er soll...
 
fschwarz hat gesagt.:
Intuitiv hätte ich jetzt folgendes gemacht...
Das ist gegebene:

Code: 
#naviEP li a {
	float:left;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	height:28px;
	line-height:27px;
	padding: 0 12px;
	margin:0;
	cursor:pointer;
	background: transparent url(../images/topleft.gif) no-repeat top left;
}

#naviEP li a:hover, #pillmenu li a#active_menu-nav {
	background: transparent url(../images/t_menu_hover.png) no-repeat top left;	
}

Dann das "background: transparent url(../images/topleft.gif) no-repeat top left;" von ]#naviEP li a in #naviEP li a:hover, #pillmenu li a#active_menu-nav verschieben, dass es dann so aussieht:

Code: 
#naviEP li a:hover, #pillmenu li a#active_menu-nav {
	background: transparent url(../images/topleft.gif) no-repeat top left;
	background: transparent url(../images/t_menu_hover.png) no-repeat top left;	
}

Leider tut er ned, was er soll...
Zum Vergrößern anklicken....
Leider? Was er soll? :eek:

Wo hast du denn bitte gelernt, dass eine CSS-Eigenschaft (hier: background) grundsätzlich in einer Regelmenge doppelt deklariert werden kann, und beide Regeln gleichermaßen von den Browsern interpretiert / angewendet werden?!

Diese Form der Notation hat lediglich zur Folge, dass jeder Browser mit der zuletzt genannten Regel kurzerhand die vorangegangene wieder überschreibt.

Die einzige Möglichkeit der doppelten Benennung einer CSS-Eigenschaft mit unterschiedlichen Wertzuweiszungen bietet hier die !important-Regel (siehe http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap06.html#heading-6.4.2 ), die zum Schluß der ersten Deklaration angegeben wird, und standardkonforme Browser anweist, die nachfolgende Regel zu ignorieren, die nur gewissen Browsern gewidmet ist - Stichwort: "CSS-Browserhack" bzw. "CSS-Browserweiche".

Im nachfolgenden Beispiel wird mittels min-height eine Mindesthöhe eingerichtet, um dem Element bei zu geringem Inhalt das gewünschte Mindestmaß an Höhe zu verleihen, und es mitwachsen zu lassen, wenn darin der Inhaltsumfang zunimmt.

Standardkonforme Browser (FF, IE7, IE8, Opera, Safari, u.ä.) interpretieren problemlos diese Eigenschaft, jedoch nicht die IE-Versionen 5 und 6 aus dem vergangenen Jahrhundert. Stattdessen betrachten sie fälschlicherweise eine absolute height-Regel als Mindesthöhe, wenn der Elementinhalt dieses Maß überschreitet. Alle übrigen Browser würden es mit dieser Angabe bei der Boxenhöhe belassen, und den Inhalt über ihren unteren Rand hinauslaufen lassen.

CSS: 
div#box {
    min-height: 400px;  /* Mindesthöhe für standardkonforme Browser */
    height: auto !important; /* autom. Höhe mit  !important-Regel für standardkonforme Browser, um nachfolgende height-Regel zu übergehen */
    height: 400px; /* "Mindesthöhe" für IE5/6 */
}

Zur Lösung deines Problems solltest du die "Sliding Doors"-Technik studieren, damit beim Überfahren der Links im Untermenü auch der rechte Bildausschnitt der Grafikdatei "t_menu_hover.png" mit der gegenüberliegenden Umrandung zum Vorschein kommt, denn so breit wie diese Grafikdatei (263px) ist das Untermenü, respektive die Zeichenlänge in den Links nunmal nicht, um das Hintergrundbild in seiner vollständigen Breite darzustellen.
  1. A List Apart: Articles: Sliding Doors of CSS
  2. A List Apart: Articles: Sliding Doors of CSS, Part II

Übrigens wurde heute Mittag während deiner mehrstündigen Anwesenheit hier im CSS-Forum ein ähnlicher Problemfall vorgestellt und erörtert: Button, bestehend aus 3 Elementen - Frage bezgl. hover.

Vielleicht hast du ja aus reinem Interesse das Thema verfolgt, mitgelesen.

mfg Maik
 
Moin,

da ich nicht mit Gewißheit ausschließen kann, dass sich in deinem hochgeladenen (Kunden-)Projektverzeichnis keine vertraulichen Kundendaten befinden, die von jedermann hier frei heruntergeladen werden können, und ich mir ganz sicher nicht die Zeit dafür nehmen werde, dies in den über 1.100 (in Worten "eintausendeinhundert") enthaltenden Unterverzeichnisssen zu überprüfen, hab ich das Attachment vorsorglich aus deinem Beitrag entfernt, um möglichen Zuwiderhandlungen durch Dritte nicht Tür und Tor zu öffnen, die sich im stillen Kämmerlein alle Zeit der Welt dafür nehmen würden, den Ordnerdschungel einmal von oben nach unten durchzupflügen.

Am Ende hättest nicht du alleine mächtigen Ärger an der Backe, rechtliche Schritte würden auch gegen Dominik Haubrich als Forenbetreiber eingeleitet werden, die mitunter ein schmerzhaft hohes Bußgeld nach sich ziehen können, das du sicherlich nicht mal eben kurz aus deiner Portokasse vorstrecken kannst, um Dominik hier den Rücken frei zu halten.

So manches Forum konnte in der Vergangenheit seine Dienste einstellen und die Pforten schließen, weil von Klägerseite eine Unterlassungsklage in die Wege geleitet wurde, die dem Forenbetreiber finanziell das Genick gebrochen hat.

In Zukunft lade also bitte hier im Forum nur die Dateien (CSS, JS, Grafiken) hoch, die benötigt werden, um das Dokument in den Browser laden zu können. Noch besser, du richtest dir irgendwo einen (kostenlosen) Webspace als Testumgebung ein, um in deinem Beitrag dorthin verweisen zu können.

Vielen Dank für die Aufmerksamkeit!

mfg Maik
 
So...mittlerweile bin ich weitergekommen und hab es mal online getestet.
Nun das Menü passt so im Prinzip schon einigermaßen, habt ihr noch Verbesserungsvorschläge?
Weiß jemand wie ich den Oberpunkt markiert lasse, sodass der grüne Rahmen stehen bleibt, auch wenn ich mit der Maus die Dropdown runterfahre.
Oder wie kann ich nun realisieren, dass sich die Dropdown nicht sofort öffnet, sondern erst nach einer kurzen Verzöferung, brauch ich dazu unbedingt Javascript?
Das Menü ist in der CSS #naviEP...das Menü sollte in etwa so aussehen http://hurican.sk/

So sieht meine Seite im Moment aus http://fs.works.iwsystems.de/index.php?option=com_content&view=article&id=22&Itemid=29
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück