Autor |
Nachricht |
Ulinne
Threadersteller
Dabei seit: 11.09.2008
Ort: Neuenkirchen
Alter: 76
Geschlecht:
|
Verfasst Mo 11.01.2010 13:20
Titel Dreamweaver CS3 - Horizontales Menu (SpryAssets) Hintergrund |
|
|
Ich habe folgendes Problem:
Wie kann ich es erreichen, dass in einem horizontalen SpryAssets-Menu (DW CS3) bei den geöffneten Seiten eines Submenus der Hintergrund des dazugehörigen Haupt-Menu-Punktes in einer anderen Farbe als die übrigen Haupt-Menu-Punkte erscheint, so dass man immer weiß, in welchem Submenu man sich gerade befindet?
Welche Einstellungen muss ich dazu - und vor allem *wo* - vornehmen?
Muss/kann man dazu in der .js-Datei etwas verändern?
Falls ja: wo genau?
Farbänderungs-Versuche in der dazugehörigen SpryMenuBarHorizontal.css-Datei (a:focus) haben bisher nix gebracht.
Zuletzt bearbeitet von Ulinne am Mo 11.01.2010 13:20, insgesamt 1-mal bearbeitet
|
|
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Di 12.01.2010 13:04
Titel
|
|
|
Moin,
da wollte sich wohl keiner deinem Problem annehmen!
Also das Spry-Framework macht nichts anderes als eine Listennavigation so zu formatieren (Stylesheet: SpryMenuBarHorizontal.css), wie es die meisten Web Entwickler von Hand machen würde, whrscheinlich etwas schlanker, aber dafür werden nicht so viele Sonderfälle mit bedacht. - Lange Rede, kurzer Sinn, zumindest verhält sich die Adobe Navigation genauso, die alle anderen Listennavigation, und zwar nach dem Box-Modell (Siehe: http://www.html-seminar.de/box-modell.htm) und der Inhalt der Box wird beim Öffnen des Menüs immer mehr erweitert, so dass wenn du auf einem Unterpunkt immer noch automatisch auch auf dem Überpunkt (Elternelement) bist. Das bedeutet, dass du dein Ziel auch mit etwas CSS erzielst.
Hier ein Beispiel (wenn du die Namen der Klassen nicht geändert hast):
Code: | ul.MenuBarHorizontal li:hover a {
background-color:grey; /* Hintergrundfarbe des Elternelements */
}
ul.MenuBarHorizontal li:hover ul li a {
background:none; /* Hintergrundfarbe löschen für Kinderelemente */
} |
Erläuterung Pseudo-Klassen (:hover, :focus): http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active
Wenn du fragen hast, antworte ich gern.
Gruß Daniel
Zuletzt bearbeitet von danielkussin am Di 12.01.2010 13:06, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Ulinne
Threadersteller
Dabei seit: 11.09.2008
Ort: Neuenkirchen
Alter: 76
Geschlecht:
|
Verfasst Di 12.01.2010 13:28
Titel
|
|
|
Moin Daniel,
nett, dass du mir antwortest.
Ich versuche mal, dir hier einen Screen-Ausschnitt anzuhängen, damit du weißt, was ich meine.
Darauf ist zu sehen, dass eine Seite des Untermenus zu "Angebot" geöffnet ist. Nun hätte ich gern, dass für den Fall, dass Unterseiten eines Hauptmenu-Punktes geöffnet sind, die Hintergrundfarbe im Hauptmenu (in diesem Fall also "Angebot") in dem dunkleren Grün erscheint.
Auf dem (hoffentlich erscheinenden) Bild ist das nämlich noch *nicht* so ...
In der CSS-Datei (SpryMenuBarHorizontal.css) hab ich die Namen der Klassen nicht geändert, nur die Farbe in dem Bereich, in dem auch a:focus drüber angegeben ist ...
Nun verstehe ich nicht ganz - muss ich da noch etwas hinzufügen?
Lieben Gruß
Ulrike
Zuletzt bearbeitet von Ulinne am Di 12.01.2010 13:33, insgesamt 2-mal bearbeitet
|
|
|
|
|
Ulinne
Threadersteller
Dabei seit: 11.09.2008
Ort: Neuenkirchen
Alter: 76
Geschlecht:
|
Verfasst Di 12.01.2010 13:37
Titel
|
|
|
Hier nochmal ein Bild mit ausgeklapptem Submenu. Die Verlinkungen auf der Seite selbst habe ich per Hand eingesetzt ...
So wie im Hauptmenu die Hintergrundfarbe ist, sollte sie auch bleiben, wenn eine der Submenu-Seiten geöffnet ist.
Geht das irgendwie?
Zuletzt bearbeitet von Ulinne am Di 12.01.2010 13:38, insgesamt 1-mal bearbeitet
|
|
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Di 12.01.2010 14:12
Titel
|
|
|
Hi,
kein Problem! - Als erstes legst du wie folgt eine CSS-Klasse "active" an, und dann löscht du sie wieder für alle nachfolgenden Elemente:
Code: | ul.MenuBarHorizontal li.active a {
background-color:#88B282;
}
ul.MenuBarHorizontal li.active li a {
background:none;
} |
Und dann fügst du dem jeweiligen Elternelement die active-Klasse hinzu:
Code: | <ul id="MenuBar1" class="MenuBarHorizontal">
<li class="active"><a class="MenuBarItemSubmenu" href="#">Element 1</a>
<ul>
<li><a href="#">Element 1.1</a></li>
<li><a href="#">Element 1.2</a></li>
<li><a href="#">Element 1.3</a></li>
</ul>
</li>
<li><a href="#">Element 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Element 3.1</a>
<ul>
<li><a href="#">Element 3.1.1</a></li>
<li><a href="#">Element 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Element 3.2</a></li>
<li><a href="#">Element 3.3</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul> |
Das Ganze kannst du auch mit JavaScript (z.B. jQuery-Framework) dynamisch machen lassen, allerdings denke ich für eine kleine statische Website ist die "händische" Lösung, die wesentlich einfachere.
Gruß Daniel
|
|
|
|
|
Ulinne
Threadersteller
Dabei seit: 11.09.2008
Ort: Neuenkirchen
Alter: 76
Geschlecht:
|
Verfasst Di 12.01.2010 14:33
Titel
|
|
|
Huuu Daniel, das scheint mir immer noch recht schwierig. Ich bin eigentlich nicht die große "Code-Fummlerin". *grins*
Darf ich dir die entsprechende Spry-CSS-Datei einfach mal zuschicken, und du bastelst mir das Richtige da rein?
Wenn ich es dann einmal vor Augen habe, kann ich es auch bei den übrigen WebSites so machen. (Sind insgesamt 3 für diesen Kunden.)
Hoffnungsvoll
Ulrike
|
|
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Di 12.01.2010 14:40
Titel
|
|
|
Dann mail mir mal am Besten alle Dateien (inkl. html). E-Mail steht im Profil!
Gruß Daniel
|
|
|
|
|
|
|
|
Ähnliche Themen |
[html]horizontales text menu
Dreamweaver Menu - wie krieg ich DAS hin?
Dreamweaver Entwurfsansicht zeigt keinen Hintergrund
Horizontales Aufklappmenü
horizontales Scrolling
Horizontales Aufklappmenü
|
|