PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT]

Lun 13 Fév 2012 - 23:33

Glycérine

Age : 35Messages : 308

Lun 13 Fév 2012 - 23:33

Rappel du premier message :

Et hop, en voilà un autre !

Bonjour, bonjour !

Aujourd'hui et pour ma seconde astuce, j'adapte encore un code de Sparrow-style ! xD Qui est, cette fois, l'accordéon horizontal ! De nouveau avec notre petit ami JavaScript !

>> Aperçu <<

Il est, tout comme son petit frère, modifiable en un peu tous les paramètres, attention néanmoins à la taille qui risque d'être plus capricieuse ! (Je vous déconseille personnellement de toucher aux tailles des titres...)

Allez ^^ Let's go !

Et comment qu'on fait ?

Je préviens, la manipulation est un tout petit peu plus complexe que la version "survol" et il faut que vous ayez le JavaScript activé sur votre forum. Mais je vais vous expliquer tout ça en détail, don't worry Willy.

1. Le HTML

Copiez/collez ce code là où vous voudrez voir apparaître votre accordéon (Page d'accueil, QEEL, autre...).

Code:: <div id="accueil"> <div class="page" id="page1"> <table class="contenu_page"> <tr> <td class="titre" style="width: 400px !important; overflow: hidden;"> <span class="page_titre">Titre page 1</span> </td> <td> <div class="contenu"> Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs. </div> </td> </tr> </table> </div> <div class="page" id="page2"> <table class="contenu_page"> <tr> <td class="titre" style="width: 40px; overflow: hidden;"> <span class="page_titre">Titre page 2</span> </td> <td> <div class="contenu"> Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs. </div> </td> </tr> </table> </div> <div class="page" id="page3"> <table class="contenu_page"> <tr> <td class="titre" style="width: 40px; overflow: hidden;"> <span class="page_titre">Titre page 3</span> </td> <td> <div class="contenu"> Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs. </div> </td> </tr> </table> </div> <div class="page" id="page4"> <table class="contenu_page"> <tr> <td class="titre" style="width: 40px; overflow: hidden;"> <span class="page_titre">Titre page 4</span> </td> <td> <div class="contenu"> Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs. </div> </td> </tr> </table> </div> <div class="page" id="page5"> <table class="contenu_page"> <tr> <td class="titre" style="width: 40px; overflow: hidden;"> <span class="page_titre">Titre page 5</span> </td> <td> <div class="contenu"> Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs. </div> </td> </tr> </table> </div> </div>  <span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2. Le CSS

Copiez/collez ce code dans la Feuille CSS de votre forum, c'est à dire : dans le Panneau d'Admin > Affichage > Couleurs > Feuille de style CSS.

Code:: #accueil { width: 900px; height: 400px; overflow: hidden; background: url(http://img11.hostingpics.net/pics/181185imagedefond.jpg) center no-repeat; border: 3px solid #272727; } #page1 { width: 40px; height: 400px; float: left; overflow: hidden; background-color: #555555; } #page2 { width: 40px; height: 400px; float: left; overflow: hidden; background-color: #777777; } #page3 { width: 40px; height: 400px; float: left; overflow: hidden; background-color: #9b9b9b; } #page4 { width: 40px; height: 400px; float: left; overflow: hidden; background-color: #bababa; } #page5 { width: 40px; height: 400px; float: left; overflow: hidden; background-color: #dcdcdc; } .current { width: 82% !important; height: 400px !important; } .contenu_page { width: 100%; height: 400px; } .page_titre { display: inline-block; height: 40px; width: 400px; margin-left: -180px; color: #ffffff; text-align: center; font-size: 24px; font-family: arial black; letter-spacing: 2px; text-shadow: 1px 1px 0px #5f5f5f; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .page_titre:hover { cursor: pointer; } .contenu { width: 670px; height: 380px; margin-left: -180px; overflow: none; background-color: white; overflow: hidden; padding: 6px; } .credit { display: block; text-align: right; margin-right: 20px; } .credit a { font-size: 10px; text-decoration: none !important; }

3. Le JavaScript

Pour le JavaScript, allez dans votre panneau d'administation > Module > Gestion des pages Javascript.

Vérifiez tout d'abord que le JavaScript est bien activé.

Ensuite, créez une nouvelle page avec le nom que vous voulez. Sélectionnez n'importe lequel des choix sauf index et copiez/collez ce code dans votre page :

Code:: // Code par Glycérine [Never-Utopia] $("#accueil .page .contenu").hide(); $("#accueil .page .current").parent().find(".contenu").fadeIn("slow", "linear"); $("#accueil .page .page_titre").click( function () { //$(this).parent().parent().parent().parent().parent().siblings().find(".contenu").fadeToggle("slow"); if($(this).parent().parent().parent().parent().parent().hasClass("current")) { $(this).parent().parent().parent().parent().parent().find(".contenu").fadeOut("normal",function () { $("#accueil div.page").removeClass("current"); }); } else { $(this).parent().parent().parent().parent().parent().find(".contenu").fadeOut("normal",function () { $("#accueil div.page").removeClass("current"); $(this).parent().parent().parent().parent().parent().toggleClass("current"); }); } $(this).parent().parent().parent().parent().parent().find(".contenu").fadeIn("slow"); return false; } );

Validez et retourner sur la gestion de vos pages. Votre page est créée et son lien est normalement dans la liste. Copiez le et gardez le.

Ensuite, à la suite du code HTML que vous avez ajouter un peu plus tôt, juste en dessous, vous ajoutez cette ligne en remplaçant les xxx par le lien de votre page JavaScript que vous gardez précieusement.

Code:: <script type="text/javascript" src="xxx"></script>

Je vais citer Sparrow pour ce qui est des crédits de Never-Utopia Wink

Je le répète, mais svp n'enlevez pas le crédit en fin de code ! Je suis très généreux mais j'apprécie d'avoir un remerciement et j'estime que celui-ci est correct, pas excessivement voyant et normal pour utiliser quelque chose que j'ai mis du temps à réaliser

Vos commentaires et remerciements sont toujours bienvenus ^^

Si vous avez des problèmes avec ce LS, venez poster ici.