Ik wil er dus eigenlijk eentje waar nog geen verdere opmaak aan vast zit. Bij deze voorbeelden is dit echter wel het geval.
Link gekopieerd
?
Onbekende gebruiker
26-09-2008 14:39
Dan sloop je die style d'r toch uit? Neem nou bijvoorbeeld
deze . Alles wat het is, is:
html:
<ul id="menu">
<li>
<a href="#">Weblog Tools</a>
<ul>
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>
<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li>
<a href="#">Programming Languages</a>
<ul>
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
<li><a href="http://www.i-marco.nl/weblog/">Marco's blog (no submenu)</a></li>
<li>
<a href="#">Cool Stuff</a>
<ul>
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>
<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li>
<a href="#">Search Engines</a>
<ul>
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>
en js:
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
Zie ook het
js bestand. (Natuurlijk heb je ook jquery nodig...)
Link gekopieerd