menu accordéon
5 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 à tous, Je voudrais insérer un menu "accordéon" comme sur ce site http://www.cssplay.co.uk/menus/css3-image-slide.html#url2 (le premier) dans le message d'accueil de mon forum.
Est ce que quelqu'un peut donner un code qui y ressemble (ou celui la serait vraiment super) svp?
Merci d'avance =)
Est ce que quelqu'un peut donner un code qui y ressemble (ou celui la serait vraiment super) svp?
Merci d'avance =)
Dernière édition par luna447 le Sam 12 Mai 2012 - 21:01, édité 1 fois
Re: menu accordéon
Je suis aussi intéréssé ! c'est simple et utile !
Re: menu accordéon
Bonjour
Ceci pourra vous être utile : https://forum.forumactif.com/t327581-message-d-accueil-en-accordeon
Ceci pourra vous être utile : https://forum.forumactif.com/t327581-message-d-accueil-en-accordeon
Re: menu accordéon
Merci =) je vais essayer avec ça.
Re: menu accordéon
J'ai un problème avec ce code en html d'ailleurs. Je met ça dans mon en-tête :
Mais, voyez vous-même ce que cela donne au final : http://f-o-w-test.catch-forum.fr/forum
Il ne prend pas la forme d'un accordéon, et montre toutes le simages, en entières.
- Code:
<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>
Mais, voyez vous-même ce que cela donne au final : http://f-o-w-test.catch-forum.fr/forum
Il ne prend pas la forme d'un accordéon, et montre toutes le simages, en entières.
Re: menu accordéon
(tu as mis le css?)
Pour ma part ça marche =) je suis en train de le modifier comme je le désir^^
Pour ma part ça marche =) je suis en train de le modifier comme je le désir^^
Re: menu accordéon
Ha oui effectivement, tu avais raison. Sinon il n'y a pas moyen de le personnaliser un peu? En changeant sa couleur de fond par exemple, ou la couleur des onglets?
Re: menu accordéon
Ben si en modifiant le css, moi perso je suis en train de le modifier pour que ça ressemble a l'exemple que j'ai donné =).
Re: menu accordéon
J'ai beau chercher dans le CSS, étant une burne dans ce genre de lectures, je ne trouve pas du tout où modifier les couleurs
Re: menu accordéon
Tu peux également trouvé un autre effet accordéon beaucoup moins lourds ICI
Re: menu accordéon
J'ai été sur ton site, mais cela ne me convient pas, j'ai besoin de mettre un nom à chaque onglet de l'accordéon.
Re: menu accordéon
Il te suffit de le mettre sur les images directement.
Re: menu accordéon
Non, franchement je suis pas fan, de plus je veux juste changer les couleurs de base de celui que j'ai installé, rien de plus. Donc si quelqu'un peut m'indiquer où, dnas le code css, on peut modifier les couleurs
Re: menu accordéon
Tu changes les variables color dans la partie CSS et tu verras bien à quoi elle correspondent ensuite.
C'est en faisant que l'on apprend....
C'est en faisant que l'on apprend....
Re: menu accordéon
Alors j'ai réussi a changer le premier "slide" comme sur mon exemple mais je n'arrive pas a faire pareil avec les autres =/.
(j'arrangerais les images après)
Est ce que quelqu'un pourrait me le faire svp?
html:
CSS:
(j'arrangerais les images après)
Est ce que quelqu'un pourrait me le faire svp?
html:
- Code:
<div id="accordeon-pa" class="accordion">
<ol>
<li>
<span>
<div>
<a>
<img class="full" src="http://img11.hostingpics.net/pics/611421essai.png" alt="image"/>
</a>
</div></span>
</li>
<li>
<h2><span>Slide 2</span></h2>
<div>
<figure>
<img class="full" src="http://img11.hostingpics.net/pics/326539image5.png" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 3</span></h2>
<div>
<figure>
<img class="full" src="http://img11.hostingpics.net/pics/551316Night7.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 4</span></h2>
<div>
<figure>
<img class="full" src="http://img11.hostingpics.net/pics/551316Night7.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 5</span></h2>
<div>
<figure>
<img class="full" src="http://img11.hostingpics.net/pics/551316Night7.jpg" alt="image" />
</figure>
</div>
</li>
</ol>
</div>
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: 3px solid #353535;
border-bottom-width: 3px;
padding: 5px 5px 6px 0;
background: #000000;
-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: #000000; text-shadow: 0 -1px 0 #000000; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #000000; 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 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(50%,#555555));
background: -webkit-linear-gradient(left, #353535 0%,#555555 50%);
background: -o-linear-gradient(left, #353535 0%,#555555 50%);
background: -ms-linear-gradient(left, #353535 0%,#555555 50%);
background: linear-gradient(left, #353535 0%,#555555 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',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: #000000; 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: 1000px; height: 2000px; }
.accordion h2 { border: none; }
/* centrer l'accordéon */
.accordion { margin: auto; }
Re: menu accordéon
Bonjour. Nouveau petit problème, que je vais illustrer avec un screen de l'autre admin de mon forum :
Comme vous voyez, on parle du bleu qui reste autour des images, car celles-ci son tronqués par une taille limite d'affichage dans le menu.
Et donc, j'aimerais savoir s'il y a moyen d'aggrandir cette taille limite? J'ai beau chercher dans le CSS, je ne trouve rien de concluant.
Comme vous voyez, on parle du bleu qui reste autour des images, car celles-ci son tronqués par une taille limite d'affichage dans le menu.
Et donc, j'aimerais savoir s'il y a moyen d'aggrandir cette taille limite? J'ai beau chercher dans le CSS, je ne trouve rien de concluant.
Re: menu accordéon
Dans le script tu trouveras, je cherche toujours de l'aide svp T.T
Re: menu accordéon
J'ai cherché, modifié plein de trucs, mais ça ne change rien =/
Sujets similaires
» Menu accordéon "onclick" ?
» Menu Accordéon
» menu accordéon
» Menu accordéon "plat"
» Menu en accordéon à centrer
» Menu Accordéon
» menu accordéon
» Menu accordéon "plat"
» Menu en accordéon à centrer
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