C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Slideshow horizontal infini
Hier à 08:26 par Leiris

» Infobulle avec effets CSS3
Hier à 01:35 par Helena-Bella

» Limitation de la signature
Ven 18 Aoû 2017, 23:36 par Helena-Bella

» Effet de volet glissant sur un bloc
Ven 18 Aoû 2017, 18:56 par Blocku

» Dimensions des avatars
Ven 18 Aoû 2017, 06:12 par Mortuus

» Signature codée
Jeu 17 Aoû 2017, 22:31 par Helena-Bella

» Signature codée
Jeu 17 Aoû 2017, 22:27 par Helena-Bella

» Signature codée avec onglets
Jeu 17 Aoû 2017, 22:18 par Helena-Bella


Partagez | 
 

Créer un Accordéon Vertical

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.ryotopub.com
avatar
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 5163



Créer un Accordéon Vertical


Informations générales

Description :
Aujourd'hui, nous allons apprendre à créer un accordéon vertical. Au contraire de celui proposé par Kaiji (horizontal), il va pouvoir être utilisé sur Internet Explorer convenablement.

Par ailleurs, la procédure est très simple, il va nous falloir ajouter un code Javascript ainsi qu'un quelques codes CSS Wink

Source du Code (En Anglais)

Démo :
Démo de l'Accordéon

Testé sur :
Firefox | Chrome | Opera | Safari | Internet Explorer

Crédits :
Proposé par Haribot' ♪ le 23/12/2010 | Tutoriel validé par Haribot' ♪
Mise à jour :
Correction des liens et refonte générale par 'Christa le 1/04/2012

Le tutoriel

Installation du script


Rendez vous sur votre panneau d'administration, dans l'onglet modules puis dans "gestion des codes javascript" :

1) Créez un nouveau code javascript du nom de Plugin Kwicks en y collant le code contenu sur la page suivante : ICI (Si jamais il n'y était plus, vérifiez à cette adresse et récupérez le javascript compressé (packed).

2) Créez un autre code javascript intitué initiation accordéon et indiquez le code suivant :
Code:
$().ready(function() { 
    $('.kwicks').kwicks({ 
        max : 205, 
        spacing : 3, 
        isVertical : true 
    }); 
});

Vous pouvez le personnaliser :
max = La valeur "maximale" d'un panneau quand il est survolé, vous pouvez remplacer par min pour avoir la valeur minimale (sans survol)
spacing = l'espacement entre deux blocs

Si vous souhaitez que les blocs se déplient au clic, utilisez plutôt le code suivant :
Code:
$().ready(function() { 
    $('.kwicks').kwicks({ 
        max : 205, 
        spacing : 3, 
        isVertical : true,
      sticky : true, 
        event : 'click'       
    }); 
});


Installation du CSS


Pour installer le CSS, c'est très simple, placez le code ci-dessous dans votre Feuille de Style :
Code:

.kwicks {
   list-style: none;
   position: relative;
   margin: 0;
   padding: 0;
}
.kwicks li{
   display: block;
   overflow: hidden;
   padding: 0;
   cursor: pointer;
}

.kwicks li{ 
    width: 125px; 
    height: 100px; 
    margin-bottom: 3px; 

#kwick1 { 
    background-color: #FF5100; 

#kwick2 { 
    background-color: #B33900; 

#kwick3 { 
    background-color: #FFD000; 

#kwick4 { 
    background-color: #B39200; 
    margin-bottom: none; 
}
Voilà, terminé avec le CSS !

Le code HTML


Pour le code HTML, c'est très simple, je vais vous expliquer :
Code:
<ul class="kwicks" > 
    <li id="kwick1">CONTENU PREMIER PANNEAU</li> 
    <li id="kwick2">CONTENU DEUXIEME PANNEAU</li> 
    <li id="kwick3">CONTENU TROISIEME PANNEAU</li> 
    <li id="kwick4">CONTENU QUATRIEME PANNEAU</li> 
</ul>
On utilise une liste HTML pour afficher l'accordéon. Pour rajouter un volet (panneau), il faut rajouter une ligne avant < / ul > de ce genre (en modifiant la valeur numérique pour chaque ligne ajoutée) :
Code:
<li id="kwick5">CONTENU DU PANNEAU 5</li>
Et bien évidemment, il faut rajouter une propriété CSS #kwick5 pour personnaliser ce panneau si besoin est !
A l'intérieur des balises li, vous devrez mettre le contenu de l'accordéon! Wink

Le Tutoriel est désormais terminé! Wink J'espère que vous avez tout compris Smile
MessageSujet: Créer un Accordéon Vertical   Jeu 23 Déc 2010, 04:44
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Créer un Accordéon Vertical   Mar 06 Déc 2011, 09:46
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.respect-forum.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 56



merci
MessageSujet: Re: Créer un Accordéon Vertical   Dim 01 Avr 2012, 09:51
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



Bonjour à tous,

J'ai remis le tutoriel en page et rajouté les liens nécessaires à la démonstration, pour le reste il ne s'agissait peu ou prou que de la traduction du site officiel concernant ce plugin Wink J'en ai profité pour mettre le tutoriel à jour puisqu'il est désormais possible d'ajouter facilement des scripts javascript sur FA.



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Créer un Accordéon Vertical   Dim 01 Avr 2012, 14:56
Revenir en haut Aller en bas
Invité
Invité




    Kya !!!!! Milles merci pour cette astuce c'est exactement ce dont j'avais besoin <3
MessageSujet: Re: Créer un Accordéon Vertical   Sam 12 Mai 2012, 06:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://gdm-addict.forum-canada.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 31



Merci ! (:
MessageSujet: Re: Créer un Accordéon Vertical   Mer 21 Nov 2012, 22:24
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.creaillusionfantasy.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 238



Merci


MessageSujet: Re: Créer un Accordéon Vertical   Sam 24 Nov 2012, 11:52
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 31



Bonjour,

Est-il de l'utiliser en tant que simple membre d'un forum?
Par exemple dans une chronologie ou autre. Bien évidemment, il va de soi que je ne vais pas demander aux administrateurs d'installer le CSS rien que pour moi, après tout...

Merci beaucoup!
MessageSujet: Re: Créer un Accordéon Vertical   Mar 27 Nov 2012, 15:08
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://infinite-world.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 26



*fait un gros câlin *

Merci beaucoup ;A;
MessageSujet: Re: Créer un Accordéon Vertical   Sam 08 Déc 2012, 11:16
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
{ Membre }
{ Membre }

Féminin Messages : 4



Mooi ça ne fonctionne pas Sad
MessageSujet: Re: Créer un Accordéon Vertical   Lun 23 Sep 2013, 00:07
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 30



Merci !
MessageSujet: Re: Créer un Accordéon Vertical   Lun 23 Sep 2013, 21:49
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://helter-s.forumactif.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 43



Merci beaucoup !
MessageSujet: Re: Créer un Accordéon Vertical   Mar 01 Avr 2014, 20:37
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Créer un Accordéon Vertical   
Revenir en haut Aller en bas
 

Créer un Accordéon Vertical

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Menu accordéon vertical sur toutes les pages .
» Accordéon vertical dans un simple message.
» Menu accordéon VERTICAL
» Accordéon Vertical : changer l'opacité ?
» Créer un Accordéon Vertical

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Mise en oeuvre-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit