AccueilRechercherS'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 : 32Messages : 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.




    Shanyme Thibolt
    Shanyme Thibolt
    FémininAge : 27Messages : 153

    Sam 8 Nov 2014 - 21:31

    J'adore, merci
    meolyne
    meolyne
    FémininAge : 37Messages : 74

    Mar 18 Nov 2014 - 13:01

    merciii pour ce PA ! je le cherche depuis un moment :)
    Csteel
    Csteel
    FémininAge : 26Messages : 19

    Ven 16 Jan 2015 - 20:53

    Merci!
    Dark Fairy
    Dark Fairy
    FémininAge : 23Messages : 242

    Mar 10 Fév 2015 - 14:46

    Merci!
    CapriceK
    CapriceK
    FémininAge : 29Messages : 254

    Mar 24 Fév 2015 - 9:45

    Merci pour ce tuto super pratique :)
    Krager
    Krager
    MasculinAge : 25Messages : 67

    Sam 7 Mar 2015 - 23:06

    merci
    Viou
    Viou
    FémininAge : 32Messages : 181

    Dim 8 Mar 2015 - 12:38

    J'adore ** merci beaucoup
    Viou
    Viou
    FémininAge : 32Messages : 181

    Dim 8 Mar 2015 - 12:44

    Je ne vois pas le html Sad
    avatar
    Phénix'
    FémininAge : 19Messages : 95

    Jeu 26 Mar 2015 - 17:30

    Merci
    deli
    deli
    FémininAge : 27Messages : 7

    Ven 10 Avr 2015 - 21:25

    Merci pour ce code qui m'a l'air bien intéressant *-*
    Nox
    Nox
    FémininAge : 21Messages : 8

    Ven 24 Avr 2015 - 21:23

    Merci !



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 11 226103Signanoxutopia
    BloodyMoony
    BloodyMoony
    FémininAge : 28Messages : 76

    Dim 23 Aoû 2015 - 18:08

    Super PA

    Merci ^^
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2433

    Dim 23 Aoû 2015 - 20:54

    Merci (*´▽`*)
    SweetieBay
    SweetieBay
    FémininAge : 28Messages : 146

    Lun 31 Aoû 2015 - 19:26

    merci du partage =)
    senda95
    senda95
    MasculinAge : 27Messages : 35

    Jeu 8 Oct 2015 - 1:23

    merci !
    avatar
    Linéa
    FémininAge : 25Messages : 14

    Jeu 8 Oct 2015 - 9:45

    Super ! Merci !
    avatar
    Linéa
    FémininAge : 25Messages : 14

    Jeu 8 Oct 2015 - 9:45

    Super ! Merci !
    wiise
    wiise
    FémininAge : 27Messages : 50

    Ven 23 Oct 2015 - 22:53

    J'aime !



    PA/QEEL en accordeon horizontal sur clic [HTML/CSS/JAVASCRIPT] - Page 11 140051NUban
    Elewen
    Elewen
    FémininAge : 20Messages : 22

    Sam 2 Jan 2016 - 11:06

    Merci !
    Hellow
    Hellow
    MasculinAge : 26Messages : 33

    Dim 3 Jan 2016 - 11:42

    Merci Very Happy
    Nartiifiice
    Nartiifiice
    FémininAge : 23Messages : 88

    Ven 22 Jan 2016 - 13:26

    merci
    jean-claude
    jean-claude
    MasculinAge : 46Messages : 44

    Dim 24 Jan 2016 - 14:58

    Merci beaucoup
    Kinst.MP
    Kinst.MP
    FémininAge : 22Messages : 53

    Sam 13 Fév 2016 - 18:12

    merci ~
    Dealhyeur
    Dealhyeur
    MasculinAge : 21Messages : 6

    Lun 15 Fév 2016 - 21:11

    Parfait ! Merci beaucoup !
    erfs
    erfs
    MasculinAge : 24Messages : 4

    Mar 16 Fév 2016 - 19:57

    C'est pile le type de PA que je cherchai, merci pour ce partage
    Contenu sponsorisé


      La date/heure actuelle est Mar 20 Avr 2021 - 2:24