Accordéon vertical dans un simple message.

par Karmixi Dim 6 Nov 2011 - 9:54

Bonjours à tous!

Comme le dit le titre, j'aimerais réaliser un accordéon vertical, voici lequel: http://jesuisunelegende.forumactif.com/t4-apercu-pa-qeel-en-accordeon-vertical-css3

J'ai lu tout les sujets concernant ses codes pour l'installer mais je n'ai pas réellement trouver ce que je cherchais, pourquoi? Et bien ce sont les codes pour l'installer dans une PA ou un QEEL et moi je voudrais simplement l'utiliser dans un message. Je m'explique plus en détail. Je suis membre d'un forum et n'ai donc pas accès au panneau d'administration. Comment l'utiliser sans avoir besoin d'aller dans le panneau d'administration? Juste en mettant des codes codes dans le message et le postant?

Merci d'avance :3

par missx Dim 6 Nov 2011 - 10:20

salut
Un menu déroulant utilise je javascript, et le javascript n'est pas autorisé dans les messages par mesure de sécurité.
Si le html est autorisé dans le forum en question , tu peut faire ton menu déroulant dans une page html personnelle et l'intégrer dans le message en iframe.
a+

par Karmixi Dim 6 Nov 2011 - 10:35

Merci beaucoup, mais à vrai dire, j'ai pas trop compris le système de l'iframe o_o"

par missx Dim 6 Nov 2011 - 10:47

En fait l'iframe est l'insertion d'une page html dans une autre ( là dans un message)
Mais je m'aperçoit que j'ai dis une bêtise, ça arrive le dimanche matin !! , il est possible faire un menu de ce type uniquement en css3 et html (donc sans javascript) , je recherche les codes et je te tiens au courant.
A+

par Karmixi Dim 6 Nov 2011 - 10:57

Merci j'attends de tes nouvelles ^^

par missx Dim 6 Nov 2011 - 14:10

re ,
J'ai préparé un petit tuto sur une page html :
tuto Accordeon vertical
A+ Very Happy

par Karmixi Dim 6 Nov 2011 - 18:53

Merci o/

Donc si j'ai bien compris, avec ton tuto j'en fait un iframe et c'est réglé? °° Parce que si c'est pas la cas, le problème reste le même vu que je n'ai pas accès au CSS du forum.

par missx Dim 6 Nov 2011 - 19:39

oui, tu met tout dans une page html , le css + le html puis tu le met en iframe comme ceci

Code:: <IFRAME src="LIEN DE LA PAGE HTML" width=700 height=500 scrolling=no frameborder=0> </IFRAME>

tu ajuste les dimensions et tu met le lien de la page hébergée.
Pour ta page html, elle doit avoir cette structure :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>titre</title> <style type="text/css">  </style> </head> <body>  </body> </html>

a+

par Karmixi Dim 6 Nov 2011 - 20:16

D'accord, merci infiniment. ♥
Par contre je vais t'embêter une dernière fois désolée ><
J'aimerais que les titre soient cliquables pour qu'ils se déroulent ensuite et non qu'ils se déroulent au passage de la souris D8 Une solution? Merci Very Happy

par missx Lun 7 Nov 2011 - 11:44

dans ce cas il faut du javascript.
Tu peut faire ce genre d'accordeon sur une page html et ensuite inserée en iframe.
Voici une page complète avec le html, le javascript et le css, tu adapte selon tes couleurs et ton contenu

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> //** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com //** Created: Jan 7th, 08'. Last updated: June 7th, 2010 to v1.9 //Version 1.9: June 7th, 2010': //**1) Ajax content support added, so a given header's content can be dynamically fetched from an external file and on demand. //**2) Optimized script performance by caching header and content container references var ddaccordion={ ajaxloadingmsg: '<img src="loading2.gif" /><br />Loading Content...', //customize HTML to output while Ajax content is being fetched (if applicable) headergroup: {}, //object to store corresponding header group based on headerclass value contentgroup: {}, //object to store corresponding content group based on headerclass value preloadimages:function($images){ $images.each(function(){ var preloadimage=new Image() preloadimage.src=this.src }) }, expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header this.toggleone(headerclass, selected, "expand") }, collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header this.toggleone(headerclass, selected, "collapse") }, expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname var $headers=this.headergroup[headerclass] this.contentgroup[headerclass].filter(':hidden').each(function(){ $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion") }) }, collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname var $headers=this.headergroup[headerclass] this.contentgroup[headerclass].filter(':visible').each(function(){ $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion") }) }, toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header var $targetHeader=this.headergroup[headerclass].eq(selected) var $subcontent=this.contentgroup[headerclass].eq(selected) if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible")) $targetHeader.trigger("evt_accordion") }, ajaxloadcontent:function($targetHeader, $targetContent, config, callback){ var ajaxinfo=$targetHeader.data('ajaxinfo') function handlecontent(content){ //nested function if (content){ //if ajax content has loaded ajaxinfo.cacheddata=content //remember ajax content ajaxinfo.status="cached" //set ajax status to cached if ($targetContent.queue("fx").length==0){ //if this content isn't currently expanding or collapsing $targetContent.hide().html(content) //hide loading message, then set sub content's HTML to ajax content ajaxinfo.status="complete" //set ajax status to complete callback() //execute callback function- expand this sub content } } if (ajaxinfo.status!="complete"){ setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //call handlecontent() again until ajax content has loaded (ajaxinfo.cacheddata contains data) } } //end nested function if (ajaxinfo.status=="none"){ //ajax data hasn't been fetched yet $targetContent.html(this.ajaxloadingmsg) $targetContent.slideDown(config.animatespeed) ajaxinfo.status="loading" //set ajax status to "loading" $.ajax({ url: ajaxinfo.url, //path to external menu file error:function(ajaxrequest){ handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText) }, success:function(content){ content=(content=="")? " " : content //if returned content is empty, set it to "space" is content no longer returns false/empty (hasn't loaded yet) handlecontent(content) } }) } else if (ajaxinfo.status=="loading") handlecontent(ajaxinfo.cacheddata) }, expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){ var ajaxinfo=$targetHeader.data('ajaxinfo') if (ajaxinfo){ //if this content should be fetched via Ajax if (ajaxinfo.status=="none" || ajaxinfo.status=="loading") this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)}) else if (ajaxinfo.status=="cached"){ $targetContent.html(ajaxinfo.cacheddata) ajaxinfo.cacheddata=null ajaxinfo.status="complete" } } this.transformHeader($targetHeader, config, "expand") $targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){ config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated) if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0) if (targetLink) //if this header is a link setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled } }) }, collapseit:function($targetHeader, $targetContent, config, isuseractivated){ this.transformHeader($targetHeader, config, "collapse") $targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)}) }, transformHeader:function($targetHeader, config, state){ $targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes .removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand) if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)? $targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header $targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image } else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it $targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) else if (config.htmlsetting.location=="suffix") $targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) }, urlparamselect:function(headerclass){ var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL if (result!=null) result=RegExp.$1.split(',') return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair if (document·cookie.match(re)) //if cookie found return document·cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document·cookie = name + "=" + value + "; path=/" }, init:function(config){ document.write('<style type="text/css">\n') document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link document.write('<\/style>') jQuery(document).ready(function($){ ddaccordion.urlparamselect(config.headerclass) var persistedheaders=ddaccordion.getCookie(config.headerclass) ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion var $headers=ddaccordion.headergroup[config.headerclass] var $subcontents=ddaccordion.contentgroup[config.headerclass] config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties config.revealtype=config.revealtype || "click" config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter") if (config.revealtype=="clickgo"){ config.postreveal="gotourl" //remember added action config.revealtype="click" //overwrite revealtype to "click" keyword } if (typeof config.togglehtml=="undefined") config.htmlsetting={location: "none"} else config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects) var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded) if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array) expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3] if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded expandedindices=[] if (config["collapseprev"] && expandedindices.length>1) //only allow one content open? expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray()) if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header expandedindices=[0] $headers.each(function(index){ //loop through all headers var $header=$(this) if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag $('<span class="accordprefix"></span>').prependTo(this) $('<span class="accordsuffix"></span>').appendTo(this) } $header.attr('headerindex', index+'h') //store position of this header relative to its peers $subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers var $subcontent=$subcontents.eq(index) var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax if ($hiddenajaxlink.length==1){ $header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header } var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first) ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param lastexpanded={$header:$header, $content:$subcontent} } //end check else{ $subcontent.hide() config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter ddaccordion.transformHeader($header, config, "collapse") } }) $headers.bind("evt_accordion", function(e, isdirectclick){ //assign CUSTOM event handler that expands/ contacts a header var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed if ($subcontent.css('display')=="none"){ ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content? ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter } lastexpanded={$header:$(this), $content:$subcontent} } else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter } }) $headers.bind(config.revealtype, function(){ if (config.revealtype=="mouseenter"){ clearTimeout(config.revealdelay) var headerindex=parseInt($(this).attr("headerindex")) config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0) } else{ $(this).trigger("evt_accordion", [true]) //last parameter indicates this is a direct click on the header return false //cancel default click behavior } }) $headers.bind("mouseleave", function(){ clearTimeout(config.revealdelay) }) config.oninit($headers.get(), expandedindices) $(window).bind('unload', function(){ //clean up and persist on page unload $headers.unbind() var expandedindices=[] $subcontents.filter(':visible').each(function(index){ //get indices of expanded headers expandedindices.push($(this).attr('contentindex')) }) if (config.persiststate==false && $headers.length>0){ //persist state? expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value? ddaccordion.setCookie(config.headerclass, expandedindices) } }) }) } } //preload any images defined inside ajaxloadingmsg variable ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img')) /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "silverheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [12], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: true, //Should contents open by default be animated into view? persiststate: false, //persist state of opened contents within browser session? toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <style type="text/css"> .applemenu{ margin: 5px 0; padding: 0; width: 500px; /*largeur de l'acordeon*/ border: 1px solid #9A9A9A; color: #000; background-color: #0F6; font-weight: bold; background-color: #999; border-top-width: medium; border-right-width: 1; border-bottom-width: 1; border-left-width: 1; border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-color: #030; border-right-color: #030; border-bottom-color: #030; border-left-color: #030; height: auto; } .silverheader{ color: white; background-color: #096; border-top-width: medium; border-right-width: 1; border-bottom-width: 1; border-left-width: 1; border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-color: #030; border-right-color: #030; border-bottom-color: #030; border-left-color: #030; text-align: center; } .silverheader:hover{ background-color: #CF6; color: #CCC; cursor: help; } .applemenu div.submenu{ /*contenu*/ background: white; padding: 5px; height: 300px; /*hauteur de la div*/ color: #000; font-weight: normal; } </style> </head> <body> <div class="applemenu"> <div class="silverheader">Titre 1</div> <div class="submenu"> Contenu du titre 1<br /> </div> <div class="silverheader">Titre 2</div> <div class="submenu"> Contenu du titre 2<br /> </div> <div class="silverheader">Titre 3</div> <div class="submenu"> Contenu du titre 3<br /> </div> <div class="silverheader">Titre 4</div> <div class="submenu"> Contenu du titre 4<br /> </div> <div class="silverheader">Titre 5</div> <div class="submenu"> Contenu du titre 5<br /> </div> <br /> </div> </body> </html>

A+

par Karmixi Lun 7 Nov 2011 - 19:35

Merci beaucoup *-*

par Karmixi Lun 7 Nov 2011 - 20:23

Désolée du double poste mais je viens d'essayer mais quand je clique, le contenue du texte ne se ré-enroule pas D8 éè

par missx Mar 8 Nov 2011 - 8:10

OK, voilà le code de la page complète avec un bouton pour refermer le menu :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> //** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com //** Created: Jan 7th, 08'. Last updated: June 7th, 2010 to v1.9 //Version 1.9: June 7th, 2010': //**1) Ajax content support added, so a given header's content can be dynamically fetched from an external file and on demand. //**2) Optimized script performance by caching header and content container references var ddaccordion={ ajaxloadingmsg: '<img src="loading2.gif" /><br />Loading Content...', //customize HTML to output while Ajax content is being fetched (if applicable) headergroup: {}, //object to store corresponding header group based on headerclass value contentgroup: {}, //object to store corresponding content group based on headerclass value preloadimages:function($images){ $images.each(function(){ var preloadimage=new Image() preloadimage.src=this.src }) }, expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header this.toggleone(headerclass, selected, "expand") }, collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header this.toggleone(headerclass, selected, "collapse") }, expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname var $headers=this.headergroup[headerclass] this.contentgroup[headerclass].filter(':hidden').each(function(){ $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion") }) }, collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname var $headers=this.headergroup[headerclass] this.contentgroup[headerclass].filter(':visible').each(function(){ $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion") }) }, toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header var $targetHeader=this.headergroup[headerclass].eq(selected) var $subcontent=this.contentgroup[headerclass].eq(selected) if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible")) $targetHeader.trigger("evt_accordion") }, ajaxloadcontent:function($targetHeader, $targetContent, config, callback){ var ajaxinfo=$targetHeader.data('ajaxinfo') function handlecontent(content){ //nested function if (content){ //if ajax content has loaded ajaxinfo.cacheddata=content //remember ajax content ajaxinfo.status="cached" //set ajax status to cached if ($targetContent.queue("fx").length==0){ //if this content isn't currently expanding or collapsing $targetContent.hide().html(content) //hide loading message, then set sub content's HTML to ajax content ajaxinfo.status="complete" //set ajax status to complete callback() //execute callback function- expand this sub content } } if (ajaxinfo.status!="complete"){ setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //call handlecontent() again until ajax content has loaded (ajaxinfo.cacheddata contains data) } } //end nested function if (ajaxinfo.status=="none"){ //ajax data hasn't been fetched yet $targetContent.html(this.ajaxloadingmsg) $targetContent.slideDown(config.animatespeed) ajaxinfo.status="loading" //set ajax status to "loading" $.ajax({ url: ajaxinfo.url, //path to external menu file error:function(ajaxrequest){ handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText) }, success:function(content){ content=(content=="")? " " : content //if returned content is empty, set it to "space" is content no longer returns false/empty (hasn't loaded yet) handlecontent(content) } }) } else if (ajaxinfo.status=="loading") handlecontent(ajaxinfo.cacheddata) }, expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){ var ajaxinfo=$targetHeader.data('ajaxinfo') if (ajaxinfo){ //if this content should be fetched via Ajax if (ajaxinfo.status=="none" || ajaxinfo.status=="loading") this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)}) else if (ajaxinfo.status=="cached"){ $targetContent.html(ajaxinfo.cacheddata) ajaxinfo.cacheddata=null ajaxinfo.status="complete" } } this.transformHeader($targetHeader, config, "expand") $targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){ config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated) if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0) if (targetLink) //if this header is a link setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled } }) }, collapseit:function($targetHeader, $targetContent, config, isuseractivated){ this.transformHeader($targetHeader, config, "collapse") $targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)}) }, transformHeader:function($targetHeader, config, state){ $targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes .removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand) if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)? $targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header $targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image } else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it $targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) else if (config.htmlsetting.location=="suffix") $targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) }, urlparamselect:function(headerclass){ var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL if (result!=null) result=RegExp.$1.split(',') return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair if (document·cookie.match(re)) //if cookie found return document·cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document·cookie = name + "=" + value + "; path=/" }, init:function(config){ document.write('<style type="text/css">\n') document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link document.write('<\/style>') jQuery(document).ready(function($){ ddaccordion.urlparamselect(config.headerclass) var persistedheaders=ddaccordion.getCookie(config.headerclass) ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion var $headers=ddaccordion.headergroup[config.headerclass] var $subcontents=ddaccordion.contentgroup[config.headerclass] config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties config.revealtype=config.revealtype || "click" config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter") if (config.revealtype=="clickgo"){ config.postreveal="gotourl" //remember added action config.revealtype="click" //overwrite revealtype to "click" keyword } if (typeof config.togglehtml=="undefined") config.htmlsetting={location: "none"} else config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects) var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded) if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array) expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3] if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded expandedindices=[] if (config["collapseprev"] && expandedindices.length>1) //only allow one content open? expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray()) if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header expandedindices=[0] $headers.each(function(index){ //loop through all headers var $header=$(this) if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag $('<span class="accordprefix"></span>').prependTo(this) $('<span class="accordsuffix"></span>').appendTo(this) } $header.attr('headerindex', index+'h') //store position of this header relative to its peers $subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers var $subcontent=$subcontents.eq(index) var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax if ($hiddenajaxlink.length==1){ $header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header } var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first) ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param lastexpanded={$header:$header, $content:$subcontent} } //end check else{ $subcontent.hide() config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter ddaccordion.transformHeader($header, config, "collapse") } }) $headers.bind("evt_accordion", function(e, isdirectclick){ //assign CUSTOM event handler that expands/ contacts a header var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed if ($subcontent.css('display')=="none"){ ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content? ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter } lastexpanded={$header:$(this), $content:$subcontent} } else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter } }) $headers.bind(config.revealtype, function(){ if (config.revealtype=="mouseenter"){ clearTimeout(config.revealdelay) var headerindex=parseInt($(this).attr("headerindex")) config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0) } else{ $(this).trigger("evt_accordion", [true]) //last parameter indicates this is a direct click on the header return false //cancel default click behavior } }) $headers.bind("mouseleave", function(){ clearTimeout(config.revealdelay) }) config.oninit($headers.get(), expandedindices) $(window).bind('unload', function(){ //clean up and persist on page unload $headers.unbind() var expandedindices=[] $subcontents.filter(':visible').each(function(index){ //get indices of expanded headers expandedindices.push($(this).attr('contentindex')) }) if (config.persiststate==false && $headers.length>0){ //persist state? expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value? ddaccordion.setCookie(config.headerclass, expandedindices) } }) }) } } //preload any images defined inside ajaxloadingmsg variable ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img')) /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "silverheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [12], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: true, //Should contents open by default be animated into view? persiststate: false, //persist state of opened contents within browser session? toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <style type="text/css"> .applemenu{ margin: 5px 0; padding: 0; width: 500px; /*largeur de l'acordeon*/ border: 1px solid #9A9A9A; color: #000; background-color: #0F6; font-weight: bold; background-color: #999; border-top-width: medium; border-right-width: 1; border-bottom-width: 1; border-left-width: 1; border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-color: #030; border-right-color: #030; border-bottom-color: #030; border-left-color: #030; height: auto; } .silverheader{ color: white; background-color: #096; border-top-width: medium; border-right-width: 1; border-bottom-width: 1; border-left-width: 1; border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-color: #030; border-right-color: #030; border-bottom-color: #030; border-left-color: #030; text-align: center; } .silverheader:hover{ background-color: #CF6; color: #CCC; cursor: help; } .applemenu div.submenu{ /*contenu*/ background: white; padding: 5px; height: 300px; /*hauteur de la div*/ color: #000; font-weight: normal; } </style> </head> <body> <div class="applemenu"> <div class="silverheader">Titre 1</div> <div class="submenu"> Contenu du titre 1<br /> </div> <div class="silverheader">Titre 2</div> <div class="submenu"> Contenu du titre 2<br /> </div> <div class="silverheader">Titre 3</div> <div class="submenu"> Contenu du titre 3<br /> </div> <div class="silverheader">Titre 4</div> <div class="submenu"> Contenu du titre 4<br /> </div> <div class="silverheader">Titre 5</div> <div class="submenu"> Contenu du titre 5<br /> </div> <center> <input type="button" value="Refermer le menu" Onclick="javascript:window.history.go(0)"> <br /> </center> </div> </body> </html>

A+

par Karmixi Mer 9 Nov 2011 - 15:28

Merci :3

par Dark Raviel Mer 9 Nov 2011 - 15:31

Y avait pas besoin de java pour menu cliquable c'est tout à fait possible en CSS avec des classes héritées.

par Karmixi Mer 9 Nov 2011 - 15:33

C'est-à-dire? °°

par Dark Raviel Mer 9 Nov 2011 - 15:37

Par exemple en CSS tu as

.main_menu{
codes;
}
.main_menu_2 = ceci est l'élement hérité, ce la veut dire qu'il détient le CSS du premier élement que tu peux en ajouter.

J'essairais de trouver un codage CSS d'exemple.

par Karmixi Mer 9 Nov 2011 - 15:43

D'accord, merci Very Happy

par missx Mer 9 Nov 2011 - 18:00

Dark Raviel a écrit:Y avait pas besoin de java pour menu cliquable c'est tout à fait possible en CSS avec des classes héritées.

comme le premier que j'avais proposé.

par Karmixi Sam 12 Nov 2011 - 11:08

Ah d'accord o_o

Accordéon vertical dans un simple message.

Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.

Re: Accordéon vertical dans un simple message.