Partagez
Aller en bas
avatar
Fondatrice
Fondatrice
Messages : 148
Points : 256

Feuille de personnage
Âge: 24 ans
Chambre: #3
Orientation : Bi
Voir le profil de l'utilisateurhttp://animationgraph.kanak.fr

Menu acordéon

le Dim 3 Aoû - 0:35
Le code Javascript, à placez dans panneau d'admin' > modules > gestion des codes javascript, cochez: sur l'index:

Code:
(function(f){f.fn.liteAccordion=function(e){var a=f.extend({},{containerWidth:960,containerHeight:320,headerWidth:48,firstSlide:1,onActivate:function(){},slideSpeed:800,slideCallback:function(){},autoPlay:!1,pauseOnHover:!1,cycleSpeed:6E3,theme:"basic",rounded:!1,enumerateSlides:!1},e),e=this.find("li"),k=e.length,i=a.containerWidth-k*a.headerWidth,b=e.children("h2"),c={getGroup:function(g,d){if(this.offsetLeft===g.left){return b.slice(d+1,k).filter(function(){return this.offsetLeft===b.index(this)*a.headerWidth})}else{if(this.offsetLeft===g.right){return b.slice(0,d+1).filter(function(){return this.offsetLeft===i+b.index(this)*a.headerWidth})}}},nextSlide:function(b){var d=b+1||a.firstSlide;return function(){return d++%k}},play:function(g){var d=c.nextSlide(g?g:"");c.playing=setInterval(function(){b.eq(d()).click()},a.cycleSpeed)},pause:function(){clearInterval(c.playing)},playing:0,sentinel:!1};this.height(a.containerHeight).width(a.containerWidth).addClass(a.theme).addClass(a.rounded&&"rounded");b.width(a.containerHeight).height(a.headerWidth).eq(a.firstSlide-1).addClass("selected");if(f.browser.msie){if(f.browser.version.substr(0,1)>8){b.css("filter","none")}else{if(f.browser.version.substr(0,1)<7){return!1}}}b.each(function(b){var d=f(this),c=b*a.headerWidth;b>=a.firstSlide&&(c+=i);d.css("left",c).next().width(i).css({left:c,paddingLeft:a.headerWidth});a.enumerateSlides&&d.append("<b>"+(b+1)+"</b>")});b.click(function(g){var d=f(this),j=b.index(d),e=d.next(),h={left:j*a.headerWidth,right:j*a.headerWidth+i,newPos:0},j=c.getGroup.call(this,h,j);if(this.offsetLeft===h.left){h.newPos=i}else{if(this.offsetLeft===h.right){h.newPos=-i}}if(!b.is(":animated")){if(g.originalEvent){if(c.sentinel===this){return!1}a.onActivate.call(e);c.sentinel=this}else{a.onActivate.call(e),c.sentinel=!1}b.removeClass("selected").filter(d).addClass("selected");j.animate({left:"+="+h.newPos},a.slideSpeed,function(){a.slideCallback.call(e)}).next().animate({left:"+="+h.newPos},a.slideSpeed)}});a.pauseOnHover&&this.hover(function(){c.pause()},function(){c.play(b.index(b.filter(".selected")))});a.autoPlay&&c.play();return this}})(jQuery);


La partie message d'accueil, à personnaliser, entre les balises span on met les titres entre les balises div on met le contenu:
Code:
<div class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>
<script>
    jQuery('.accordion').liteAccordion();
</script>

Enfin, la partie CSS à placer dans panneau d'admin' > affichage > couleurs > feuille de style CSS:
Code:
@charset 'utf-8';
/*************************************************
*
*  project:    liteAccordion - horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/horizontal-accordion-jquery-plugin
*  demo:        http://www.nicolahibbert.com/demo/liteAccordion
*
/*************************************************/
/****************************************** 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 li > h2 { color: black; font-weight: normal; margin: 0; z-index: 2; 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; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }
 
/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }
 
/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #353535\9; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #434343\9; }
.dark li > div { background: #030303; margin-left: 5px; }
 
/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 
/***************************************** Light */
/**************************************** Stitch */


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