Créer un menu horizontal en accordéon

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Créer un menu horizontal en accordéon

Message par Matthieu A. le Sam 16 Mar 2013 - 16:08

Bonjour à tous,

je souhaiterais créer un menu accordéon horizontal sur mon forum:
j'ai suivi ce tutoriel mais cela ne fonctionne pas: http://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:
$(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===Cool{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:
Spoiler:
@charset 'utf-8';
/*************************************************!
*
* 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
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
color: black;
font-size: 16px;
font-weight: normal;
margin: 0;
z-index: 100;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.accordion .slide > h2 b {
display: inline-block;
position: absolute;
top: 13%;
left: 10%;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
background: #353535;
background: -moz-linear-gradient(left, #353535 0%, #555555 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
background: -webkit-linear-gradient(left, #353535 0%,#555555 100%);
background: -o-linear-gradient(left, #353535 0%,#555555 100%);
background: -ms-linear-gradient(left, #353535 0%,#555555 100%);
background: linear-gradient(left, #353535 0%,#555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
background: #383838;
background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: linear-gradient(top, #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; margin-left: 5px }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }

HTML
Spoiler:
<div id="accordeon-pa" class="accordion">
<ol>
<li>
<h2><span>Slide 1</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/SHaqP.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 2</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/v5LuU.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 3</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/VdDge.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 4</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 5</span></h2>
<div>
<figure>
<img class="full" src="http://i.imgur.com/Wl1P6.jpg" alt="image" />
</figure>
</div>
</li>
</ol>
</div>

auriez vous des idées ?

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Créer un menu horizontal en accordéon

Message par Scipion le Sam 16 Mar 2013 - 17:42

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);
Like a Star @ heaven CSS : ne rien changer

Like a Star @ heaven 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

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Sam 16 Mar 2013 - 17:55

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

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Scipion le Sam 16 Mar 2013 - 18:00

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

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Sam 16 Mar 2013 - 18:07

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


Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Créer un menu horizontal en accordéon

Message par Scipion le Sam 16 Mar 2013 - 18:46

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

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>
Like a Star @ heaven Explications :

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

Dans la seconde partie du code, j'ai repris la première image actuelle de votre accordéon : https://i72.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

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Sam 16 Mar 2013 - 18:54

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.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Sam 16 Mar 2013 - 19:08

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

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Scipion le Sam 16 Mar 2013 - 19:30

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

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Sam 16 Mar 2013 - 19:39

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)

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Créer un menu horizontal en accordéon

Message par Scipion le Sam 16 Mar 2013 - 20:09

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

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Sam 16 Mar 2013 - 20:10

merci à vous

cc

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Dim 17 Mar 2013 - 12:55

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 ?

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Scipion le Dim 17 Mar 2013 - 14:35

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

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Dim 17 Mar 2013 - 15:09

pour ie ça me donne cela:



pour firefox: ça ne fonctionne toujours pas

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Scipion le Dim 17 Mar 2013 - 17:26

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

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Dim 17 Mar 2013 - 17:51

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

cc bonne soirée

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Scipion le Dim 17 Mar 2013 - 17:56

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

Bonne soirée
Cordialement

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

http://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Lun 18 Mar 2013 - 17:32

auriez vous trouvé les codes ?

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Scoubifitz le Mer 20 Mar 2013 - 12:25

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 ( Rolling Eyes 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,

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Mer 20 Mar 2013 - 15:47

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.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Créer un menu horizontal en accordéon

Message par Matthieu A. le Mer 20 Mar 2013 - 18:16

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

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

Matthieu A. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum