menu accordéon
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
menu accordéon
Bonjour a tous !
Tout d'abord bonne année a vous tous !
Et merci de tout se que vous avez fais pour moi !
Alors voila :
Enfaîte j'avais suivi un tuto pour faire un menu déroulant mais le prob , c'est qu'il se déroule automatiquement :s
Moi se que je voudrais c'est qu'il se déroule que quand on clique sur une partie du menu
Comment dois-je m'y prendre ?
Aussi , je voudrais savoir s'il est possible de mettre de image pour remplacer les couleurs noir et vert :
Merci d'avance
Tout d'abord bonne année a vous tous !
Et merci de tout se que vous avez fais pour moi !
Alors voila :
Enfaîte j'avais suivi un tuto pour faire un menu déroulant mais le prob , c'est qu'il se déroule automatiquement :s
Moi se que je voudrais c'est qu'il se déroule que quand on clique sur une partie du menu
Comment dois-je m'y prendre ?
Aussi , je voudrais savoir s'il est possible de mettre de image pour remplacer les couleurs noir et vert :
Merci d'avance
Dernière édition par lucrote le Jeu 03 Jan 2013, 08:21, édité 1 fois
Re: menu accordéon
Bonjour,
Personnellement, je n’ai pas de problème. Les onglets ne se déroulent pas automatiquement, ils se déroulent seulement lorsque je clique dessus.
Pour mettre une image en fond, utilise ceci dans Panneau d’administration > Affichage > Couleurs > Feuille de styles CSS :
Personnellement, je n’ai pas de problème. Les onglets ne se déroulent pas automatiquement, ils se déroulent seulement lorsque je clique dessus.
Pour mettre une image en fond, utilise ceci dans Panneau d’administration > Affichage > Couleurs > Feuille de styles CSS :
- Code:
.accordion .slide > div {background-image:url("url_de_ton_image.png");}
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: menu accordéon
Bonjour ,
tout d'abord merci de votre réponse rapide !
Pour le déroulement automatique , moi ça me le fais :s
Mon CSS :
Je crois que c'est ça , mais je n'en suis plus tres sur , j'en ai beaucoup :s
Pour se qui est de l'image , je vais essayer
tout d'abord merci de votre réponse rapide !
Pour le déroulement automatique , moi ça me le fais :s
Mon CSS :
- Code:
@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 #51f216;
border-bottom-width: 20px;
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: #3f991f; 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; }
Je crois que c'est ça , mais je n'en suis plus tres sur , j'en ai beaucoup :s
Pour se qui est de l'image , je vais essayer
Re: menu accordéon
Bonjour,
Pour le défilement automatique, dans le code Javascript vous avez ceci :
Pour le défilement automatique, dans le code Javascript vous avez ceci :
- Code:
{autoPlay:true,pauseOnHover:true,rounded:true,enumerateSlides:true,containerWidth:960,containerHeight:320})
Arlem- Membre actif
- Messages : 2550
Inscrit(e) le : 30/06/2009
Re: menu accordéon
Bonjour ,
merci a vous , mais je ne trouve pas la ligne que vous m'avez donner :s
Pouvez vous m'aider svp ?
Merci d'avance
merci a vous , mais je ne trouve pas la ligne que vous m'avez donner :s
Pouvez vous m'aider svp ?
Merci d'avance
Re: menu accordéon
Dans l'onglet Modules du panneau d'administration => Gestion des codes javascript => Ouvrez celui correspondant à ce lien "http://ekoloko.lebonforum.com/37889.js" et cherchez la ligne que je vous ai indiqué.
Arlem- Membre actif
- Messages : 2550
Inscrit(e) le : 30/06/2009
Re: menu accordéon
Bonjour ,
ça je sais je suis dessus la
Mais le truc c'est que je n’arrive pas a trouver la ligne dans tout les codes !
ça je sais je suis dessus la
Mais le truc c'est que je n’arrive pas a trouver la ligne dans tout les codes !
Re: menu accordéon
Faites Ctrl + F, et copiez/collez la ligne recherchée, vous tomberez direct dessus.
Arlem- Membre actif
- Messages : 2550
Inscrit(e) le : 30/06/2009
Re: menu accordéon
ça me met : 0sur0
Mon code JS:
Mon code JS:
- 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);
Re: menu accordéon
C'est à la quatrième ligne : "autoPlay:true,", mettez à false.
Arlem- Membre actif
- Messages : 2550
Inscrit(e) le : 30/06/2009
Re: menu accordéon
Ha ok !!!!
ça marche nikel !!!!
Merci beaucoup
Par contre j'aimerais changer toutes les couleurs noir et vert comment je fais ?
ça marche nikel !!!!
Merci beaucoup
Par contre j'aimerais changer toutes les couleurs noir et vert comment je fais ?
Re: menu accordéon
Pour le vert, dans le CSS, changez ici le #3f991f par la couleur souhaitée :
Pour le gris, changez chaque #353535 dans le CSS par la couleur souhaitée.
- Code:
.accordion .slide > div { background: #3f991f; margin-left: 5px }
Pour le gris, changez chaque #353535 dans le CSS par la couleur souhaitée.
Arlem- Membre actif
- Messages : 2550
Inscrit(e) le : 30/06/2009
Re: menu accordéon
Bonjour , et un grand merci a vous !!!!!
Grace a vous tous j'ai réussi a personnaliser entièrement mon menu accordéon !!!!
Un grand merci !!!!
Grace a vous tous j'ai réussi a personnaliser entièrement mon menu accordéon !!!!
Un grand merci !!!!
Sujets similaires
» Menu accordéon
» Menu accordéon horizontal
» menu accordéon
» Menu accordéon "onclick" ?
» A propos du menu accordéon
» Menu accordéon horizontal
» menu accordéon
» Menu accordéon "onclick" ?
» A propos du menu accordéon
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum