CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Questions sur le tuto "Créer un accordéon vertical" | |
| Alluna
{ Membre }
Messages : 21
| Bonjour, merci pour ce tutoriel ! Juste une chose, l'exemple ne fonctionne plus. Est-ce que c'est ce genre de choses que tu appelles accordéon ? | | |
| | | Kiowa
{ Membre }
Messages : 125
| Donc je vais te répondre, malgré le fait que je n'arrive nullement à voir quelque chose sur le lien que tu as donnés, aller savoir ce qui se passe réellement avec ces codes,
enfin bref, c'est simple, l'accordéon Verticale est simplement que lorsque tu clique, ou pointe ta souris sur l'onglet celle-ci se dévoile verticalement et non horizontalement.
Exemple: http://astuforum.free.fr/exemple/menu_accordeon.html | | |
| | | Alluna
{ Membre }
Messages : 21
| Aaah merci pour l'exemple ! C'est pas exactement ça sur le lien que j'ai donné, et c'est très long (parfois impossible) à charger chez moi. | | |
| | | Kiowa
{ Membre }
Messages : 125
| Eh bien je te dirais simplement que moi j'ai pas réussi du tout à le charger.. xD donc c'est pour cela je suis aller te chercher un exemple | | |
| | | Tupac
{ Membre actif }
Messages : 368
| Bonjour En fait il faut héberger un deuxième javascript en complément de celui qui est proposé dans le tuto. Je vous redonne le code au complet. La partie CSS. - Spoiler:
- Code:
-
.kwicks { list-style: none; position: relative; margin: 0; padding: 0; } .kwicks li{ display: block; overflow: hidden; padding: 0; cursor: pointer; }
#example3 .kwicks li{ width: 125px; height: 100px; margin-bottom: 3px; } #example3 #kwick1 { background-color: #FF5100; } #example3 #kwick2 { background-color: #B33900; } #example3 #kwick3 { background-color: #FFD000; } #example3 #kwick4 { background-color: #B39200; margin-bottom: none; }
La partie HTML. - Spoiler:
- Code:
-
<div id="example3"> <ul class="kwicks"> <li id="kwick1"></li> <li id="kwick2"></li> <li id="kwick3"></li> <li id="kwick4"></li> </ul> </div>
Le premier javascript. - Spoiler:
- Code:
-
$().ready(function() { $('#example3 .kwicks').kwicks({ max : 205, spacing : 3, isVertical : true }); });
et pour finir le second. - Spoiler:
- Code:
-
/* Kwicks for jQuery (version 1.5.1) Copyright (c) 2008 Jeremy Martin http://www.jeremymartin.name/projects.php?project=kwicks Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
Any and all use of this script must be accompanied by this copyright/license notice in its present form. */ (function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
| | |
| | | Psycho
Psychopathe
Messages : 3407
| Bonjour à tous (:
Pour commencer Kiowa et Alluna, comme Orange l'indique dans les "règles" des tutoriels : - Citation :
- Les commentaires/remerciement sont ouverts pour les tutoriels, cependant aucun support ne sera fait directement dans les sujets des tutos.
Si vous avez une quelconque question, rendez-vous http://www.css-actif.com/f17-aide-css-xhtml (:
Ensuite Tupac, si tu as une quelconque amélioration à apporter, je te propose de poster ton propre tutoriel en indiquant qu'il en existe déjà un sur le même sujet.
En règle générale, l'entraide n'est pas acceptée dans les tutoriels. Merci à tous pour votre compréhension EDIT : je déplace le tout en section Aide, merci de votre compréhension (: |
Dernière édition par Psycho le Dim 01 Avr 2012, 15:04, édité 1 fois | |
| | | Contenu sponsorisé
| | | | | Questions sur le tuto "Créer un accordéon vertical" | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|