1/* SWIM2.0 :: Simple website menu 2**************************************************************** 3* DOM scripting by brothercake -- http://www.brothercake.com/ 4* Licensed under GPL -- http://www.gnu.org/copyleft/gpl.html 5**************************************************************** 6* For professional menu solutions visit -- http://www.udm4.com/ 7**************************************************************** 8* Modified for amanuensis dokuwiki template by PaulM 9**************************************************************** 10*/ 11 12 13 14/* tame the lists */ 15 ul#menu-h.horizontal, ul#menu-h.horizontal li { 16 margin:0; 17 padding:0; 18 list-style-type:none; 19 list-style-image: none; 20 font-size:100%; /* fix for win/ie's "non-linear text scaling" bug */ 21 } 22 23 24/* navbar list */ 25 ul#menu-h.horizontal { 26 position:absolute; 27 padding-top: 62px; 28 left:-7.05em; 29 width:100%; 30 cursor:default; 31 z-index:2000; 32 33 /* navbar top position 34 this DOES NOT already include 1px compensation 35 on TOP, for list-item border collapse 36 (1px defaults to around 0.05em) */ 37 //top:0.05em; 38 39 40 } 41 42/* navbar list-items */ 43 44 45 ul#menu-h.horizontal li { 46 width:auto; 47 float:left; 48 position:relative; 49 cursor:pointer; 50 cursor:hand; 51 52 text-align:left; 53 54 /* navbar items' left position relative to the container 55 this DOES NOT already include 1px compensation 56 on LEFT, for list-item border collapse 57 (1px defaults to around 0.05em) */ 58 left:10.55em; 59 60 /* shift list-items to collapse borders horizontally */ 61 margin:0 0 0 -1px; 62 } 63 64/* we have to use a different positioning trick for ie, so: 65 - set the two values below to reflect the navbar items' left position, 66 - then reduce the margin-left value by 1px (approx 0.05em) 67 to re-apply the list-item border-collapse */ 68* html ul#menu-h.horizontal li { 69 margin:0px -10.55em 0 10.5em; 70 } 71* html ul#menu-h.horizontal ul { 72 padding-top:62px; 73 } 74* html ul#menu-h.horizontal ul ul { 75 padding-top:0px; 76 } 77 78/* we also need to use the same trick for safari < 1.2, so 79 - apply the same values again 80 we're also increasing the border-collapse and compensation slightly 81 to cover for a float-related rounding-error in mozilla and safari 82 this is using a substring-matching attribute selector 83 which is also visible to safari 1.2, konqueror, mozilla and osx/msn 84 but that's okay, because it still works 85 we can't do that for everybody, because it breaks in opera */ 86 ul[class^="horizontal"] li { 87 margin:0 -10.55em 0 10.45em; 88 left:0.05em; 89 } 90 91 92/* menu lists */ 93 ul#menu-h.horizontal ul { 94 z-index:2020; 95 padding:0; 96 cursor:default; 97 position:absolute; 98 top:auto; 99 100 101 /* menu width */ 102 width:8.2em; 103 104 /* menu offset, which already includes 1px compensation 105 for list-item border collapse */ 106 margin:0 0 0 0; 107 108 /* 109 position menus off the screen to hide 110 because using display, visibility, overflow or clip, 111 would hide them from browser-based screenreaders as well 112 using left this time because top doesn't work correctly in safari 113 and using px because left:-Nem causes a horizontal scrollbar in some opera builds 114 it also has the advantage that menus which might extend beyond the window 115 won't create a horizontal scrollbar unless they're open 116 */ 117 left:-10000px; 118 } 119 120 121/* menu list-items */ 122 ul#menu-h.horizontal ul li { 123 /* duplicate menu width */ 124 width:10.2em; 125 126 /* compensate for navbar positioning */ 127 left:auto; 128 129 /* shift list-items to collapse borders vertically */ 130 margin:-1px 0 0 0; 131 } 132 133 134/* you can use <ul> classes to specify different menu widths */ 135 ul#menu-h.horizontal ul.wider, ul#menu-h.horizontal ul.wider li { 136 width:12.2em; 137 } 138 139 140/* further child-menu offset */ 141 ul#menu-h.horizontal ul ul { 142 /* this DOES NOT already include 1px compensation 143 on TOP and LEFT, for list-item border collapse 144 (1px defaults to around 0.05em) */ 145 margin:0.05em 0 0 7.65em; 146 /* overlapping the menus improves usability */ 147 } 148 149 150/* menu triggers -- position menus back on the screen to show 151 hide these from safari < 1.2 because of it's "sticky hover" bug 152 and because the menu positioning doesn't work 153 using the "@media with Media Type in Mixed Case" hack 154 http://www.dithered.com/css_filters/css_only/media_mixed_case.html */ 155@media Screen, Projection { 156 ul#menu-h.horizontal li:hover > ul { left:auto; } 157 ul#menu-h.horizontal ul li:hover > ul { top:0; } 158 } 159 160 161/* links */ 162 163 164 ul#menu-h.horizontal a, ul#menu-h.horizontal a:visited { 165 background: transparent; 166 text-decoration:none; 167 display:block; 168 cursor:pointer; 169 cursor:hand; 170 padding:3px 3px; 171 font: 1.6em "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif; 172 font-weight: bold; 173 letter-spacing:0px; 174 } 175 176 177 178 ul#menu-h.horizontal ul a, ul#menu-h.horizontal ul a:visited { 179 background:white; 180 border-top:1px solid #DDD; 181 border-bottom:1px solid #888; 182 border-right:1px solid #888; 183 border-left:1px solid #DDD; 184 padding:3px 5px; 185 font: 0.8em "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif; 186 text-decoration:none; 187 letter-spacing:1px; 188 } 189 190/* rollover pseudo-classes, and scriptable persistence class 191 modified to only apply to submenus - pm*/ 192 ul#menu-h.horizontal ul a:hover, ul#menu-h.horizontal ul a:focus, ul#menu-h.horizontal ul a.rollover, ul#menu-h.horizontal ul a.rollover:visited { 193 background:#EEE; 194 text-decoration:none; 195 196 } 197 198 199 200/* opera 5 and 6, and mac/ie5, need float on the links */ 201 ul#menu-h.horizontal a { float:left; } 202 203/* but it would break other browsers, so we need to negate it 204 using a rule that's hidden from them with the "@media with Media Type in Mixed Case" hack 205 http://www.dithered.com/css_filters/css_only/media_mixed_case.html */ 206@media Screen, Projection { ul#menu-h.horizontal a { float:none; } } 207 208/* msn/osx can see through that, but needs the float as well, 209 so re-apply it using the "not my child" hack 210 http://www.jasonkarldavis.com/articles/notmychild/ */ 211 ul#menu-h.horizontal a:not(:nth-child(n)) { float:left; } 212 213/* compensate submenus, using !important to increase specificity for osx/msn */ 214 ul#menu-h.horizontal ul a { float:none !important; } 215 216/* hacks for win/ie to cure 'excess hidden margins' and 'double margin float' bugs */ 217@media screen, projection { 218 * html ul#menu-h.horizontal li { 219 /* for ie5.0 */ 220 display:inline; 221 /* for ie5.5+ */ 222 f\loat:left; 223 /* this cures 'events fall through the menu' bug in ie6 224 you can can change the color, but don't remove it or use an image */ 225 background:#ffffff; 226 } 227 } 228 229/* use different comparative positioning for ie, 230 to avoid problems with virtual z-ordering */ 231* html ul#menu-h.horizontal li { position:static; } 232* html ul#menu-h.horizontal a { position:relative; } 233 234/* hide menus from konqueror < 3.2 */ 235ul[class^="horizontal"] ul { display:none; } 236ul[class^="horizontal"] ul { displa\y:block; } 237 238/* renders items with subpages */ 239 ul#menu-h.horizontal li a.subpages {text-decoration: none;} 240 241/* renders items with subpages in edit mode */ 242 ul#menu-h.horizontal li a.subpages_edit { 243 text-decoration: none; 244 font-style: italic; 245 } 246 247/* renders items without subpages in edit mode */ 248 ul#menu-h.horizontal li a.wikilink1_edit { 249 color:#009900; 250 text-decoration: none; 251 font-style: italic; 252 } 253 254/* ul#menu-h.horizontal ul li a.subpages {color: blue; font-style: none; background: white;} */ 255