Ik heb een vraagje: Weet iemand hoe ik makkelijk een uitschuifmenu kan maken, zodat ik hem zelf kan bewerken?
De meeste sites geven al gelijk een script met een perfecte opmaak en allerlei extra dingen.
Is er ergens een tutorial (dus niet eentje met allemaal toeters en bellen) of heeft iemand hier al een scriptje van?

Hopelijk kan iemand mij helpen ;)
Groetjes,
Krijn
Kijk hier bij Menu of Accordion
Ik wil er dus eigenlijk eentje waar nog geen verdere opmaak aan vast zit. Bij deze voorbeelden is dit echter wel het geval.
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...)

Reageren