AccueilDernières imagesRechercherS'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]

    Glycérine
    Glycérine
    FémininAge : 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>
    <!-- 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.




    Amasiser
    Amasiser
    FémininAge : 32Messages : 20

    Jeu 13 Mar 2014 - 14:11

    Merci
    avatar
    .erin
    FémininAge : 29Messages : 28

    Jeu 20 Mar 2014 - 15:08

    merci
    avatar
    Spartfly
    MasculinAge : 29Messages : 27

    Mer 26 Mar 2014 - 13:44

    Merci beaucoup !!
    Anonymous
    Invité

    Dim 20 Avr 2014 - 13:55

    Thanks!
    CharlyAndLiz
    CharlyAndLiz
    FémininAge : 29Messages : 17

    Lun 5 Mai 2014 - 21:50

    Merci :)
    CharlyAndLiz
    CharlyAndLiz
    FémininAge : 29Messages : 17

    Lun 5 Mai 2014 - 21:51

    Super PA !
    Aya Hanazawa
    Aya Hanazawa
    FémininAge : 33Messages : 72

    Mer 7 Mai 2014 - 16:11

    merci
    Ren haring
    Ren haring
    MasculinAge : 29Messages : 1009

    Lun 12 Mai 2014 - 22:04

    Magnifique PA . Merci pour le partage
    Glotoneria
    Glotoneria
    MasculinAge : 44Messages : 91

    Lun 19 Mai 2014 - 16:39

    Je prends ça, merci :)
    Pelezinho
    Pelezinho
    MasculinAge : 25Messages : 91

    Dim 8 Juin 2014 - 20:52

    Sa gère j'vais voir.



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    Anonymous
    Invité

    Ven 13 Juin 2014 - 16:38

    Je vais essayer merci !
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 21 Juin 2014 - 22:31

    Merci beaucoup miss
    Marwin
    Marwin
    MasculinAge : 31Messages : 47

    Dim 6 Juil 2014 - 0:48

    merci
    Daisy Hardman
    Daisy Hardman
    FémininAge : 26Messages : 60

    Mar 8 Juil 2014 - 18:01

    merci
    Loki
    Loki
    MasculinAge : 36Messages : 283

    Lun 14 Juil 2014 - 17:55

    merci :)
    Bim'
    Bim'
    FémininAge : 26Messages : 12

    Sam 19 Juil 2014 - 12:24

    Oh merci *^*
    Kyuso Jiro
    Kyuso Jiro
    MasculinAge : 30Messages : 8

    Lun 21 Juil 2014 - 15:31

    Très sympa pour le partage. Merci bien :) !



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 10 1405548572-jiro-ops
    LilyPanda
    LilyPanda
    FémininAge : 27Messages : 10

    Mar 22 Juil 2014 - 15:59

    Oh génial ! Je cherchais quelque chose dans ce goûts pour mon forum !
    J'essaye de suite !! Merci beaucoup !! :)
    Seikatsu Tengoku
    Seikatsu Tengoku
    MasculinAge : 29Messages : 11

    Lun 28 Juil 2014 - 11:15

    Merci!
    Pein94
    Pein94
    Age : 30Messages : 59

    Mar 29 Juil 2014 - 19:13

    Merci :)
    Darkshines
    Darkshines
    FémininAge : 33Messages : 10

    Sam 16 Aoû 2014 - 0:57

    Merci pour le partage =)
    Caine Lornan
    Caine Lornan
    MasculinAge : 43Messages : 87

    Ven 29 Aoû 2014 - 12:48

    Merci
    Scythe
    Scythe
    FémininAge : 34Messages : 41

    Dim 7 Sep 2014 - 6:11

    Je vais tester ça, merci !
    Insanities
    Insanities
    FémininAge : 29Messages : 40

    Jeu 11 Sep 2014 - 3:21

    Merci du partage !



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 10 Baby_b10
    Asuka
    Asuka
    FémininAge : 30Messages : 105

    Mer 24 Sep 2014 - 21:59

    Merci



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 10 975531MisakiHino3
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 13:37