Zur Gestaltung der Menüs wird dann natürlich noch die CSS-Datei für die Navigation benötigt - also z.B. eine nav_list.css.
Nachfolgende Datei muss in das Verzeichnis gelegt werden, wo die Navigationstyles abgelegt sind. Ich arbeite bevorzugt mit hmjaml als Template.
Diese CSS-Datei bietet die Formatierung für eine Navigationstiefe bis Level 4 an. Weitere Tiefen z.B. bis Level 7 können von mir bereitgestellt werden.
| nav_vlist bis Level 4.css | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
@charset "UTF-8"; /** * @copyright Copyright 2001 St. Kraft @media screen, projection { #main .menu { width: 100%; overflow: hidden; margin:0; list-style-type: none; } #main .menu ul { list-style-type: none; margin:0; padding: 0; } #main .menu li { float:left; width: 100%; margin:0; padding: 0 } #main .menu a, #main .menu span.separator { display:block; padding:3px 0 3px 10%; text-decoration: none; color: #444; } #main .menu li#current a.active_link { font-weight: bold; color: #fff; cursor:default; } /* Level 1 ----------------------OK--------------------------- */ #main .menu li a { padding-left: 13px; background: #fff url(../../../images/pvh/navigation/NavList/L1_no.gif) no-repeat; } #main .menu li a:focus, #main .menu li a:hover, #main .menu li a:active { background: #DEF url(../../../images/pvh/navigation/NavList/L1_no-mo.gif) no-repeat; } #main .menu li.parent a { background: #fff url(../../../images/pvh/navigation/NavList/L1_pa.gif) no-repeat; } #main .menu li.parent a:focus, #main .menu li.parent a:hover, #main .menu li.parent a:active { background: #DEF url(../../../images/pvh/navigation/NavList/L1_pa-mo.gif) no-repeat; } #main .menu li#current a.current_link { background: #608BC0 url(../../../images/pvh/navigation/NavList/L1_no-cu.gif) no-repeat; } #main .menu li#current.parent a.current_link { background: #608BC0 url(../../../images/pvh/navigation/NavList/L1_pa-cu.gif) no-repeat; } #main .menu li.parent.active a.active_link { background: #fff url(../../../images/pvh/navigation/NavList/L1_pa-ac.gif) no-repeat; } #main .menu li.active a.active_link:focus, #main .menu li.active a.active_link:hover, #main .menu li.active a.active_link:active { background: #DEF url(../../../images/pvh/navigation/NavList/L1_pa-ac-mo.gif) no-repeat; } /* Level 2 -----------------------OK-------------------------- */ #main .menu li.parent.active ul li a { padding-left: 20px; background: #fff url(../../../images/pvh/navigation/NavList/L2_no.gif) no-repeat; } #main .menu li.parent.active ul li a:focus, #main .menu li.parent.active ul li a:hover, #main .menu li.parent.active ul li a:active { background: #DEF url(../../../images/pvh/navigation/NavList/L2_no-mo.gif) no-repeat; } #main .menu li.parent.active ul li.parent a { background: #fff url(../../../images/pvh/navigation/NavList/L2_pa.gif) no-repeat; } #main .menu li.parent.active ul li.parent a:focus, #main .menu li.parent.active ul li.parent a:hover, #main .menu li.parent.active ul li.parent a:active { background: #DEF url(../../../images/pvh/navigation/NavList/L2_pa-mo.gif) no-repeat; } /*NEU EXPORTIEREN*/ #main .menu li.parent.active ul li#current.active a.current_link { padding-left: 20px; background: #608BC0 url(../../../images/pvh/navigation/NavList/L2_no-cu.gif) no-repeat; } #main .menu li.parent.active ul li#current.parent.active a.current_link { padding-left: 20px; background: #608BC0 url(../../../images/pvh/navigation/NavList/L2_pa-cu.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active a.active_link { background: #fff url(../../../images/pvh/navigation/NavList/L2_pa-ac.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active a.active_link:focus, #main .menu li.parent.active ul li.parent.active a.active_link:hover, #main .menu li.parent.active ul li.parent.active a.active_link:active { background: #DEF url(../../../images/pvh/navigation/NavList/L2_pa-ac-mo.gif) no-repeat; } /* Level 3 -------------------------ok------------------------ */ #main .menu li.parent.active ul li.parent.active ul li a { padding-left: 27px; background: #fff url(../../../images/pvh/navigation/NavList/L3_no.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li a:focus, #main .menu li.parent.active ul li.parent.active ul li a:hover, #main .menu li.parent.active ul li.parent.active ul li a:active { background: #DEF url(../../../images/pvh/navigation/NavList/L3_no-mo.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent a { padding-left: 27px; background: #fff url(../../../images/pvh/navigation/NavList/L3_pa.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent a:focus, #main .menu li.parent.active ul li.parent.active ul li.parent a:hover, #main .menu li.parent.active ul li.parent.active ul li.parent a:active { background: #DEF url(../../../images/pvh/navigation/NavList/L3_pa-mo.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li#current.active a.current_link { padding-left: 27px; background: #608BC0 url(../../../images/pvh/navigation/NavList/L3_no-cu.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li#current.parent.active a.current_link { padding-left: 27px; background: #608BC0 url(../../../images/pvh/navigation/NavList/L3_pa-cu.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent.active a.active_link { background: #fff url(../../../images/pvh/navigation/NavList/L3_pa-ac.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent.active a.active_link:focus, #main .menu li.parent.active ul li.parent.active ul li.parent.active a.active_link:hover, #main .menu li.parent.active ul li.parent.active ul li.parent.active a.active_link:active { background: #DEF url(../../../images/pvh/navigation/NavList/L3_pa-ac-mo.gif) no-repeat; } /* Level 4 --------------------------------------------------- */ #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li a { padding-left: 34px; background: #fff url(../../../images/pvh/navigation/NavList/L4_no.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li a:focus, #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li a:hover, #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li a:active { background: #DEF url(../../../images/pvh/navigation/NavList/L4_no-mo.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent a { padding-left: 34px; background: #fff url(../../../images/pvh/navigation/NavList/L4_pa.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent a:focus, #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent a:hover, #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent a:active { background: #DEF url(../../../images/pvh/navigation/NavList/L4_pa-mo.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li#current.active a.current_link { padding-left: 34px; background: #608BC0 url(../../../images/pvh/navigation/NavList/L4_no-cu.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li#current.parent.active a.current_link { padding-left: 34px; background: #608BC0 url(../../../images/pvh/navigation/NavList/L4_pa-cu.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent.active a.active_link { background: #fff url(../../../images/pvh/navigation/NavList/L4_pa-ac.gif) no-repeat; } #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent.active a.active_link:focus, #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent.active a.active_link:hover, #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent.active a.active_link:active { background: #DEF url(../../../images/pvh/navigation/NavList/L4_pa-ac-mo.gif) no-repeat; } } |