Bewertung: 1 / 5

Stern aktivStern inaktivStern inaktivStern inaktivStern inaktiv
 
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; }
 
}
 

Kommentare (0)

Bisher wurden hier noch keine Kommentare veröffentlicht

Einen Kommentar verfassen

Kommentar als Gast veröffentlichen. Registriere Dich oder melde Dich zu Deinem Benutzerkonto an.
0 Zeichen
Anhänge (0 / 3)
Deinen Standort teilen
Gib den Text aus dem Bild ein. Nicht zu erkennen?