Créer un menu horizontal en accordéon

[Matthieu A.]

Bonjour à tous,

je souhaiterais créer un menu accordéon horizontal sur mon forum:
j'ai suivi ce tutoriel mais cela ne fonctionne pas: https://forum.forumactif.com/t327581-message-d-accueil-en-accordeon?highlight=accord%E9on

en effet les images sont les unes au dessous des autres et il n'y a aucun effet d'accordéon. De plus le thème du menu n'apparaît pas !! J'ai seulement des écritures avec des images , le tout verticalement !

pourtant j'ai fait tout ce qu'il fallait faire et la gestion des javascripts est activée

Texte javascript:

Spoiler:

CSS:

Spoiler:

HTML

Spoiler:

auriez vous des idées ?

[Scipion]

Bonjour

Avec ces codes, je crois que votre accordéon va fonctionner. A chaque étape, vous devez supprimer l'ancien code et remplacer par les suivants :

Code javascript :

Code:

$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:true,
      containerWidth: 960,
      containerHeight: 320
    })
  });
});
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
(function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"click",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===8){c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery);

CSS : ne rien changer

HTML :

Code:

<div id="accordeon-pa" class="accordion">
<ol>
<li>
<h2><span>Slide 1</span></h2><div>
<figure>
<img class="full" src="http://i72.servimg.com/u/f72/16/20/81/12/shaqp10.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 2</span></h2><div>
<figure>
<img class="full" src="http://i72.servimg.com/u/f72/16/20/81/12/v5luu10.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 3</span></h2><div>
<figure>
<img class="full" src="http://i72.servimg.com/u/f72/16/20/81/12/vddge10.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 4</span></h2><div>
<figure>
<img class="full" src="http://i72.servimg.com/u/f72/16/20/81/12/ewud010.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 5</span></h2><div>
<figure>
<img class="full" src="http://i72.servimg.com/u/f72/16/20/81/12/wl1p610.jpg" alt="image" />
</figure>
</div>
</li>
</ol>
</div>

Cordialement

[Matthieu A.]

Merci de m'avoir répondu

-ces codes fonctionnent parfaitement

- mais j'aimerai que lorsque l'on clique sur une image, on soit redirigé vers un autre lien

comment peut on faire ??

encore merci

[Scipion]

Vers quel type de lien la redirection devrait se faire selon vos souhaits, un site partenaire ? Il me faudrait un exemple, c'est à dire une adresse internet d'un site, pour faire un test de fonctionnalité.


Cordialement

[Matthieu A.]

J'ai actuellement un forum (essentiellement de culture, sciences et technos) peu développé car j'essai d'explorer un grand nombres d'idées pour faire de ce forum un site potable.

j'aimerais donc me servir de ce menu accordéon pour accéder plus rapidement à certaines parties du forum. voici le lien: http://www.ascg.cultureforum.net/forum

vous verrez que j'essai aussi actuellement un autre type de menu accordéon (avec les images qui redirigent vers des liens internes au forum) mais la forme générale de ce dernier ne me plait pas trop. C'est pour cela que je veux changer

[Scipion]

Votre idée est respectable et en même temps astucieuse.

Donc, pour réaliser ce que vous souhaitez, suivez cette petite méthode :

Dans le Html de votre accordéon, dirigez-vous sur la première image et supprimez son code que voici :

Code:

<img class="full" src="http://i72.servimg.com/u/f72/16/20/81/12/shaqp10.jpg" alt="image" />

Après, vous installez le code de substitution suivant et enregistrez :

Code:

<a href="http://forum.forumactif.com/"><img src="http://i72.servimg.com/u/f72/16/20/81/12/shaqp10.jpg"></a>

Explications :

Dans la première partie du code, j'ai pris comme exemple de lien de redirection finale une adresse de page FA : https://forum.forumactif.com/

Dans la seconde partie du code, j'ai repris la première image actuelle de votre accordéon : https://i.servimg.com/u/f72/16/20/81/12/shaqp10.jpg

Et le tout fonctionne parfaitement. Le code de base que vous aurez à utiliser pour les autres images de l'accordéon est le suivant :

Code:

<a href="URL d'une page de votre forum"><img src="URL de l'image associée"></a>

Cordialement

[Matthieu A.]

merci à vous, c'est exactement ce que je voulais

-comment peut on changer la largeur et la hauteur du menu s'il vous plait ?

merci encore!!

[Matthieu A.]

enfin, j'ai encore 2 petites questions:


- que faut il modifier pour supprimer les "1", "2", "3", "4" et "5" ?
- que faut il modifier pour que les titres des onglets soient centrés ?

merci d'avance

[Scipion]

Alors, pour center les onglets, vous devez introduire des modifications dans le code Html, séparément pour chaque onglet, en utilisant à chaque fois la balise center comme suit et enregistrez :

Code:

<center>Onglet 1</center>

Faites toutes les modifications et dites moi si cela fonctionne comme souhaité.

Cordialement

[Matthieu A.]

tout fonctionne très bien mais j'aimerai encore pouvoir:
- régler la hauteur et la largeur du menu
- supprimer les "1", "2", "3", "4" et "5" (situés en bas des onglets)

[Scipion]

Il va falloir patienter un peu car je n'ai pas encore trouvé comment faire ces modifications. Je vous tiendrai au courant de la suite.

Bonne soirée
Cordialement

[Matthieu A.]

merci à vous

cc

[Matthieu A.]

pourquoi, le menu fonctionne parfaitement sur chrome, mais pas sur internet explorer et firefox?

avec ie et firefox, j'ai le même problème qu'au début

comment peut on y remédier, y a t il un autre code pour ie et / ou pour firefox ?

[Scipion]

Je viens de faire quelques tests sur plusieurs navigateurs. Chrome et Opéra ne posent aucun problème. Si vous rencontrez des difficultés d'affichage sous les navigateurs que vous avez cités, faites comme ceci :

- Firefox : Appui simultané sur Ctrl + F5, plusieurs fois de suite si nécessaire

- IE : Activez l'affichage de compatibilité.

Cordialement

[Matthieu A.]

pour ie ça me donne cela:



pour firefox: ça ne fonctionne toujours pas

[Scipion]

Je n'ai pas encore trouvé le moyen de modifier les dimensions de l'Accordéon ni pour enlever la numérotation. Dés qu'on réussira à le faire peut-être que l'affichage va s'améliorer du côté de Firefox et IE. Ceci dit, à mon niveau, tant sous Firefox que sous IE, je visualise très bien l'accordéon.

Essayez de vérifier les versions que vous avez pour faire éventuellement une actualisation.

Cordialement

[Matthieu A.]

d'accord merci
, en espèrant vous lire bientôt

cc bonne soirée

[Scipion]

Je l'espère aussi soyez-en sûr.

Bonne soirée
Cordialement

[Matthieu A.]

auriez vous trouvé les codes ?

[Scoubifitz]

bonjour,

avant tout , pour un affichage correct , éditez votre feuille CSS et supprimez :

Code:

$(function(){getscripthttp://js01.fra.co/21268.js');
});

... ce n'est pas un code de style mais un code javascript ...

ensuite , pour jouer sur l'accordéon ( blague douteuse) , tout se fait au début du code javascript .

Code:

$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:true,
      containerWidth: 960,
      containerHeight: 320
    })
  });

pour enlever les chiffres , mettre enumerateSlides:false,
pour jouer sur la largeur , modifier containerWidth:960,
pour jouer sur la hauteur , modifier containerHeight:320,

[Matthieu A.]

bonjour,

tout d'abord, merci de votre réponse très utile; mais je n'ai pas trouvé ce code

Code:

$(function(){getscripthttp://js01.fra.co/21268.js');
});

où se trouve t'il ?

PS mon CSS est bloqué depuis plusieurs jours alors que je n'ai rien touché, d'où cela pourrait venir ?
du coup, je ne peux pas voir si les modifications sont celles que je souhaiterais

[Matthieu A.]

Ca y est, c'est résolu

Mon CSS est revenu, j'ai supprimé le code indiqué (que j'ai finalement trouvé dans le CSS). J'ai modifié la hauteur et la largeur de l'accordéon.

Merci à Scipion et Scoubifitz pour leur aide et leur patience !

cc