Menu accordéon "plat"

[Daelie]

Bonjour,

Je viens vous exposer mon soucis avec le codage d'un menu en accordéon. Malgré mes recherches et mes nombreuses bidouilles, je n'ai pas trouvé mon bonheur. Je m'en remets donc à vous.

J'aimerai créer sur ma page d'accueil (qui est une page html et non le portail/forum) un menu en accordéon. Mais il reste plat, tous les slides sont les uns sous les autres et aucune interaction n'est possible. Pourtant le java est activé et placé, je pense que cela vient de ma page Html que je dois mal compléter.

Je pensais trouver ma solution dans ce sujet, mais mon problème persiste:
https://forum.forumactif.com/t339060-menu-accordeon

Mes deux pages contenants mes codes.
Le java:

Code:

$(document).ready(function() {
          $("#accordeon-pa").each(function(){
            $(this).liteAccordion({
              autoPlay:true,
              pauseOnHover:true,
              rounded:true,
              enumerateSlides:true,
              containerWidth: 960,
              containerHeight: 320
            })
          });
        });
        /*************************************************!
        *
        *  project:    liteAccordion - a horizontal accordion plugin for jQuery
        *  author:    Nicola Hibbert
        *  url:        http://nicolahibbert.com/liteaccordion-v2/
        *  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
        *
        *  Version:    2.0.2
        *  Copyright:  (c) 2010-2011 Nicola Hibbert
        *  Licence:    MIT
        *
        **************************************************/
        (function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"click",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===8){c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery);

La page HTML:

Code:

<!DOCTYPE html>
                <html lang="fr">
                <head>
                  <title>Titre de la page HTML</title>
                  <meta charset="utf-8" />
                  <style>
                              @charset 'utf-8';
        /*************************************************!
        *
        *  project:    liteAccordion - a horizontal accordion plugin for jQuery
        *  author:    Nicola Hibbert
        *  url:        http://nicolahibbert.com/liteaccordion-v2/
        *  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
        *
        *  Version:    2.0.2
        *  Copyright:  (c) 2010-2011 Nicola Hibbert
        *  Licence:    MIT
        *
        **************************************************/
        /****************************************** Core */
        .accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
        .accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
        .accordion .slide > h2 {
          color: black;
            font-size: 16px;
          font-weight: normal;
          margin: 0;
          z-index: 100;
          position: absolute;
          top: 0;
          left: 0;
          -webkit-transform: translateX(-100%) rotate(-90deg);
          -webkit-transform-origin: right top;
          -moz-transform: translateX(-100%) rotate(-90deg);
          -moz-transform-origin: right top;
          -o-transform: translateX(-100%) rotate(-90deg);
          -o-transform-origin: right top;
          transform: translateX(-100%) rotate(-90deg);
          transform-origin: right top;
          -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
        .accordion .slide > h2 span {
            display: block;
            padding-right: 8%;
            text-align: right;
            height: 90%;
            margin-top: 5px;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
        .accordion .slide > h2 b {
            display: inline-block;
            position: absolute;
            top: 13%;
            left: 10%;
            text-align: center;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
          -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        }
        .accordion .slide > h2:hover { cursor: pointer }
        .accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
        .accordion noscript p { padding: 10px; margin: 0; background: white }
       
        /***************************************** Light */
        .accordion {
            border: 9px solid white;
            border-bottom-width: 8px;
            padding: 5px 5px 6px 0;
            background: #a0a0a0;
            -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
            -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
            -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
          box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
        }
        .accordion .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
        .accordion .slide > h2 span {
            background: #fcfcfc;
            background: -moz-linear-gradient(left,  #fcfcfc 0%, #ededed 100%);
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
            background: -webkit-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
            background: -o-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
            background: -ms-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
            background: linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
            -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
            -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
            -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
          box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
            color: #909090;
        }
        .accordion .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
        .accordion .slide > h2.selected span, .accordion .slide h2.selected span:hover, .accordion .slide > h2.selected b { background: #ffffff }
        .accordion .slide > div { background: #a0a0a0; margin-left: 5px }
       
        /*************************************** Rounded */
        .rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
        .rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
       
        /******************************************** IE */
        .ie .slide > h2 b { top: 42%; left: 5% }
        .ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
        .ie.accordion .slide > h2 b { top: 44% }
        .accordion .slide > h2 span { filter: none }
       
        /******************************************** FA */
        .accordion figure .full { width: 100%; height: 100%; }
        .accordion h2 { border: none; }
       
        /* centrer l'accordéon */
        .accordion { margin: auto; }
                  </style>
                </head>
       
                  <body>
                              <div id="accordeon-pa" class="accordion">
            <ol>
                <li>
                    <h2><span>Slide 1</span></h2>
                    <div>
                      <figure>
                        <img class="full" src="http://i.imgur.com/SHaqP.jpg" alt="image" />
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Slide 2</span></h2>
                    <div>
                      <figure>
                        <img class="full" src="http://i.imgur.com/v5LuU.jpg" alt="image" />
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Slide 3</span></h2>
                    <div>
                      <figure>
                        <img class="full" src="http://i.imgur.com/VdDge.jpg" alt="image" />
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Slide 4</span></h2>
                    <div>
                      <figure>
                        <img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Slide 5</span></h2>
                    <div>
                      <figure>
                        <img class="full" src="http://i.imgur.com/Wl1P6.jpg" alt="image" />
                      </figure>
                    </div>
                </li>
            </ol>
        </div>
                  </body>
                </html>

J'ai pris pour base le tutoriel de forumactif pour créer ce menu.


Merci par avance de vos réponses!

[Ninel]

Bonjour,
Avez-vous activé la gestion des codes javascripts ?
La P.A marche très bien sur mon forum de test : http://bleu-test.forumsactifs.com/

Sinon, c'est que vous avez dû faire quelque chose d'autre x)

[Daelie]

J'ai réussi à bidouiller et résoudre le problème en changeant de codage pour le menu accordéon.

Le soucis venait des codes javascript qui apparemment ne se chargeaient pas malgré le lien qui y renvoyait..

Peut-être parce que je travaillais sur une page html et non sur le forum via le message d'accueil.