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
    avatar
    Glycérine
    FémininAge : 29Messages : 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.




    avatar
    Shanilae
    FémininAge : 25Messages : 78

    le Lun 19 Aoû 2013 - 23:57

    Merci=)
    avatar
    Fallaha
    FémininMessages : 80

    le Mar 17 Sep 2013 - 1:35

    mmmmeeeeerrrrccciiii!!!!!
    avatar
    tamanegeek
    MasculinAge : 19Messages : 167

    le Sam 21 Sep 2013 - 21:55

    Merci pour la PA, je la mettrai sur mon forum !
    avatar
    Luna_Rakuen
    FémininAge : 26Messages : 79

    le Mar 24 Sep 2013 - 1:47

    j'espère que ça va plus fonctionner que ceux de sparrow pour mon forum e_e
    avatar
    Pomme-de-terre
    FémininAge : 19Messages : 32

    le Ven 4 Oct 2013 - 16:27

    merci beaaaaaaaaaaaaaaauuuuuuuuuuuuuucccccoooooooooooouuuuuuuuuppppppp <3
    avatar
    Rhythm Star
    FémininAge : 18Messages : 52

    le Ven 4 Oct 2013 - 21:27

    Merci bien~



    avatar
    Invité

    le Mar 8 Oct 2013 - 10:07

    J'ai enfin trouvé mon bonheur merciiiiiiiiii :)
    avatar
    Miley Destiny
    FémininAge : 22Messages : 25

    le Dim 13 Oct 2013 - 16:52

    Merci !
    avatar
    Asriel
    FémininAge : 23Messages : 120

    le Sam 19 Oct 2013 - 18:33

    Merci pour le partage !



    avatar
    Joxtop
    FémininAge : 26Messages : 47

    le Lun 2 Déc 2013 - 17:14

    Merci Very Happy
    avatar
    Drysfer
    MasculinAge : 28Messages : 71

    le Lun 9 Déc 2013 - 4:54

    Merci



    avatar
    Pony
    FémininAge : 18Messages : 8

    le Jeu 12 Déc 2013 - 16:15

    Merci merci merci !  jolie P.A. chouette ^^



    avatar
    Toonsi
    MasculinAge : 20Messages : 40

    le Sam 28 Déc 2013 - 12:43

    merci
    avatar
    masdan
    MasculinAge : 61Messages : 1

    le Dim 12 Jan 2014 - 4:27

    Bonjour,

    Je vais essayer ce codage,
    avatar
    JonathanLeGrand
    MasculinAge : 22Messages : 28

    le Dim 12 Jan 2014 - 8:53

    merci
    avatar
    JonathanLeGrand
    MasculinAge : 22Messages : 28

    le Dim 12 Jan 2014 - 8:54

    merci
    avatar
    Babiroussa
    MasculinAge : 28Messages : 33

    le Lun 13 Jan 2014 - 18:41

    Merci :)
    avatar
    Mimie valdroff
    FémininAge : 26Messages : 13

    le Mar 14 Jan 2014 - 23:47

    Oh c'est super comme code :3 !!
    avatar
    Lindaóma
    FémininAge : 20Messages : 150

    le Sam 25 Jan 2014 - 13:10

    Merci beaucoup pour le code :)



    avatar
    Ichigo'
    MasculinAge : 24Messages : 35

    le Dim 26 Jan 2014 - 20:25

    Merci *w*
    avatar
    Lunaya
    FémininAge : 22Messages : 10

    le Dim 2 Fév 2014 - 12:42

    Simple, mais joli ! ♥
    avatar
    webs
    MasculinAge : 25Messages : 1097

    le Dim 9 Fév 2014 - 23:17

    merci



    avatar
    Mzelle Quouwaa
    FémininAge : 22Messages : 27

    le Dim 2 Mar 2014 - 19:30

    Merci beaucoup =D
    avatar
    MOON LEE
    FémininAge : 24Messages : 149

    le Mer 5 Mar 2014 - 12:38

    Merci
    avatar
    KaosWentCookie
    MasculinAge : 28Messages : 6

    le Mer 5 Mar 2014 - 13:26

    J'adore ! Il me le faut ! xD Merci <3
    Contenu sponsorisé


      La date/heure actuelle est Mer 14 Nov 2018 - 19:09