Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Mootools accordian menu en plaatjes

4 antwoorden
  • Hoi, Ik wil graag het accordian menu werkend krijgen maar dan niet met verschillende kleuren maar met twee verschillende plaatjes. Weet iemand hoe dit voor elkaar te krijgen. Groetjes, Roelof
  • voorbeeldcode? probeerpagina? wat heb je zelf al geprobeerd? Oftewel, iets meer moeite / info zou fijn zijn... t.
  • Hier een voorbeeldpagina : [code:1:9867333d1f] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Delicious Fruit | Dieter Schneider 2007 | www.csstemplateheaven.com</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="mootools-1.11.js" type="text/javascript" language="javascript"></script> </head> <body> <div id="container"> <div id="header"> <div id="header_left"> <h1>Tamara <span class="red">Wobben</span></h1> <h2>Niemand krijgt mij eronder</h2> </div> <div id="header_right"> </div> </div> <div id="left"> <h4><span class="menu_first_letter">Navigation</span></h4> <div id="navcontainer"> <ul id="navlist"> <li><a href="#" title="" class="toggler">Menu 1</a></li> <div class="accordion"> <a href="#" title="index.php">Submenu 1.1</a> <a href="" title="index.php">Submenu 1.2</a> </div> <li><a href="#" title="" class="toggler">Menu 2</a></li> <div class="accordion"> <a href="#" title="index.php">Submenu 2.1</a> <a href="" title="index.php">Submenu 2.2</a> </div> </ul> </div> </div> <div id="right"> <div class="date_box"> <div class="date_box_month">Jan</div> <div class="date_box_day">18</div> </div> <h3>Lorem Ipsum sample text </h3> <p><img src="images/demo_img.jpg" alt="Kiwi" width="159" height="140" class="float_right" />This template is created by Dieter Schneider a cold January night 2007. It's valid Xhtml 1.0 Strict! If you want the PSD file for this template you can purchase it at <a href="http://www.csstemplateheaven.com">CssTemplateHeaven.com</a>, this will give you more flexibility. I kindly ask you to not remove the copyright in the footer if you have the free version of this template.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sapien enim, cursus in, aliquam sit amet, convallis eget, metus. Duis dui mi, varius at, lacinia eget, ullamcorper et, tortor. Pellentesque ac pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean orci mi, varius eget, mollis vel, rhoncus a, leo. Ut eros enim, vehicula quis, gravida ac, sodales sit amet, orci. Nulla eleifend tristique erat.</p> </div> <div id="footer">Created by: Dieter Schneider 2007 | <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a> </div> </div> <script language="javascript" type="text/javascript"> window.onload=function(){ $$('#menu a').each(function(el) { el.addEvent('mouseenter',function(){ p = el.innerHTML.toUpperCase(); el.innerHTML = p; el.setStyle('background','url(bg1.jpg)'); myEffect = el.effect('margin-left', {duration: 100,transition: Fx.Transitions.linear, wait: true}).start('10','30'); }) el.addEvent('mouseleave',function(){ p = el.innerHTML.toLowerCase(); el.innerHTML = p; el.setStyle('background','url(bg.jpg)'); myEffect = el.effect('margin-left', {duration: 800,transition: Fx.Transitions.Bounce.easeOut, wait: true}).start('30','0'); }) }) myStretch = document.getElementsByClassName('toggler'); myStretcher = document.getElementsByClassName('accordion'); // setup the accordion elements by clearing display styles myStretcher.each(function(el){ el.style.display = ''; }); var ac = new Fx.Accordion(myStretch,myStretcher, { onActive: function(tog){ tog.setStyle('color', '#ACDA4E'); tog.setStyle('background-color', '#1d1d1d'); tog.setStyle('cursor', 'help'); }, onBackground: function(tog){ tog.setStyle('color', '#FFF'); tog.setStyle('background-color', '#2d2d2d'); tog.setStyle('cursor', 'help'); }, alwaysHide: true, start : 'all-closed', height: true, opacity : true }); } st = document.getElementsByClassName('toggler2'); stc = document.getElementsByClassName('accordion2'); // setup the accordion elements by clearing display styles stc.each(function(el){ el.style.display = ''; }); var acc = new Fx.Accordion(st,stc, { onActive: function(tog){ tog.setStyle('color', '#ACDA4E'); tog.setStyle('background-color', '#1d1d1d'); tog.setStyle('cursor', 'help'); }, onBackground: function(tog){ tog.setStyle('color', '#FFF'); tog.setStyle('background-color', '#2d2d2d'); tog.setStyle('cursor', 'help'); }, alwaysHide: true, start : 'all-closed', opacity : true }); </script> </body> </html> [/code:1:9867333d1f] Groetjes, Roelof
  • Mootools heeft een zeer uitgebreide eigen documentatie, goed doorlezen dus. Daarbij zou ik beginnen met testen met de volledige Javascript library en pas later een geoptimaliseerde (geminimaliseerde) versie gebruiken, dan weet je waar het probleem zit. Overigens een briljante JS-library! ;) - Bas

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.