Navigation(-Buttons) im CMS erstellen?!
Navigation(-Buttons) im CMS erstellen?!
Hi Freunde,
so, ich habe mal wieder ein kleines "Problem".
Und zwar möchte ich für ein Projekt eine Navigation umsetzen, glaube aber, dass es recht schwierig wird diese mit phpwcms umzusetzen.
Zum einfacheren Verständnis hier erst einmal ein Screenshot.
Oberes Teilbild im Normalzustand, das untere bei Klick auf einen Naviagtionspunkt.
Das Problem an der Sache, sind die unterschiedlich langen Buttons und das im Grunde jeder Button einen eigenen Hintergrund (Wellenlinie) hat.
Weiß jemand eine Umsetzungsmöglichkeit integriert im CMS? Oder werde ich diese Navi "extern und solid" bauen müssen.
Danke & Grüße
13
so, ich habe mal wieder ein kleines "Problem".
Und zwar möchte ich für ein Projekt eine Navigation umsetzen, glaube aber, dass es recht schwierig wird diese mit phpwcms umzusetzen.
Zum einfacheren Verständnis hier erst einmal ein Screenshot.
Oberes Teilbild im Normalzustand, das untere bei Klick auf einen Naviagtionspunkt.
Das Problem an der Sache, sind die unterschiedlich langen Buttons und das im Grunde jeder Button einen eigenen Hintergrund (Wellenlinie) hat.
Weiß jemand eine Umsetzungsmöglichkeit integriert im CMS? Oder werde ich diese Navi "extern und solid" bauen müssen.
Danke & Grüße
13
Re: Navigation(-Buttons) im CMS erstellen?!
Nichts einfacher als das!
Hier lesen: http://www.phpwcms-howto.de/wiki/doku.p ... v_horiz_dd
Deine Navi hat keine Flyouts, also wird die Navi in der Tiefe begrenzt.
Jeder einzelne Menüpunkt hat eine eigene li-ID, daher ist er auch stylebar - einschließlich Hintergrund usw....
Hier lesen: http://www.phpwcms-howto.de/wiki/doku.p ... v_horiz_dd
Deine Navi hat keine Flyouts, also wird die Navi in der Tiefe begrenzt.
Jeder einzelne Menüpunkt hat eine eigene li-ID, daher ist er auch stylebar - einschließlich Hintergrund usw....
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Re: Navigation(-Buttons) im CMS erstellen?!
.... oder wenn keine Untermenüs verlangt werden reicht die NAV_LIST_UL (CSS) völlig aus.
Schaue bitte einmal bei beiden NAVIs auf die Klassen die mitgegeben werden bei den verschiedenen Zuständen.
Ich verstehe auch nicht was an einer Navi in phpwcms schwieriger sein soll als an einer extern zusammengeschraubten. (Außer es sind fertige Klassen vorhanden, die eine ganz bestimmte Ansprache erfordern).
Knut
Schaue bitte einmal bei beiden NAVIs auf die Klassen die mitgegeben werden bei den verschiedenen Zuständen.
Ich verstehe auch nicht was an einer Navi in phpwcms schwieriger sein soll als an einer extern zusammengeschraubten. (Außer es sind fertige Klassen vorhanden, die eine ganz bestimmte Ansprache erfordern).
Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Re: Navigation(-Buttons) im CMS erstellen?!
Danke für Eure Antworten!
Mit der NAV Hor DD habe ich ja schon Erfahrungen.
Ist übrigens nur diese eine Ebene.
Aber wie mache ich das mit dem Hintergrund. Jeder Button hat ja ein eignen Bildhintergrund und durch die Wortlänge eine eigene Breite.
Die Breite ist ja nicht das Problem, aber der geschwungene Bildhintergrund, welche von Button zu Button unterschiedlich ist.
Versteht ihr was ich meine?
Muss ich da nicht jeden Menüpunkt ein eigenes Bild zuweisen?
(Der Hintergrundwechsel bei "Klick", also dann im aktivem Zustand ist nicht das Problem!)
Ich will eigentlich nur PHPWCMS interne Navis verwenden. Bin bis jetzt auch immer mit klargekommen, aber hatte halt noch nie "verschiedene" Bildhintergründe im Button.
Grüße
13
Mit der NAV Hor DD habe ich ja schon Erfahrungen.
Ist übrigens nur diese eine Ebene.
Aber wie mache ich das mit dem Hintergrund. Jeder Button hat ja ein eignen Bildhintergrund und durch die Wortlänge eine eigene Breite.
Die Breite ist ja nicht das Problem, aber der geschwungene Bildhintergrund, welche von Button zu Button unterschiedlich ist.
Versteht ihr was ich meine?
Muss ich da nicht jeden Menüpunkt ein eigenes Bild zuweisen?
(Der Hintergrundwechsel bei "Klick", also dann im aktivem Zustand ist nicht das Problem!)
Ich will eigentlich nur PHPWCMS interne Navis verwenden. Bin bis jetzt auch immer mit klargekommen, aber hatte halt noch nie "verschiedene" Bildhintergründe im Button.
Grüße
13
Re: Navigation(-Buttons) im CMS erstellen?!
mach erstmal die Navi, dann siehst Du im Quellcode sowas wie
Das CSS wäre dann sowas wie
Das hier ist aber nur eine Prinzipskizze
Die width kommt dann eher in die a- Anweisung - nee, doch nicht... probier mal
Habe eben mal schnell selber probiert:
Sowas in der Art sollte funktionieren ...
Code: Select all
li class="sub_no" id="cat-id_71"><a href="fb-intern.phtml" class="horiz_enclose">FB-Intern</a></li>
Code: Select all
li #cat-id_71{background:transparent url(/pics/welle1.png) 0 0 no-repeat;width:4em;}
usw
Die width kommt dann eher in die a- Anweisung - nee, doch nicht... probier mal
Habe eben mal schnell selber probiert:
Code: Select all
#pmenu li#cat-id_50{width:150px;font-weight:bold;color:#ffffff;background:transparent url(/pics/welle1.png) 0 0 no-repeat;}
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Re: Navigation(-Buttons) im CMS erstellen?!
Und? Geht was?
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Re: Navigation(-Buttons) im CMS erstellen?!
Dauert noch n bissl ... Muss noch andere Sites vorher finishen
Ich poschte dann aber!
Grüßle 13
Ich poschte dann aber!
Grüßle 13
Re: Navigation(-Buttons) im CMS erstellen?!
Hallo,
also ich habe mal ein wenig rumprobiert und dazu die {NAV_HORI_DD:ID} verwendet.
Läuft soweit, aber das mit der CSS Anpasung auf einzelne, das läuft irgendwie nicht.
Wo muss ich die Änderung denn im CSS einfügen?
Ich habe das mal unterhalb von #pmenu gemacht.
Aber das interessiert nicht?!?
also ich habe mal ein wenig rumprobiert und dazu die {NAV_HORI_DD:ID} verwendet.
Läuft soweit, aber das mit der CSS Anpasung auf einzelne, das läuft irgendwie nicht.
Wo muss ich die Änderung denn im CSS einfügen?
Ich habe das mal unterhalb von #pmenu gemacht.
Aber das interessiert nicht?!?
Code: Select all
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)htmlis
available at http://www.cssplay.co.uk/menus/simple_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
08.11.07 KH (flip-flop) Enhanced: Start[ID] {NAV_HORIZ_DD:ID}
http://www.phpwcms.de/forum/viewtopic.php?p=94688#94688
(http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743)
=================================================================== */
/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
/* margin hinzugefuegt - ausschließlich fuer diese demo - und ein "relative position" mit einem hohen z-index Wert um sicherzustellen dass das Menue ueber jedem nachfolgenden Element aufklappt. */
#menu_container {
margin: 0 0 100px 0; /* 100px only for testing - default = 0 */
position: relative;
width: 735px;
height: 21px; /* ORG 20px */
z-index: 1000;
}
/* Get rid of the margin, padding and bullets in the unordered lists */
/* margin und padding auf 0, Aufzählungszeichen der unsortierten Liste unterdruecken */
#pmenu, #pmenu ul {
padding: 0;
margin: 0;
list-style-type: none;
}
/* Set up the link size, color and borders */
/* Einstellen der Groessen, Farben und Rahmen fuer die Links */
#pmenu a, #pmenu a:visited {
display: block;
width: 120px;
font-size: 11px;
color: #fff;
height: 21px; /* ORG 25px */
line-height: 20px; /* ORG 24px */
text-decoration: none;
text-indent: 5px;
border: 1px solid #fff;
border-width: 1px 0 1px 1px;
}
/* Einstellungen für die einzelnen Navigationspunkte */
#pmenu #cat-id_4{width:150px;font-weight:bold;color:#ff3300;background:transparent url(/pics/welle1.png) 0 0 no-repeat;}
/* Set up the sub level borders */
/* Einstellen der Rahmen fuer die Unterebenen */
#pmenu li ul li a, #pmenu li ul li a:visited {
border-width: 0 1px 1px 1px;
}
#pmenu li a.horiz_enclose, #pmenu li a.horiz_enclose:visited {
border-width: 1px;
}
/* Set up the list items */
/* Einstellen der Listeneinzelheiten */
#pmenu li {
float: left;
list-style-type: none;
background: #7484ad;
}
/* For Non-IE browsers and IE7 */
/* Fuer alle nicht IE + IE7 */
#pmenu li:hover {
position: relative;
}
/* Make the hovered list color persist */
/* Festlegen der Farbe fuer hover li */
#pmenu li:hover > a {
background: #D1D5DF; /* ORG #dfd7ca; */
color: #BF4300; /* ORG #c00; */
}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif (leer.gif) is for IE to work */
/* Einstellen der Unterebenenlisten mit einer absoluten Positionierung fuer die FlyOuts und dem "Ueberfahren-Abstand"
Das transparente gif (leer.gif) ist fuer den IE gedacht */
#pmenu li ul {
display: none;
}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
/* Fuer alle nicht-IE + IE7 wird die Unterebenenliste sichtbar bei einem Ueberfahren (hover) */
#pmenu li:hover > ul {
display: block;
position: absolute;
top: -7px; /* ORG -11px */
left: 80px;
padding: 6px 30px 30px 30px; /* ORG padding: 10px */
background:transparent url(../../img/article/leer.gif);
width: 120px;
}
/* Position the first sub level beneath the top level links */
/* Positioniere die erste Unterebene nach dem Topebenenlink */
#pmenu > li:hover > ul {
left: -30px;
top: 16px;
}
/* get rid of the table */
/* Tabelle neu einstellen */
#pmenu table {
position: absolute;
border-collapse: collapse;
top: 0;
left: 0;
z-index: 1000;
font-size: 1em;
}
/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
/* Fuer den IE5 und IE6 gebe dem hover-Link eine relative Position und wechsele die Hinter- und Vordergrundfarbe. Das ist notwendig damit der IE angestoszen wird die Unterebenen auszugeben */
* html #pmenu li a:hover {
position: relative;
background: #D1D5DF; /* ORG #dfd7ca; */
color: #c00;
}
/* For accessibility of the top level menu when tabbing */
/* Fuer die Aktivierung der ersten Ebene, wenn im Menue geblättert wird */
#pmenu li a:active, #pmenu li a:focus {
background: #dfd7ca;
color: #BF4300; /* ORG #c00; */
}
/* Set up the pointers for the sub level indication */
/* Einstellen der Symbole/Pfeile für die Unterebenenanzeige */
#pmenu li.fly_ul {
background: #7484ad url(../../img/symbols/klapp_zu.gif) no-repeat 107px center;
/* background: #7484ad url(../../img/article/navi/fly.gif) no-repeat right center;
*/
}
#pmenu li.drop_ul {
background: #7484ad url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
/* background: #7484ad url(../../img/article/navi/drop.gif) no-repeat right center;
*/
}
/* KH: Active Path output */
/* KH: Ausgabe des aktiven Pfads */
#pmenu li.act_path {
background:#4161AF url(../../img/symbols/klapp_auf.gif) no-repeat 105px center;
/* background:#cccccc url(../../img/article/navi/drop.gif) no-repeat right center;
*/
}
/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */
/* change the drop down levels from display:none; to visibility:hidden; */
/* Dies ist fuer den IE5.5 und IE6 notwendig um die Unterebenen anzuzeigen */
/* Wechselt die Unterebenen von display:none; nach visibility:hidden; */
* html #pmenu li ul {
visibility: hidden;
display: block;
position: absolute;
top: -11px;
left: 80px;
padding: 10px 30px 30px 30px;
background: transparent url(../../img/article/leer.gif);
}
/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul {
visibility: hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul {
visibility: hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul {
visibility: hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility: hidden;
}
/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility: visible;
left: -30px; /* (IE5 ONLY) */
top: 10px; /* ORG 14px (IE5 ONLY) */
lef\t: -31px; /* (IE6 ONLY) */
to\p: 11px; /* ORG 15px (IE6 ONLY) */
}
/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul {
visibility: visible;
top: -11px; /* ORG -11px (IE6 ONLY) */
left: 80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */
Re: Navigation(-Buttons) im CMS erstellen?!
Die IDs in der Navi hast du aktiviert?
Knut
Code: Select all
// IDs for every li ======= If you need the ID class, please uncomment/comment
// IDs fuer jedes li ======= Wenn sie die ID Klassen benoetigen, bitte dekommentieren/kommentieren
// $l = str_repeat(' ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';
$l = str_repeat(' ', $counter+1) . '<li'. $class . '>';
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Re: Navigation(-Buttons) im CMS erstellen?!
Ich hätte schwören können ich habe es umgestellt. Aber natürlich war dem nicht so.
Danke Knut!
Jetzt läuft es:
Aber wie schaut das mit Hover und active und visited aus?
So stimmt es irgendwie nicht!?
Visited muss gleich dem normalzustand sein!?
Danke Knut!
Jetzt läuft es:
Code: Select all
#pmenu #cat-id_4{
width:154px;
height:30px;
font-weight:bold;
background:transparent url(../../picture/navigation/welleid4.png) 0 0 no-repeat;}
Code: Select all
#pmenu li:hover > a {
background: #FFCC00; /* ORG #dfd7ca; */
color: #BF4300; /* ORG #c00; *
}
#pmenu li:hover > a #cat-id_11{
width:65px;
height:30px;
font-weight:bold;
background:transparent url(../../picture/navigation/welleid11.png) 0 0 no-repeat;}
Visited muss gleich dem normalzustand sein!?
Re: Navigation(-Buttons) im CMS erstellen?!
HILFEEEEEE! Ich komme nicht weiter!
Ich habe jetzt mal das Forum durchstöbert und gesucht, auch n wenig was gefunden, erhalte aber keine Reaktion im CSS.
Ich suche immernoch die Möglichkeit, den einzelnen IDs die verschiedenen Zustände active und hover zuzuweisen.
Ich erhalte aber keinerlei Reaktion, außer das es die Navigation zerhaut.
Das ist die momentane Aussgangssituation.
Das habe ich versucht für den "hover" einzubauen. Geht aber nicht.
Bleibt der Rest in der CSS erhalten? Oder muss ich #pmenu, #pmenu ul , #pmenu a, #pmenu a:visited, #pmenu li:hover > a , #pmenu li:hover, ... entfernen oder anpassen?
Hoffe auf Hilfe!
Danke & Grüße
13
Ich habe jetzt mal das Forum durchstöbert und gesucht, auch n wenig was gefunden, erhalte aber keine Reaktion im CSS.
Ich suche immernoch die Möglichkeit, den einzelnen IDs die verschiedenen Zustände active und hover zuzuweisen.
Ich erhalte aber keinerlei Reaktion, außer das es die Navigation zerhaut.
Code: Select all
#pmenu #cat-id_4{
width:154px;
height:30px;
margin: 0 1px 0 0;
font-weight:bold;
background:transparent url(../../picture/navigation/welleid4.png) 0 0 no-repeat;}
Code: Select all
#pmenu #cat-id_4 a
#pmenu #cat-id_4 a: hover{
width:154px;
height:50px;
margin: 0 1px 0 0;
font-weight:bold;
background:transparent url(../../picture/navigation/welleid4a.png) 0 0 no-repeat;}
Bleibt der Rest in der CSS erhalten? Oder muss ich #pmenu, #pmenu ul , #pmenu a, #pmenu a:visited, #pmenu li:hover > a , #pmenu li:hover, ... entfernen oder anpassen?
Hoffe auf Hilfe!
Danke & Grüße
13
Re: Navigation(-Buttons) im CMS erstellen?!
Mach mal das Leerzeichen zwischen a: und hover raus.
Code: Select all
a:hover
Re: Navigation(-Buttons) im CMS erstellen?!
hallo top,
bringt leider nichts!
Trotzdem Danke!
Grüße
13
bringt leider nichts!
Trotzdem Danke!
Grüße
13
Re: Navigation(-Buttons) im CMS erstellen?!
Da springt mir gerade noch ein Fehler ins Auge. Wenn du Eigenschaften verschiedenen Klassen oder IDs zuordnen möchtest, müssen die durch ein Komma getrennt sein. (Der Absatz ist keine Trennung. Zur Übersichtlichkeit aber trotzdem sinnvoll.)
Code: Select all
#pmenu #cat-id_4 a,
#pmenu #cat-id_4 a:hover {
Re: Navigation(-Buttons) im CMS erstellen?!
Teste bitte das einmal an: Navigation: Hintergrund ID basiert
Id basiert, eine Zeile, für
oder/und
Wobei ich die NAV_LIST_UL verwenden würde.
Knut
Id basiert, eine Zeile, für
Code: Select all
<div id="pmenu">{NAV_HORIZ_DD:0,1}</div>
Code: Select all
<div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div>
Code: Select all
/* ==================================================================
18.04.10 KH (flip-flop) http://planmatrix.de
Simple ID-based navigation for one row
<div id="pmenu">{NAV_LIST_UL:,0,1,active,act_path,cat}</div>
=================================================================== */
/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
/* margin hinzugefuegt - ausschließlich fuer diese demo - und ein "relative position" mit einem hohen z-index Wert um sicherzustellen dass das Menue ueber jedem nachfolgenden Element aufklappt. */
#menu_container {
margin: 0 0 100px 0; /* 100px only for testing - default = 0 */
position: relative;
width: 735px;
height: 21px; /* ORG 20px */
z-index: 1000;
}
/* Get rid of the margin, padding and bullets in the unordered lists */
/* margin und padding auf 0, Aufzählungszeichen der unsortierten Liste unterdruecken */
#pmenu, #pmenu ul {
padding: 0;
margin: 0;
list-style-type: none;
}
/* Set up the link size, color and borders */
/* Einstellen der Groessen, Farben und Rahmen fuer die Links */
#pmenu a, #pmenu a:visited {
display: block;
/* width: 120px; */
font-size: 11px;
color: #fff;
height: 21px; /* ORG 25px */
line-height: 20px; /* ORG 24px */
text-decoration: none;
text-indent: 5px;
border: 1px solid #fff;
border-width: 1px 0 1px 1px;
font-weight:bold;
}
/* BASE ===================================== */
/* Einstellungen für die einzelnen Navigationspunkte */
#pmenu #cat-id_1 a, /* NAV_HORIZ_DD */
#pmenu #li_cat_1 a { /* NAV_LIST_UL */
color: #444;
width:110px;
background: gold url(../img/custom/nav/nav01.png) 0 0 no-repeat;
}
#pmenu #cat-id_2 a,
#pmenu #li_cat_2 a {
width:160px;
background: green url(../img/custom/nav/nav02.png) 0 0 no-repeat;
}
#pmenu #cat-id_3 a,
#pmenu #li_cat_3 a {
width:130px;
background: red url(../img/custom/nav/nav03.png) 0 0 no-repeat;
}
#pmenu #cat-id_4 a,
#pmenu #li_cat_4 a {
width:150px;
background: blue url(../img/custom/nav/nav04.png) 0 0 no-repeat;
}
#pmenu #cat-id_13 a,
#pmenu #li_cat_13 a {
width:120px;
background: peru url(../img/custom/nav/nav13.png) 0 0 no-repeat;
}
/* ACTIVE ===================================== */
/* Aktive Navigationspunkte */
#pmenu #cat-id_1.act_path a,
#pmenu #li_cat_1.act_path a {
color: #444;
background: palegoldenrod url(../img/custom/nav/nav_act01.png) 0 0 no-repeat;
}
#pmenu #cat-id_2.act_path a,
#pmenu #li_cat_2.act_path a {
background: lightgreen url(../img/custom/nav/nav_act02.png) 0 0 no-repeat;
}
#pmenu #cat-id_3.act_path a,
#pmenu #li_cat_3.act_path a {
background: salmon url(../img/custom/nav/nav_act03.png) 0 0 no-repeat;
}
#pmenu #cat-id_4.act_path a,
#pmenu #li_cat_4.act_path a {
background: cornflowerblue url(../img/custom/nav/nav_act04.png) 0 0 no-repeat;
}
#pmenu #cat-id_13.act_path a,
#pmenu #li_cat_13.act_path a {
background: goldenrod url(../img/custom/nav/nav_act013.png) 0 0 no-repeat;
}
/* Set up the list items */
/* Einstellen der Listeneinzelheiten */
#pmenu li {
float: left;
list-style-type: none;
background: #7484ad;
}
/* HOVER ===================================== */
/* For Non-IE browsers and IE7 */
/* Fuer alle nicht IE + IE7 */
#pmenu li:hover {
position: relative;
}
/* Make the hovered list color persist */
/* Festlegen der Farbe fuer hover li */
#pmenu li:hover a {
background: fuchsia; /* Simple fallback */
color: #BF4300; /* ORG #c00; */
}
#pmenu li#cat-id_1 a:hover,
#pmenu li#li_cat_1 a:hover {
background: yellow url(../img/custom/nav/nav_hov01.png) 0 0 no-repeat;
color: #444; /* ORG #c00; */
}
#pmenu li#cat-id_2 a:hover,
#pmenu li#li_cat_2 a:hover {
background: lime url(../img/custom/nav/nav_hov02.png) 0 0 no-repeat;
color: #444; /* ORG #c00; */
}
#pmenu li#cat-id_3 a:hover,
#pmenu li#li_cat_3 a:hover {
background: tomato url(../img/custom/nav/nav_hov03.png) 0 0 no-repeat;
color: #444; /* ORG #c00; */
}
#pmenu li#cat-id_4 a:hover,
#pmenu li#li_cat_4 a:hover {
background: mediumslateblue url(../img/custom/nav/nav_hov04.png) 0 0 no-repeat;
color: #444; /* ORG #c00; */
}
#pmenu li#cat-id_13 a:hover,
#pmenu li#li_cat_13 a:hover {
background: orange url(../img/custom/nav/nav_hov13.png) 0 0 no-repeat;
color: #444; /* ORG #c00; */
}
Knut
Last edited by flip-flop on Wed 21. Apr 2010, 08:08, edited 4 times in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )