Menu accordéon

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

Résolu Menu accordéon

Message par Solid6Snake le Jeu 30 Avr 2015 - 0:01

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.entraide-youtubers.com/

Description du problème

Bonjour, je viens de placer un menu accordéon tout est ok par contre il est trop large ce menu.

Comment réduire un peu la hauteur du bloc?

Je ne trouve pas dans la feuille de style CSS pourtant j'ai cherché..

Merci d'avance!


Dernière édition par Solid6Snake le Jeu 30 Avr 2015 - 22:03, édité 2 fois

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon

Message par MlleAlys le Jeu 30 Avr 2015 - 0:21

Bonjour,
Le réglage de la hauteur ne se fait pas dans le css mais directement dans le code de l'accordéon. Quel est votre code actuel ?

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: Menu accordéon

Message par Solid6Snake le Jeu 30 Avr 2015 - 7:51

Bonjour et merci de répondre c'est sympa Smile

Je souhaite diminuer juste la hauteur du bloc en faite mais je ne trouve pas la ligne pour modifier dans le code.


Voilà mon code dans affichage:



Code:
<div id="accordeon-pa" class="accordion">
                            
   <ol>
                                   
      <li>
                                          
         <h2>
                      <span>Animation</span>         
         </h2>
                                          
         <div>
                                    <figure>                <a href="https://www.youtube.com/watch?v=iCR5xBjFluU" target="_blank"><img src="https://i.ytimg.com/vi_webp/iCR5xBjFluU/mqdefault.webp" alt="" /></a>              </figure>                     
         </div>
                                      
      </li>
                                   
      <li>
                                          
         <h2>
                      <span>Miniature</span>         
         </h2>
                                          
         <div>
                                    <figure>            <a rel="nofollow" target="_blank" class="postlink" href="https://www.youtube.com/watch?v=bXrutNlXDRw"><img alt="" border="0" src="https://i.ytimg.com/vi_webp/bXrutNlXDRw/mqdefault.webp" /></a>                </figure>                     
         </div>
                                      
      </li>
                                   
      <li>
                                          
         <h2>
                      <span>Interview</span>         
         </h2>
                                          
         <div>
                                    <figure>                <a href="https://www.youtube.com/watch?v=PXpDZZjcRS4&feature=youtu.be&list=PL6mtO37tKk8LIgTUTbaUNXvYcO5eryR3b" class="postlink" target="_blank" rel="nofollow"><img src="https://i.ytimg.com/vi_webp/qLcWCCUy5rU/mqdefault.webp" border="0" alt="" /></a>              </figure>                     
         </div>
                                      
      </li>
                                   
      <li>
                                          
         <h2>
                      <span>Top 10</span>         
         </h2>
                                          
         <div>
                                    <figure>                <a rel="nofollow" target="_blank" class="postlink" href="https://www.youtube.com/watch?v=Mul1RIO_tTs"><img alt="" border="0" src="https://i.ytimg.com/vi_webp/36_FNjS2YI8/mqdefault.webp" /></a>              </figure>                     
         </div>
                                      
      </li>
                                   
      <li>
                                          
         <h2>
                      <span>Meilleur montage</span>         
         </h2>
                                          
         <div>
                                    <figure>              <a href="https://www.youtube.com/watch?v=V7K3_HwUpV0" class="postlink" target="_blank" rel="nofollow"><img src="https://i.ytimg.com/vi_webp/V7K3_HwUpV0/mqdefault.webp" border="0" alt="" /></a>              </figure>                     
         </div>
                                      
      </li>
                               
   </ol>
</div>


Dernière édition par Solid6Snake le Jeu 30 Avr 2015 - 21:55, édité 1 fois

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon

Message par Solid6Snake le Jeu 30 Avr 2015 - 13:47

C'est border "o" qu'il faut modifier à chaque fois ?

J'ai beau regarder ce code je ne vois vraiment pas ou changer la dimension du bloc accordéon.

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon

Message par MlleAlys le Jeu 30 Avr 2015 - 14:54

par Solid6Snake Aujourd'hui à 7:51
par Solid6Snake Aujourd'hui à 13:47


..Bonjour,

Je vous rappelle qu'il est autorisé un seul UP ou double post par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné ! Pour ajouter ou modifier des informations de votre message précédent, merci d'éditer celui-ci plutôt que de poster à nouveau directement à sa suite.

Je vous invite à lire :

A bientôt sur ForumActif Smile

Et pour afficher un code dans un mesage, merci également de le mettre entre balises "code" :
Code:
[code] LE CODE ICI [/code]
Cela permettra de prendre moins de place et de le rendre plus lisible grâce notamment à la préservation des caractères blancs, à la colorisation, etc.


Concernant la taille, je suis désolée je me suis trompée ce n'est pas dans le code de base, c'est ajouté à celui-ci grâce au javascript, je peux voir votre code javascript ? ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: Menu accordéon

Message par Solid6Snake le Jeu 30 Avr 2015 - 21:59

J'ai édité mon premier post désolé je n'ai pas l'habitude généralement je regarde vos tutos et ça passe tout seul mais là..

Voilà mon code:


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);


Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon

Message par Solid6Snake le Jeu 30 Avr 2015 - 22:03

Ah autant pour moi c'est la ligne containerHeight: 320

Je viens seulement de le voir alors que j'avais le code devant les yeux lol

Encore désdolé merci c'est quand même avec votre aide Wink

Sujet résolu encore merci thumright


Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon

Message par MlleAlys le Jeu 30 Avr 2015 - 22:32

par Solid6Snake Aujourd'hui à 21:59
par Solid6Snake Aujourd'hui à 22:03

..Bonjour,

Je vous rappelle à nouveau qu'il est autorisé un seul UP ou double post par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné ! Pour ajouter ou modifier des informations, merci d'éditer votre message précédent plutôt que de poster à nouveau directement à sa suite !

Je vous invite à lire :

A bientôt sur ForumActif Smile

Ce n'est pas le premier message du sujet que vous devez éditer mais le dernier si c'est vous qui l'avez posté... En gros vous ne pouvez pas poster deux messages à la suite s'il n'y a pas eu 24h d'écoulé entre les deux !

Et c'était effectivement bien là, je verrouille le sujet donc ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys 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