THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
Wiki Markup |
---|
{style:media=screen|import=http://people.apache.org/~clement/ipojo/menu/dropDown.css} {style:media=screen|import=http://people.apache.org/~clement/ipojo/menu/global.css} {style} {html} <script src="dbMenu.js" type="text/javascript"> /*********************************************** * DbMenu script- by David Boggus: http://www.boggusweb.com/ * Please keep this notice intact * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more ***********************************************/ </script> <ul id="menu" class="dbMenu onMouse"> <li><a href="http://www.javascriptkit.com">Home</a></li> <li>News <ul> <li><a href="http://www.cnn.com">CNN</a></li> <li><a href="http://news.bbc.co.uk">BBC News</a></li> <li><a href="http://abcnews.com">ABC News</a></li> </ul> </li> <li>Web Design <ul> <li><a href="http://javascriptkit.com">JavaScipt Kit</a></li> <li><a href="http://dynamicdrive.com">Dynamic Drive</a></li> <li><a href="http://www.cssdrive.com">CSS Drive</a></li> <li><a href="http://www.codingforums.com">Coding Forums</a></li> </ul> </li> <li><a href="http://javascriptkit.com/jsref/">JS Reference</a></li> <li><a href="http://javascriptkit.com/domref/">DOM Reference</a></li> </ul>} <!-- /* CSS issu des tutoriels www.alsacreations.com/articles */ body { margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu { position: absolute; top: 0; left: 0; } dl#menu { width: 15em; } dl#menu dt { cursor: pointer; margin: 2px 0;; height: 20px; line-height: 20px; text-align: center; font-weight: bold; border: 1px solid gray; background: #ccc; } dl#menu dd { border: 1px solid gray; } dl#menu li { text-align: center; background: #fff; } dl#menu li a, dl#menu dt a { color: #000; text-decoration: none; display: block; border: 0 none; height: 100%; } dl#menu li a:hover, dl#menu dt a:hover { background: #eee; } #mentions { font-family: verdana, arial, sans-serif; position: absolute; bottom : 200px; left : 10px; color: #000; background-color: #ddd; } #mentions a {text-decoration: none; color: #222; } #mentions a:hover{text-decoration: underline; } --> {style} {html} <script type="text/javascript"> <!-- window.onload=montre; function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> <dl id="menu"> <dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt> <dt onclick="javascript:montre('smenu2');">Menu 2</dt> <dd id="smenu2"> <ul> <li><a href="#">Sous-Menu 2.1</a></li> <li><a href="#">Sous-Menu 2.2</a></li> <li><a href="#">Sous-Menu 2.3</a></li> </ul> </dd> <dt onclick="javascript:montre('smenu3');">Menu 3</dt> <dd id="smenu3"> <ul> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.1</a></li> </ul> </dd> <dt onclick="javascript:montre('smenu4');">Menu 4</dt> <dd id="smenu4"> <ul> <li><a href="#">Sous-Menu 4.1</a></li> <li><a href="#">Sous-Menu 4.1</a></li> </ul> </dd> </dl> {html} |