brauche Hilfe bei Erstellung eines Menüs mit CSS

R

Roberto Carlos

Grünschnabel
Hallo zusammen,
ich möchte gerne ein DropdownMenü über CSS erstellen. Dazu hatte ich als Vorlage mir mal eine Beispieldatei runtergeladen und entsprechend angepasst.

Nun möchte ich, dass die Hauptmenüpunkte beim Hover ein Bild einblenden, welches das Hintergrundbild des Buttons ist. Dazu kommt, dass das Bild noch ein Pfeil nach unten (richtung Untermenü) hat. Der hover Effekt funktioniert soweit auch. Auch das Untermenü wird richtig angezeigt.

Ich möchte jetzt...
a. das der Pfeil aus den Hauptnavipunkten über den Untermenü erscheint, so dass der Bezug zum Untermenü noch stärker hervorkommt. Im Moment ist es so, dass zwischen dem HauptnaviPunkt und dem Untermenü noch ein kleiner Abstand ist. Weiß jemand wie ich es schaffe, dass der Hauptpunkt quasi über dem Untermenü liegt?

b. Wenn ich mit der Maus über den Hauptpunkt gehe, erscheint mein hover Effekt und das Untermenü wird angezeigt. Gehe ich mit der Maus weiter über das Untermenü und verlasse dadurch den Hauptpunkt, verschwindet der Hover Effekt wieder.
Hier würde ich gerne, dass der hover Effekt so lange bleibt bis ich den gesamten Punkt samt Unterpunkt verlassen habe. Also wenn ich mit der Maus über dem Unterpunkt bin, soll der entsprechende Hauptpunkt den Hover Effekt beibehalten.
Hat jemand eine Idee?

Vielen Dank schon mal


P.S. die entsprechenden Daten hab ich als Anhang dazu gepackt.
 

Anhänge

Ich glaube dir hat noch niemand geantwortet, weil sich
a) niemand irgendeine eine Datei runterlädt.
b) niemand dir die Arbeit abnehmen würde.

Stell den betreffenden Quellcode hier im Beitrag bereit oder verlinke auf eine Seite wo dein Quellcode zu sehen ist. Zeige außerdem deinen bisherigen Versuch wie Du das umgesetzt hast was Du möchtest. Nur so kann man dir dann auch helfen.
 
Hallo threadi,
danke für den Hinweis. Mit der Datei war mir da nicht so bewusst, aber sicherlich eher ungünstig. Wer weiß, was sich dahinter verbirgt.
Allerdings hab ich auf keinen Fall gewollt, dass mir jemand die Arbeit abnimmt. ich dachte einfach nur, dass mir jemand einen Tipp geben kann wie ich das lösen kann.
Also sorry...wenn das so rüber gekommen ist.

Ich versuche es dann mal anders...
Also vorab ist dazu noch zu sagen, dass ich nicht gerade der CSS Experte bin und mich jetzt erst daran versuche.

ok...
Also wie schon geschrieben, habe ich ein Horizontales Menü mit einem dropDown Untermenü. Das funktioniert auch alles soweit ganz gut. Allerdings habe ich zwei SAchen die mir einfach nicht gelingen wollen und ich nicht weiter weiß.
1. dass ich es irgendwie nicht hinbekomme, dass wenn das Untermenü aktiviert ist das Hauptmenü sein hover Effekt beibehält.
2. Der Hover Effekt des Hauptmenüs hat eine Hintergrundgrafik mit einer Pfeilspitze nach unten. Die soll die zusammenhang mit dem Untermenü symbolisieren. Allerdings verschwindet die Spitze immer hinter dem Untermenü, wenn ich dieses etwas nach oben verschwiebe. Hier würde ich gerne die Spitze über dem Menü platzieren. Ich dachte eigentlich, dass es mit diesem Z-Index gehen würde. Aber das schein irgendwie nciht zu funktionieren.

Also so sieht mein Html aus. Nichts großes...einfach gehalten. Entsprechende Bereiche sind kommentiert...

Code: 
<div id="menu"><!-- öffnet die Menüleiste -->

	<ul><!-- öffnet den ersten Themenblock -->

		<li><!-- öffnet die Listeneinträge von Thema 1 -->

			<h3>Thema 1</h3>

				<ul><!-- öffnet die Klappnavi von Thema 1 -->

					<li><a href="#">Thema 1.1</a></li>
					<li><a href="#">Thema 1.2</a></li>
					<li><a href="#">Thema 1.3</a></li>
				</ul><!-- schließt die Klappnavi von Thema 1 -->

		</li><!-- schließt die Listeneinträge von Thema 1 -->

	</ul><!--schließt den ersten Themenblock-->



<ul><!-- öffnet den zweiten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3>Thema 2</h3>

		<ul><!-- öffnet die Klappnavi von Thema 2 -->
				<li><a href="#">Thema 2.1</a></li>
				<li><a href="#">Thema 2.2</a></li>
				<li><a href="#">Thema 2.3</a></li>
		</ul><!-- schließt die Klappnavi von Thema 2 -->

</li><!-- schließt die Listeneinträge von Thema 2 -->

</ul><!--schließt den zweiten Themenblock-->

<ul><!-- öffnet den dritten Themenblock -->

<li><a class="direkt" href="#">Thema 3</a></li>

</ul><!--schließt den dritten Themenblock-->

<ul><!-- öffnet den vierten Themenblock -->


<li><a class="direkt" href="#">Thema 4</a></li>

</ul><!--schließt den vierten Themenblock-->


</div><!-- schließt die Menüleiste #menu -->



Das entsprechende CSS sieht entsprechend so aus...


Code: 
/*--gew&auml;hrleistet einheitliche Abst&auml;nde in unterschiedlichen Browsern--*/
* { margin: 0; padding: 0;}
/*--definiert den Hintergrundbalken der Navi und einige allgem. Angaben--*/
#menu { padding: 0; font-family: Verdana; font-size: 1em; line-height: 1.5; /*--bewirkt eine vertikale Textzentrierung--*/
background-image: url(img.test/img.navi/bg.white.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; position: relative; width: 100%; height: 70px; float: left; margin-top: 50px; /*--nimmt die Navileiste aus dem "Fluss", verhindert float-/clear-Probleme der ul--*/}
/*--definiert die einzelnen Navigationsbl&ouml;cke--*/
#menu ul {float: left; width: 140px; list-style-type: none;}
/*--definiert die Block&uuml;berschriften--*/
#menu h3 { text-align: center; color: #000; font-size: 14px; font-weight: bold; line-height: 25px; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; text-transform: uppercase; height: 33px; }
#menu h3 a { text-align: center; color: purple; font-size: 14px; line-height: 25px; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; text-transform: uppercase; height: 33px; }
#menu h3:hover { text-align: center; color: #000; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 -33px; }
#menu h3:active { text-align: center; color: #000; background-image: url(img.test/img.navi/button.hover.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; }
#menu h3:visited { text-align: center; color: #000; background-image: url(img.test/img.navi/button.hover.png); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 0; }
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a { text-decoration: none; display: block; text-align: center; line-height: 25px; background-color: white; height: 30px; }
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover { background: #ebebeb; height: 30px; }
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul { position: absolute; z-index: 2; padding: 0; display: none; }
#menu li { position: relative; /*verhindert im Zusammenhang mit pos. absolute bei ul ul eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--*/}
#menu ul ul li { color: #363636; font-size: 12px; position: relative; width: 300px; /*verhindert im Zusammenhang mit pos. absolute bei ul ul eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--*/}
#menu ul ul li a { color: #363636; line-height: 37px; text-align: left; position: relative; width: auto; height: 37px; float: left; margin: 0; padding: 0 10px; border-right: 1px solid #bbb; /*verhindert im Zusammenhang mit pos. absolute bei ul ul eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--*/}
#menu ul ul li a:hover { color: #363636; background-color: #b2d4ea; text-align: left; position: relative; width: auto; height: 37px; float: left; margin: 0; padding: 0 10px; border-right: 1px solid #bbb; /*verhindert im Zusammenhang mit pos. absolute bei ul ul eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--*/}

/*--l&auml;sst die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul { background-color: transparent; top: 33px; display: block; }
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link { font-weight: bold; text-align: center; color: #000; font-size: 14px; line-height: 25px; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 0; text-transform: uppercase; height: 33px; }
#menu a.direkt{ font-weight: bold; text-align: center; color: #000; font-size: 14px; line-height: 25px; background-color: transparent; background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 0; text-transform: uppercase; height: 33px; }
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover { background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 -66px; }
#menu a.direkt:active { background-image: url(img.test/img.navi/button.png); background-repeat: repeat-x; background-position: 0 -66px; }
#menu a.direkt:visited { color: #363636; }
/*--nur f&uuml;r IE-Versionen &lt;=6 erkennbar--*/
* html #menu ul li {float: left; width: 100%;}


Ich hoffe es ist etwas verständlich, was genau mein Problem ist.

Wäre super, wenn ein Tipp kommen würde weil ich wirlklich nicht weiter weiß.

Danke schon mal.
 
Hi,
zunächst einmal solltest du deine CSS Datei vlt ein bisschen besser gliedern. Das vereinfacht dir und uns als Helfern das lesen.
Nun einmal ein grundsätzlicher Aufbau solcher Dropdown/Popout Navigationsmenüs.
HTML: 
<ul id="menu"> 
      <li>Punkt1</li>
      <li>Punkt2
            <ul>
                   <li>Unterpunkt1</li>
                   <li>Unterpunkt2</li>
            </ul>   </li>

Hier siehst du wie das Menü in HTML aufgebaut sein muss.
Bei Punkt 2 Kommt das Popout Menü.
Aber du darfst den Listenpunkt bei Punkt 2 nicht schliessen, sondern fängst direkt wieder eine ungeordnete Liste an mit allen Unterpunkten die du haben möchtest. Erst wenn alle abgehandelt sind, schliesst du erst wieder den Listenpunkt von Punkt 2.

Und hier dass CSS dazu:
Code: 
ul#menu li ul{
display:none;
}
ul#menu li:hover ul{
display:block;
}

Mit dem Punkt bei li ul display:none; blendest du das Navigationsmenü erstmal ein.
Dann bei li:hover ul blendest du es als block Element ein.

Das sind natürlich nur Formatierungen, die das Popout/Dropdown betreffen.
Alle anderen Formatierungen, müssen noch eingefügt werden.

Gruß FunkFlex
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück