Menu accordéon "plat"

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Menu accordéon "plat"

Message par Daelie le Lun 18 Fév 2013 - 11:59

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:
http://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!


Dernière édition par Daelie le Mer 27 Fév 2013 - 8:55, édité 1 fois

Daelie
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 27/11/2012

http://flantasmagoria.taguilde.net
Daelie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon "plat"

Message par Ninel le Lun 25 Fév 2013 - 9:32

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)

Ninel
****

Masculin
Messages : 228
Inscrit(e) le : 09/03/2011

Ninel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon "plat"

Message par Daelie le Mer 27 Fév 2013 - 8:55

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.

Daelie
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 27/11/2012

http://flantasmagoria.taguilde.net
Daelie a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum