Revision e7c11f83
Von Hans Peter Schlaepfer vor mehr als 6 Jahren hinzugefügt
| css/less/menu.less | ||
|---|---|---|
| 9 | 9 |
// |
| 10 | 10 |
// CONTENTS: |
| 11 | 11 |
// - MENUV3 |
| 12 |
// - - Links |
|
| 12 |
// - - List-Element general |
|
| 13 |
// - - - Links & Inbound Pseudo Link (DIV) |
|
| 13 | 14 |
// - - Items with Sub Items |
| 14 | 15 |
// - - List 1st Level (horizontal) |
| 15 |
// - - List 2nd Level (Vertical) |
|
| 16 |
// - - List 2nd and 3rd Level (Vertical) |
|
| 17 |
// - - List 3rd Level (Vertical) |
|
| 18 |
// - - Hovers |
|
| 16 |
// - - - List 2nd and 3rd Level (Vertical) |
|
| 17 |
// - - - List 2nd Level (Vertical) |
|
| 18 |
// - - - - List 3rd Level (Vertical) |
|
| 19 | 19 |
// |
| 20 | 20 |
// - HTML-MENU |
| 21 | 21 |
// - - |
| ... | ... | |
| 31 | 31 |
|
| 32 | 32 |
#menuv3 {
|
| 33 | 33 |
// Main-Properties of this element in File SCAFFOLDING.LESS |
| 34 |
background-color: @menu_link_bg; |
|
| 35 |
color: @menu_link; |
|
| 36 |
font-weight: normal !important ; |
|
| 37 |
|
|
| 38 |
|
|
| 39 |
a, |
|
| 40 |
li, |
|
| 41 |
div.x {
|
|
| 42 |
font-size: @font-size-smaller; |
|
| 43 |
line-height: 96%; |
|
| 44 |
display: block; |
|
| 45 |
border: 0; |
|
| 46 |
white-space: nowrap; |
|
| 47 |
margin: 0; |
|
| 48 |
font-weight: normal !important ; |
|
| 49 |
} |
|
| 50 |
|
|
| 34 |
background-color: @menu_link_bg_level1 ; |
|
| 51 | 35 |
|
| 52 | 36 |
|
| 53 | 37 |
|
| 54 | 38 |
// -------------- |
| 55 |
// Links
|
|
| 39 |
// List-Element general
|
|
| 56 | 40 |
// |
| 57 | 41 |
|
| 58 |
a {
|
|
| 59 |
background: @menu_link_bg; |
|
| 42 |
li {
|
|
| 60 | 43 |
display: block; |
| 61 |
} |
|
| 62 |
|
|
| 63 |
a, |
|
| 64 |
a:visited, |
|
| 65 |
div.x, |
|
| 66 |
div.x:visited {
|
|
| 67 |
color: @menu_link; |
|
| 68 |
text-decoration: none; |
|
| 69 |
padding-right: 0.6em; |
|
| 70 |
} |
|
| 71 |
|
|
| 72 |
|
|
| 73 |
|
|
| 74 |
// -------------- |
|
| 75 |
// Items with Sub Items |
|
| 76 |
// |
|
| 44 |
position: relative; |
|
| 45 |
float: none; |
|
| 46 |
font-weight: normal !important ; |
|
| 47 |
font-size: @font-size-smaller; |
|
| 48 |
line-height: 96%; |
|
| 49 |
white-space: nowrap; |
|
| 50 |
border: 0; |
|
| 51 |
padding: 0; |
|
| 52 |
margin: 0; |
|
| 77 | 53 |
|
| 78 |
div.x, |
|
| 79 |
div.x:visited {
|
|
| 80 |
//border-right: 1em solid #FE5F14; |
|
| 81 |
background-color: @menu_link_bg ; |
|
| 82 |
background: no-repeat right url("/image/menu-arrow-to-right-5.png");
|
|
| 83 |
} |
|
| 54 |
&:hover {
|
|
| 55 |
cursor: pointer; |
|
| 56 |
} |
|
| 84 | 57 |
|
| 85 |
div.x:hover { border-right: none; }
|
|
| 86 | 58 |
|
| 87 |
a:hover, |
|
| 88 |
div.x:hover {
|
|
| 89 |
color: @menu_link_hover; |
|
| 90 |
background-color: @menu_link_hover_bg; |
|
| 91 |
} |
|
| 59 |
// -------------- |
|
| 60 |
// Links & Inbound Pseudo Link (DIV) |
|
| 61 |
// |
|
| 62 |
a, |
|
| 63 |
a:visited, |
|
| 64 |
div.x, |
|
| 65 |
div.x:visited {
|
|
| 66 |
display: block; |
|
| 67 |
color: @menu_link; |
|
| 68 |
text-decoration: none; |
|
| 69 |
//padding-right: 0.6em; |
|
| 70 |
} |
|
| 92 | 71 |
|
| 93 |
a:active, |
|
| 94 |
div.x:active { color: @menu_link; }
|
|
| 72 |
} // /li (List-Element general) |
|
| 95 | 73 |
|
| 96 | 74 |
|
| 97 | 75 |
|
| ... | ... | |
| 107 | 85 |
float: left; |
| 108 | 86 |
|
| 109 | 87 |
|
| 110 |
li {
|
|
| 111 |
position: relative; |
|
| 112 |
float: none; |
|
| 113 |
padding: 0; |
|
| 114 |
background-color: @menu_link_bg ; |
|
| 115 |
|
|
| 116 |
&:hover{
|
|
| 117 |
background-color: @menu_link_hover_bg ; |
|
| 118 |
} |
|
| 119 |
} |
|
| 120 |
// /li |
|
| 121 |
|
|
| 122 | 88 |
& > li{
|
| 123 | 89 |
display: block; |
| 124 |
//height: auto; |
|
| 125 | 90 |
height: 17px; |
| 126 | 91 |
padding: 9px 0.9em 6px 0.9em; |
| 127 |
border-radius: 0 0 0 0;
|
|
| 92 |
background-color: @menu_link_bg_level1 ;
|
|
| 128 | 93 |
vertical-align: middle; |
| 129 |
color: @menu_link; |
|
| 130 | 94 |
|
| 131 | 95 |
&:hover {
|
| 132 |
background-color: @menu_link_hover_bg; |
|
| 133 |
color: @menu_link_hover; |
|
| 134 |
} |
|
| 96 |
background-color: @menu_link_bg_level1_hover; |
|
| 135 | 97 |
|
| 136 |
|
|
| 137 |
// -------------- |
|
| 138 |
// List 2nd Level (Vertical) |
|
| 139 |
// |
|
| 140 |
& > ul { }
|
|
| 98 |
// Display Menu 2nd level |
|
| 99 |
> ul {
|
|
| 100 |
display: block; |
|
| 101 |
position: absolute; |
|
| 102 |
} |
|
| 103 |
} |
|
| 141 | 104 |
|
| 142 | 105 |
|
| 143 | 106 |
|
| ... | ... | |
| 146 | 109 |
// |
| 147 | 110 |
|
| 148 | 111 |
ul {
|
| 149 |
position: absolute;
|
|
| 112 |
position: relative;
|
|
| 150 | 113 |
display: none; |
| 151 |
top: 32px; |
|
| 152 | 114 |
padding: 0 2em 2em 2em; |
| 153 | 115 |
margin: 0 -2em -2em -2.9em; |
| 154 | 116 |
|
| 117 |
|
|
| 155 | 118 |
li{
|
| 156 |
border-bottom: 1px #ccc solid ; |
|
| 157 |
background-color: @menu_link_bg ; |
|
| 119 |
border-bottom: 1px #777777 solid ; |
|
| 120 |
padding: 0.45em 0.6em 0.58em 0.8em ; |
|
| 121 |
} |
|
| 122 |
} |
|
| 123 |
|
|
| 124 |
|
|
| 125 |
// -------------- |
|
| 126 |
/* List 2nd Level (Vertical) */ |
|
| 127 |
// |
|
| 128 |
& > ul {
|
|
| 129 |
top: 32px; |
|
| 130 |
|
|
| 131 |
& > li {
|
|
| 132 |
background-color: @menu_link_bg_level2 ; |
|
| 158 | 133 |
|
| 159 |
a, |
|
| 134 |
// |
|
| 135 |
// Items with Sub Items |
|
| 136 |
// |
|
| 160 | 137 |
div.x {
|
| 161 |
padding: 0.45em 0.6em 0.58em 0.8em ; |
|
| 162 |
font-size: 1.0em ; |
|
| 163 |
background-color: @menu_link_bg ; |
|
| 138 |
background: no-repeat right url("/image/menu-arrow-to-right-5.png");
|
|
| 164 | 139 |
} |
| 165 |
} |
|
| 166 | 140 |
|
| 141 |
// |
|
| 142 |
// List-Item Hover |
|
| 143 |
// |
|
| 144 |
&:hover {
|
|
| 145 |
color: @menu_link_hover; |
|
| 146 |
background-color: @menu_link_bg_level2_hover; |
|
| 147 |
|
|
| 148 |
// Display Menu 3rd level |
|
| 149 |
> ul {
|
|
| 150 |
display: block; |
|
| 151 |
position: absolute; |
|
| 152 |
} |
|
| 153 |
} |
|
| 167 | 154 |
|
| 168 |
// -------------- |
|
| 169 |
// List 3rd Level (Vertical) |
|
| 170 |
// |
|
| 171 | 155 |
|
| 172 |
ul {
|
|
| 173 |
top: 0; |
|
| 174 |
left: 99%; |
|
| 175 |
padding: 2em; |
|
| 176 |
margin: -2em; |
|
| 177 |
list-style: none; |
|
| 156 |
// -------------- |
|
| 157 |
// List 3rd Level (Vertical) |
|
| 158 |
// |
|
| 178 | 159 |
|
| 179 |
li {
|
|
| 180 |
border-left: 0.2em solid @menu_link_bg; |
|
| 181 |
a { padding: 0.4em 0.9em 0.5em 0.9em; }
|
|
| 182 |
} |
|
| 183 |
} |
|
| 184 |
|
|
| 185 |
} |
|
| 186 |
// /ul ul |
|
| 187 |
} |
|
| 188 |
// /> li |
|
| 189 |
} // /ul |
|
| 160 |
> ul {
|
|
| 161 |
top: 0; |
|
| 162 |
left: 99%; |
|
| 163 |
padding: 2em; |
|
| 164 |
margin: -2em; |
|
| 165 |
list-style: none; |
|
| 190 | 166 |
|
| 167 |
> li {
|
|
| 168 |
background-color: @menu_link_bg_level3 ; |
|
| 169 |
border-left: 0.2em solid @menu_link_bg; |
|
| 191 | 170 |
|
| 171 |
&:hover { background-color: @menu_link_bg_level3_hover }
|
|
| 172 |
} |
|
| 173 |
} |
|
| 192 | 174 |
|
| 193 |
// -------------- |
|
| 194 |
// HOVERS |
|
| 195 |
// |
|
| 175 |
} |
|
| 196 | 176 |
|
| 197 |
li:hover {
|
|
| 198 |
cursor: pointer; |
|
| 199 |
} |
|
| 200 | 177 |
|
| 201 |
li:hover ul ul, |
|
| 202 |
li li:hover ul ul, |
|
| 203 |
li li li:hover ul ul, |
|
| 204 |
li li li li:hover ul ul {
|
|
| 205 |
display: none; |
|
| 206 |
} |
|
| 207 |
li:hover ul, |
|
| 208 |
li li:hover ul, |
|
| 209 |
li li li:hover ul, |
|
| 210 |
li li li li:hover ul {
|
|
| 211 |
display: block; |
|
| 212 |
position: absolute; |
|
| 213 |
//left: 10px; |
|
| 214 |
} |
|
| 215 | 178 |
|
| 179 |
} // /List 2nd Level (Vertical) |
|
| 216 | 180 |
|
| 181 |
} // /> li |
|
| 182 |
} // /ul |
|
| 217 | 183 |
} |
| 218 | 184 |
// /#menuv3 |
| 219 | 185 |
|
Auch abrufbar als: Unified diff
Anpassungen für die Präsentation am kivitendo Treffen April 2018