• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dropdownmenü + Hintergrundbilder

V

Virgil

Neues Mitglied
Hallo,

ich habe mir bereits ein Dropdownmenü zurechtgebastelt und diverse Hintergrundbilder hinterlegt.

Aufgebaut ist das Menü wie folgt (Auszug):

HTML: 
<div id="GlobalNavi">
  <ul id="navi" class="dropdown dropdown_horizontal">
     <li><a class="non-left non-dir" href="">Link1</a></li>
     <li><a class="non-dir" href="">Link2</a></li>
     <li><a class="dir0" href="">Link3=Dir1</a>
	  <ul>
		<li class="first"><a class="dir1 border-top" href="">Dir1Link1</a>
	             <ul>
			<li class="first"><a href="">Dir1Link1a</a></li>
			<li><a href="">Dir1Link1b</a></li>
			<li class="border-bottom"><a href="">Dir1Link1c</a></li>
		     </ul>
		</li>
                <li><a class="dir1" href="">Dir1Link2</a>
		     <ul>
			<li class="first"><a href="">Dir1Link2a</a></li>
			<li><a href="">Dir1Link2b</a></li>
			<li><a href="">Dir1Link2c</a></li>
		     </ul>
		</li>
           </ul>
     </li>

Per CSS habe ich nun fast alles angpasst, bis auf eine Sache, wesswegen ich auch hier bin, also leg ich mal los:

Für die Links habe ich - wie gesagt - Hintergrundbilder hinterlegt für:
a. Die Kopflinks (ersten Links)
b. Die DirLinks (Links mit weiteren Links)
c. Die normalen Links (Links ohne Unterlinks)
d. Hovereffekte
e. Holdeffekte <------ Das ist das Problem

Ich habe Punkt einfach mal Holdeffekte gannant, weil ich nicht weiss wie man diesen Bereich nennt wenns überhaupt eine Bezeichn ung gibt. Gemeint ist, dass wenn ich mit der Maus auf dem ersten Link (KopfLink) bin dann öffnet sich das Menu und die dazugehörigen Links erscheinen. Im ersten Link (KopfLink) erscheint dann ein bestimmtes Bild, welches verschwindet sobald ich mit der Maus auf einen der Aufgegangen Links bin. Genau das möchte ich ändern, d. h. anstatt dass das Bild verschwindet soll ein anderes Bild erscheinen und hier komme ich nicht weiter.

Anregung hierzu hatte ich von dem Dropdownmenu auf New Music Videos, Reality TV Shows, Celebrity News, Top Stories | MTV. Den Effekt, den ich meine, kann man sehen, wenn man auf der Seite mit der Maus folgenden Weg zeichnet: Music -> Artists --> Browse A-Z. Hier ist dann zu sehen wie der Menülink "Artists" eine andere Hintergrundfarbe erhält sobald man auf einen Unterlink von "Artists" kommt. Ich möchte halt dafür ein bestimmtes Hintergrundbild angezeigt bekommen.

Ich sollte dazu sagen, dass ich dieses Menü nur per CSS erstellen möchte, also ohne Javascript oder ähnliches.


Über Anregung oder besser noch der Lösung würde ich mich natürlich sehr freuen. Vielleicht hat einer eine Idee die mir weiterhilft!!

Dank im Voraus!!!!

MfG
ViRGiL
 
Dein css hast du nicht gezeigt.
Mit meinem css funktioniert diese Variante:
Code: 
   #GlobalNavi {
background-color: black;
}

  #GlobalNavi ul li a {
color: gray;
}

  #GlobalNavi ul li:hover {
background-color: darkred;
}

 #GlobalNavi ul li ul  {
background-color: green;
}

  #GlobalNavi ul li:hover {
background-color: yellow;
}

  #GlobalNavi ul li ul li:hover a:hover {
background-color: black;
}

  #GlobalNavi ul li ul a:hover {
b+ackground-color: green;
}

  #GlobalNavi ul li ul li ul {
background-color: blue;
}
 
So wieder da und gleich mal ausprobiert.

Ähm, den CSS-Code hatte ich nicht angehängt, weil ich dachte der ist überflüssig da soweit alles funktionierte und nur die Sache mit dem Hintergrundbild war.

Allerdings habe ich inzwischen erkannt, dass man ohne den ganzen Code zusehen nicht einfach eine Kleinigkeit dazudichten kann, sorry!!

Deine Variante funktioniert zwar, allerdings nur wenn man ohne Hintergrundbilder für verschiedene Effekte arbeitet. Soll Heissen die gelbe Farbe - auf diesen Bereich bezieht sich zumindest mein Problem - wird bei deiner Variante für alle Bereiche (Quasie von oben bis unten) angezeigt.

Das was ich erreichen möchte ist:
1. Die erste Menüreihe (Ebene 0) erschein zunächste ohne Hintergrund, erst beim draufzeigen erscheint das HintergrundBild_1 und die Menüeinträge hierzu flappen nach unten (Ebene 1), dass funktioniert breits. Gehe ich zum ersten aufflappenden Menüeintrag der Ebene 1 sollte HinterGrundBild_1 durch Hintergrundbild_2 ausgetauscht werden, dass funktinierte halt nicht. Inzwischen habe ich es hinbekommen, dass das HinterGrundBild_1 ausgetauscht wird, ellerdings ist das HinterGrundBild_2 kürzer als das Erste, ob wohl es die gleichen Maße hat, sprich rechts wird vom letzten Buchstaben an alles abgeschnitte, wobei ich doch "repeat-x" eingetragen habe (ul.dropdown li:hover { position: relative; background: url(images/Sub_Press_1.png) 0 0 repeat-x; })
2. Zudem hat jeder Menüentrag (ab Ebene 1) ein Hintergrundbild_3, wenn hierzu weitere Menüeinträge vorhanden sind, und kein Hintergrundbild, wenn keine weiteren Menüeinträge vorhanden sind.
3. Ist ein HinterGrundBild_2 vorhanden, wird dieses durch HinterGrundBild_3 ausgetauscht sobald man mit der Maus drauf zeigt und sich das dazugehörige Menü (Ebene2) öffnet, dass funktiniert bereits.
4. Gehe ich zu einem Menüeintrag der Ebene 2 sollte HinterGrundBild_3 (der vorherigen Ebene) durch HintergrundBild_4 ausgetauscht werden, dass funktioniert ebenfalls nicht.

Ich weiss natürlich nicht, ob dass per CSS überhaupt umsetzbar ist, aber was weiss ich schon :P

Diesmal hänge ich gleich mal den CSS-Code an:
Wenn irgendjemandem langeweilig ist, bin ich auch für Hinweise offen, z. B. zu überflüssigen bzw. unsinnigen Einträgen. Denn ich habe diesen Code mit viel Recherche und bescheidenem Wissen erstellt.
Code: 
@charset "UTF-8";

/* Schrift und Zeilen
======================*/
ul.dropdown { font: bold 12px/normal Verdana, Arial, Helvetica, sans-serif; }
ul.dropdown li { color: #ffffff; text-align: center; line-height: 1.3em; vertical-align: middle; }

ul.dropdown ul { font: bold 11px/1em Tahoma, Geneva, Verdana, sans-serif; }
ul.dropdown ul li { text-align: left; }

ul.dropdown ul ul { font-weight: normal; }



/* Hintergründe 
================*/
ul.dropdown ul { background-color: #190F23; }
ul.dropdown ul *.dir1 { background: url(images/Arrow_Right.png) no-repeat; background-position: right;}
ul.dropdown ul ul *.dir2  { }
ul.dropdown ul ul ul *.dir3 { }



/* Abstände, Rahmen und Größen
===============================*/
/*Ebene 0*/
ul.dropdown, 
ul.dropdown *.dir0,
ul.dropdown *.dir1,
ul.dropdown *.dir2,
ul.dropdown *.non-dir     { width: 110%; padding: 2px 4px; }
ul.dropdown    li             { margin: 0 15px; }

ul.dropdown *.dir0,
ul.dropdown *.dir1,
ul.dropdown *.dir2,
ul.dropdown li a                { border-right-style: solid;
                                       border-left-style: solid;
                                       border-right-width: 1px;
                                       border-left-width: 1px;
                                       border-right-color: #190F23 /*#503070*/;
                                       border-left-color: #190F23 /*#503070*/;
                                      }    
                                            
/*Ebene 1*/
ul.dropdown ul   {    left: -6px; right: auto; 
                            width: 150px;
                            margin: 0; margin-top: -1px; 
                      }
ul.dropdown ul li   { margin: 0; }                            

ul.dropdown ul a,
ul.dropdown ul *.dir1   {    width: 139px;
                                    line-height: 25px;
                                    padding: 0 0 0 10px; margin: 0;  
                               }

/*Ebene 2*/
ul.dropdown ul ul { top: 0; right: auto; left: 100%; margin-top: 0; }

                                         
/*Positionen und Erscheinungen
===============================*/
ul.dropdown     {    position: relative; float: left; }

ul.dropdown,
ul.dropdown li,
ul.dropdown ul    { list-style: none; }

ul.dropdown li     { float: left; }

ul.dropdown ul    {    visibility: hidden; position: absolute;  top: 100%; left: 0; }
ul.dropdown ul li { float: none; }

ul.dropdown a         { display: block; }
/*Links und dergleichen
========================*/
ul.dropdown a:link,
ul.dropdown a:visited        { color: #ffffff; text-decoration: none; }
ul.dropdown a:hover         {    color: #BBAFD9; background-color: #260C2D; }
ul.dropdown a:active        {    background: #530350 url(images/Sub-Press_lila.png) 0 0 repeat-x !important; }
ul.dropdown a.dir1:active,
ul.dropdown a.dir2:active,
ul.dropdown a.dir3:active    {    background: #530350 url(images/Sub_Press_BG.png) no-repeat !important; }
                                                 
ul.dropdown a.dir0:hover,
ul.dropdown a.non-dir:hover,
ul.dropdown ul a.dir1:hover,
ul.dropdown ul ul a.dir2:hover    { color: #5483CF;    background: url(images/Sub_Press_0.png) 0 0 repeat-x; }

ul.dropdown ul a.dir1:hove {    color: #BBAFD9;
                                         background-color: #2A5298;
                                         background: url(images/Arrow_Right_hover.png) no-repeat;
                                         background-position: right;
                                    }
ul.dropdown li:hover      { position: relative; background: url(images/Sub_Press_1.png) 0 0 repeat-x; }
ul.dropdown li:hover > ul      { visibility: visible; }
ul.dropdown ul li:hover         { background-image: none; }


ul.dropdown li:hover > a.dir:hover     { color: #5483CF;    background-color: transparent;
                                                                              }
ul.dropdown ul li:hover > a.dir:hover     { color: #ffffff;    }
/*Indexierung
==============*/
ul.dropdown                     { z-index: 597; }
ul.dropdown ul                 { z-index: 598; }

ul.dropdown li:hover    { z-index: 599; }
Sorry, ich habe gerade in der Vorschau gesehen, dass der Code nicht so optimal übernommen wurde, ich hoffe das ist kein Problem.

Mal wieder Dank im Voraus!
Virgil
 
Zuletzt bearbeitet:
Damit man dein Beispiel nachvollziehen kann solltest du ein Onlinbeispiel erstellen.
Ohne die background-images zu sehen ist das müßig.
So viel Zeit will kaum jemand investieren.
Mach es den Interessierten so einfach wie möglich. Dann wirst du sicher Hilfe in der Forenlandshaft finden.
 
Kaum einer wird sich ein Archiv downloaden, das er nicht kennt.
Außerdem ist das auch nicht "einfach".
Mach es, wie neuroleptika vorgeschlagen hat. Setze die Site online und gib uns einen Link dahin.
 
Eiieiiei, Paranoia läßt grüßen!!

Hm, wenn einer einen Tip hat wie ich die in der Rar-Datei bereitgestellten Daten online, ohne eigene Webside, stellen kann, würde ich mich über Hinweise und Ideen freuen!! Ich bin nämlich derzeit nur dabei die Seite offline fertig zu stellen bevor sie ins Netz kommt! Zumal ich mich mit Webhostern, Providern etc. noch gar nicht beschäftigt habe.

Virgil
 
Du meinst, Du möchtest die aktuelle Seite besonders markieren?

Das musst Du serverseitig erledigen. Einfach der aktuellen Seite eine andere Klasse geben und die wie gewünscht stylen. CSS kennt einen Zustand wie die "aktuelle Seite" nicht.
 
Ähm, nein *grübel*

Da haben wir uns wohl missverstanden, sorry!

Also:

1. Die erste Menüreihe (Ebene 0) erschein zunächste ohne Hintergrund, erst beim draufzeigen erscheint das HintergrundBild_1 und die Menüeinträge hierzu flappen nach unten (Ebene 1), dass funktioniert breits. Gehe ich zum ersten aufflappenden Menüeintrag der Ebene 1 sollte HinterGrundBild_1 durch Hintergrundbild_2 ausgetauscht werden, dass funktinierte halt nicht. Inzwischen habe ich es hinbekommen, dass das HinterGrundBild_1 ausgetauscht wird, ellerdings ist das HinterGrundBild_2 kürzer als das Erste, ob wohl es die gleichen Maße hat, sprich rechts wird vom letzten Buchstaben an alles abgeschnitte, wobei ich doch "repeat-x" eingetragen habe (ul.dropdown li:hover { position: relative; background: url(images/Sub_Press_1.png) 0 0 repeat-x; })
2. Zudem hat jeder Menüentrag (ab Ebene 1) ein Hintergrundbild_3, wenn hierzu weitere Menüeinträge vorhanden sind, und kein Hintergrundbild, wenn keine weiteren Menüeinträge vorhanden sind.
3. Ist ein HinterGrundBild_2 vorhanden, wird dieses durch HinterGrundBild_3 ausgetauscht sobald man mit der Maus drauf zeigt und sich das dazugehörige Menü (Ebene2) öffnet, dass funktiniert bereits.
4. Gehe ich zu einem Menüeintrag der Ebene 2 sollte HinterGrundBild_3 (der vorherigen Ebene) durch HintergrundBild_4 ausgetauscht werden, dass funktioniert ebenfalls nicht.
Zum Vergrößern anklicken....
Dort schrieb ich, was bereits funktioniert und was ich gern dazu hätte bzw. noch nicht richtig funktioniert. So wie es bereits funktioniert ist hier DropDown zusehen. Bis auf eben Punkt 1. Die Sache mit dem abgeschnittenem Hintergrundbild und Punkt 4.

Sorry, falls ich mich zuvor irgendwie unverständlich ausgedrückt hatte!!

Edit: Gut das diese Fehler zunächst noch nichts mit meinem Problem zu tun haben :P
Aber danke für den Hinweis!
 
Zuletzt bearbeitet:
Wie von Loon3y schon angemerkt enthält das html Fehler.
Darum habe ich mir nur das fehlerfreie Element #navi seperat angesehen (alle anderenElemnte gelöscht).

Welcher Menüpunkt bei welchem :hover welche Farbe bekommen soll habe ich nicht ganz verstanden.
Ich glaube mit diesem css habe ich sämtliche Varianten erwischt:
Code: 
ul {
list-style: none;
}

  #navi {
background-color: black;
margin: 0;
padding:0;
}

  #navi:after {
display: block;
content:".";
clear: left;
height: 0;
visibility: hidden;
}


  #navi {
margin: 0;
padding: 0;
}

  #navi li {
float: left;

}

  #navi li a {
display: block;
color: darkgray;
padding: 0 20px;
}

  #navi ul li:hover {
display: block;
background-color: darkred;
position: relative;
}

  #navi li ul  {
position: absolute;
background-color: green;
z-index: 1;
display: none;
margin: 0;
padding: 0
}

  #navi li:hover ul  {
display: block;
}

  #navi li:hover ul li ul {
display: none;
}

  #navi li:hover ul li:hover ul {
display: block;
}

  #navi li:hover a {
background-color: yellow;
display: block;
}

 #navi li:hover li a {
background-color: blue;
display: block;
padding: 0;
}

  #navi li:hover a:hover {
background-color: pink;
display: block;
}

  #navi li ul li:hover a {
background-color: green;
}

  #navi li ul li:hover li a {
background-color: blue;
}

  #navi li ul:hover li:hover li a {
background-color: gray;
}

  #navi li ul li:hover a:hover {
background-color: black;
}



  #navi li ul li:hover li:hover a {
background-color: darkred;
}


  #navi li ul li a {
width: 10em;
}



  #navi li ul li {
float: none;
}

  #navi li ul li ul {
background-color: blue;
right: -9.5em;
top: 0;

}
Für den IE7 noch
Code: 
<!--[if lt IE 8]>
<style>
/* layout IE 5.5-7 */ 
  #navi {
zoom: 1;
}
</style>
Weitere Anpassungen für IE6 und darunter müßten noch eingebaut werden.
 
Zuletzt bearbeitet:
Hui, ich werd mich dann gleich mal ran machen!

Schon mal Dank! Und gleich eine Frage: Für was steht bzw. was bedeutet content:".";
Und stimmt, ich habe bisher nur auf FireFox geachtet. Die Sachen mir dem IE oder auch andere kommen im Nachhinein, wenn das Menü und der Rest fertig ist. Ist es wirklich so, dass man sämtliche IE-Versionen beachten sollte?

Da ich mit den Farben auch nicht weiter verwirren wollte, dachte ich es ist einfacher wenn ich von Bild_1, Bild_2 etc spreche, ansonsten sind die Farben, wie sie in der CSS verankert sind, für mich selbst verwirrend, da ich nicht wirklich viel Erfahrungen habe. Daher bin ich immer viel am Testen bis ich nicht mehr weiterkomme!

Ich meld mich wieder, wenn ich deine Variante durch und verstanden habe.

Bis dahin!
ViRGiL

Edit:
So ich bin nun schon seit einer Weile fleißig am rumprobieren und muss sagen, dass Ganze zu verstehen ist recht schwer. Ich weiss zum größten Teil welche CSS-Zeile diese oder jene Farbe hervorbringt, allerdings kann ich das Ganze nicht so weiterentwickeln wie ich es gern hätte.

Vorweg, deine Variante funktioniert genauso wie ich es mir vorstelle!! Jedoch nur so lange ich keine HintergrundBilder verwende, wie ich sie auf der Testseite DropDown habe.

Und hier hänge ich auch wieder fest. Will ich die Background-Farben durch Background-Bilder ersetzen bzw. ergänzen werden einige der HintergrundBilder nicht angezeigt, stattdessesen erscheint die Background-Farbe oder alles ist im Eimer.

An dieser Stelle würde ich mich freuen, wenn du deine Variante mal mit Background-image statt Background-Color fütterst. D. h., genau wie auf der Testseite DropDown , Bilder einfügst.

An hand deiner Variante müssten folgende Farben durch ein Bild ersetzt werden:

pink (Die Farbe für die die ersten Links (hover)) --> gelb (die Farbe die pink ersetzen soll)

blau (Die Farbe die in deiner Variante die ersten aufgegangene Menüeinträge zeigt) --> schwarz (Die Farbe die den Hover-effekt für die ersten aufgegangenen Menüeintragen darstellt) --> grün (die Farbe die dann schwarz ersetzt sobald man auf den Menüeintrag geht der neu aufgegangen ist <----- Das ist eigentlich auch der Punkt, den ich die ganze Zeit versucht habe selbst hinzubekommen und weswegen ich überhaupt hier bin)

So, ich hoffe ich konnte es soweit verständlich erklären auch wenn ich langsam nerve :roll:
Es wäre vermutlich wesentlich einfacher und würde schneller gelöst, wenn einer hinter mir stehen würde, der weiss was er macht und dem ich es live zeigen könnte, aber da dass leider nicht der Fall ist ...
 
Zuletzt bearbeitet:
Ich würde 3 Varianten von arrow_right.png erstellen welche die jeweilige Hintergrundfarbe schon enthält.

Übe css nicht mit einem Fehlerhaften html.
Z.B. im Opera 9.63 sind deine Menüpunkte nicht zu sehen.
Am besten du schreibst eine neues html-Dokument die ersteinmal nur die Verschachtelte Liste enthält.

content:"."; fügt ein inhalt per css ein.
Ich habe ihn zum clearen verwendet.
Einschließen von Floats ohne zusätzliches Markup - easyclear

Ist es wirklich so, dass man sämtliche IE-Versionen beachten sollte?
Zum Vergrößern anklicken....
Viele IE-Nutzer sind die Updatemuffel. Der IE6 ist immernoch sehr verbreitet.
Bis Vers.7 unterscheiden sich die Versionen sehr von anderen Browsern.
 
3 Varianten von arrow_right habe ich bereits, wovon ich zwei bereits erfolgreich einsetze und an der dritten arbeiten wir ja bereits :smile:

Fehler sind behoben, bis auf die Warnung bei der ich im Moment nocht nicht weiss wie ich diese beheben soll, aber ich vermute die ist zunächst nicht weiter schlimm!!

Ich frage mich gerade, warum ich eine so lange CSS-Datei fürs Menü habe wobei deine doch sehr viel kürzer ist und nach dem ersten Anschein das relativ Gleiche macht *grübel* :oops:

Edit: Inzwischen habe ich es endlich hinbekommen! Mal abgesehen davon, dass jetzt die beiden letzten Menüebenen gleichzeitig aufflappen und ich noch nicht weiss was ich in der CSS ändern bzw. ergänzen muss, damit dies nicht geschieht, sind nun nur noch ein paar Feinheiten, wie Farben, Positionen, Größen, Abstände etc. einzustellen, dass dürfte ich auch noch hinbekommen.

An dieser Stelle schon mal besten Dank für Hilfestellungen, und ich werd mich sicherlich nochmal melden wenns endgültig fertig ist. Eventuell auch früher, wenn ich das mit den beiden letzten Menüebenen doch nicht hinbekommen sollte ;)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben