1 2 3 4 5 Code Style: Drop down menu using DOM1 and CSS 2 visibility properties 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 49 50 51 52 53 60 61 62 63 64 65
66 67
68 CSS font stacks, media style sheets & web standards 69
70
71 81
82
83 84 85 107 114
115 116 117
118 Site navigation below 119
120
121
122

123 136

137

138 Your banner ad here 139

140
141
142

143 In this section 144

145 171

172 Follow Code Style 173

174 185

186 Text ad service 187

188

189 Put your text ad here Down arrow icon 190

191
192 193
194

195 WestNIC provides reliable web hosting services 196

197
198
199

200 25% off cpanel web hosting and reseller hosting deals. Promo: codestyle25off 201

202
203 204
205

206 This article demonstrates a DOM1 drop-down menu system using the CSS visibility property. Each menu has a main link and an unordered list of links that become visible, with the illusion of extending the main menu point downwards. The drop down menus are open source, accessible and forward compatible. 207

208

209 The scripts and CSS for these drop down menus is provided under a Creative Commons License. 210

211

212 Browser-safe and forward-compatible 213

214

215 Developing DHTML" that is fully backward- forward- and cross-compatible with all browsers has been a fundamental problem since client-side scripting was implemented in more than one Web browser. The DOM1 recommendation from the W3C defines a standard hierarchy of reference objects for HTML 4.01 and XHTML 1.0 documents that should at least make browser-safe forward-compatible scripting feasible. 216

217

218 This demonstration page is assumed to be safe in all browsing circumstances; it will not cause Javascript errors, but is only intended to be fully supported by DOM1 enabled browsers. The scripting is not intended to work with the mutually incompatible, proprietary DOMs implemented by Netscape 4 and Internet Explorer 4 or earlier browsers; in these cases the browser just displays the main menu points statically. On the other hand, the code is guaranteed to be forward-compatible because it uses method, object and property checking to ensure that only DOM1 enabled browsers execute the relevant code. 219

220 235

236 Drop down menu FAQ 237

238 299
300
301 302 303
304

305 Article feedback 306

307

308 Your comments on this article will be appreciated, please use the form below to submit your views. If you would like a reply or article update notification, include your email address. 309

310
311 312 313 314 315 316 321 324 325 326 331 335 336 337 342 365 366 367 372 375 376 377 382 383 384 387 388 389 394 407 408 409 412 415 416 417 418
419

420 Information: Your email address will not be mis-used. If you include your address you may be sent a personal reply, you will not be added to any mailing list unless you request update notification. Read the site privacy statement for details. 421

422
423
424 468
469 477 Add this page to your chosen social bookmarking service 478 479
480

481 Style warning - please read 482

483
484 Home · 485 CSS · 486 Java · 487 Javascript · 488 HTML · 489 Help · 490 Log 491
496