AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


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

    Partagez
    Glycérine
    Glycérine
    FémininAge : 30Messages : 308

    le 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>
    <!-- Merci de ne PAS enlever le crédit ! Il est fait pour être en petit, de la couleur de vos liens, en dessous de l'accordéon, il ne fera pas fuir vos membres ;) et il permet de remercier le créateur du code que vous utilisez pour votre propre forum [Sparrow-style] -->
    <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 Wink
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.




    Broken Memoria
    Broken Memoria
    MasculinAge : 24Messages : 8

    le Dim 26 Aoû 2012 - 1:59

    Je suis un curieux, je veux voir 8D

    Non plus sincèrement, merci pour le code Very Happy
    Cherry'
    Cherry'
    FémininAge : 22Messages : 67

    le Dim 26 Aoû 2012 - 14:38

    Merci pour le codage :)
    Il va beaucoup m'aider :)
    Kimchi
    Kimchi
    FémininAge : 21Messages : 22

    le Dim 26 Aoû 2012 - 22:27

    Merci Glycérine. :3



    picka230
    picka230
    FémininAge : 53Messages : 93

    le Mar 28 Aoû 2012 - 15:43

    merci
    Espérance
    Espérance
    FémininAge : 21Messages : 48

    le Mar 28 Aoû 2012 - 17:55

    Merci. :popcorn:



    Alaynna
    Alaynna
    FémininAge : 26Messages : 74

    le Jeu 30 Aoû 2012 - 8:45

    Comme je suis du genre curieuse, je veux voir x)



    -- If we don't have the key we can't open we can't open whatever it is, we don't have, that it unlocks, so what purpose would be served in finding whatever need be unlocked, which we don't have, without first having found the key that unlocks it?
    -- So we're going after this key?
    -- You're not making any sense at all.
    Slown
    Slown
    FémininAge : 23Messages : 62

    le Sam 1 Sep 2012 - 12:45

    Merci ♥
    Le chat bleu
    Le chat bleu
    FémininMessages : 44

    le Dim 2 Sep 2012 - 22:30

    Merci beaucoup !
    Mimi-Haine
    Mimi-Haine
    FémininAge : 19Messages : 32

    le Mar 4 Sep 2012 - 17:14

    Oh Oui j'aime ♥ Parfait pour débuter mon premier PA *sors* Merci beaucoup ♥



    Little Pon
    Little Pon
    FémininAge : 23Messages : 45

    le Mer 5 Sep 2012 - 18:43

    Je veux essayer ♥



    Irys
    Irys
    FémininAge : 29Messages : 145

    le Ven 7 Sep 2012 - 15:56

    Merci beaucouuuuuup ! :3




    Waht is your name?
    Hikito Tomonashi
    Hikito Tomonashi
    MasculinAge : 24Messages : 5

    le Ven 7 Sep 2012 - 20:32

    je veux voir
    Flammy
    Flammy
    FémininAge : 20Messages : 8

    le Lun 10 Sep 2012 - 23:17

    Merci. :3




    Merci Times. :3
    karma71620
    karma71620
    MasculinAge : 26Messages : 19

    le Jeu 20 Sep 2012 - 23:05

    Merci beaucoup ! Razz
    azzae
    azzae
    MasculinAge : 32Messages : 1

    le Lun 24 Sep 2012 - 19:59

    Merci :love:
    Exogenesis
    Exogenesis
    FémininAge : 27Messages : 62

    le Mar 25 Sep 2012 - 10:20

    Merciiii pour le tuto ! :love:
    Haileen
    Haileen
    FémininAge : 24Messages : 43

    le Ven 28 Sep 2012 - 11:20

    Merci pour ce tuto! ♥
    AQW
    AQW
    FémininAge : 24Messages : 224

    le Dim 30 Sep 2012 - 21:27

    Je vais voir et j'éditerais si questions il y à ~



    Blblbl. ♥
    Hayate747
    Hayate747
    MasculinAge : 29Messages : 196

    le Mar 2 Oct 2012 - 18:57

    Merci beaucoup !! :)
    DoDo94
    DoDo94
    MasculinAge : 25Messages : 104

    le Jeu 4 Oct 2012 - 15:16

    Merci beaucoup =)



    [center]
    <~::Kit by Moi::~>
    mini-mimi
    mini-mimi
    FémininAge : 22Messages : 75

    le Sam 6 Oct 2012 - 10:20

    Merci :hug:
    Hayate747
    Hayate747
    MasculinAge : 29Messages : 196

    le Dim 7 Oct 2012 - 16:04

    Merci Wink
    Shinøbi
    Shinøbi
    MasculinAge : 18Messages : 29

    le Dim 7 Oct 2012 - 16:52

    Merci. =D
    Noctali
    Noctali
    FémininAge : 21Messages : 19

    le Mer 17 Oct 2012 - 17:41

    siteplaaaaîîît !!
    Merchi !! x)
    Shiney
    Shiney
    FémininAge : 20Messages : 26

    le Ven 19 Oct 2012 - 18:28

    Ça va m'être très utile, merci ! *-*
    Contenu sponsorisé


      La date/heure actuelle est Jeu 24 Jan 2019 - 9:25