Accueil
Créer un forumMenu accordéon horizontal
2 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 horizontal
par Pomme Golden Mer 22 Déc 2010 - 13:19
Bonjour !
Ehhhhh Oui encore moi qui vient réclamer vos lumières ^^
Voilà, je suis donc en train de bidouiller joyeusement un menu accordéon horizontal.
Qui ne fonctionne pas ( ah ah..cela aurait été trop fastoche que ça marche du premier coup ^^ )
Voici donc le code HTML :
et la partie CSS concernée :
Alors mes petits ennuis :
1 le défilement via la souris ne marchent pas
2 je souhaiterai mettre une image à la place du texte - voir le code html - (plus facile pour nous de changer l'image, car il y aura les infos sur cette image, que de retaper à chaque fois le texte vu que je vais me servir de cet accordéon pour nos infos et MAJ )
3 changer là où il y a marqué blog et forum etc... par une image - en fait cela sera une image coupée en trois : 1 partie pour Blog, 1 partie pour fansub et la dernière pour manga.
Je vous remercie infiniment de votre précieuse aide, j'avais déjà un petit soucis de background que j'ai réussis à rectifier seule, mais là...c'est au-dessus de mon niveau je pense :lol!:
Alors je suis co-admin
je navigue sous google chrome ( je pense que cela a son importance niveau bug de code )
le forum où je bidouille - et qu'il faut regarder - il est là
le forum à qui est destiné ce bidouillage : c'est celui de mon profil ^^
PG alias Jaycee
Ehhhhh Oui encore moi qui vient réclamer vos lumières ^^
Voilà, je suis donc en train de bidouiller joyeusement un menu accordéon horizontal.
Qui ne fonctionne pas ( ah ah..cela aurait été trop fastoche que ça marche du premier coup ^^ )
Voici donc le code HTML :
- Spoiler:
- Code:
<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<div id="accordeon">
<ul>
<li><a id="current_item"><div class="accordeon-box">BLOG</div>
<div class="texte-presentation"><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</a></li>
<li><a><div class="accordeon-box">FANSUB</div>
<div class="texte-presentation"><p>Voici le contenu de la deuxieme boite</p></div></a></li>
<li><a><div class="accordeon-box">MANGA</div>
<div class="texte-presentation"><p>Voici le contenu de la troisieme boite</p></div></a></li>
</ul>
<p style="clear:both"> </p>
</div>
<body>
<!-- Document -->
</body>
</html>
et la partie CSS concernée :
- Spoiler:
- Code:
/* accordeon */
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background-image: url(http://hitskin.com/themes/16/19/06/i_background.png);"
margin: 100px auto 0;
}
#accordeon {
width:800px;
margin:0 auto;
}
#accordeon ul{
list-style: none;
margin: 0;
padding: 0;
}
#accordeon ul li{
float: left;
padding: 10px;
display: block;
margin-right: 5px;
background:none;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3E3E3', endColorstr='#FCFCFC');
background-image: url(http://hitskin.com/themes/16/19/06/i_background.png);"
background:none;
}
#accordeon ul li a{
display: block;
overflow: hidden;
height: 175px;
width: 40px;
outline: none;
cursor: pointer;
}
#accordeon #current{
width: 640px;
}
#accordeon ul li .texte-presentation {
margin: 0;
padding: 0;
width: 520px;
display: block;
margin-left: 85px;
color:#000;
font-size:14px;
text-shadow:1px 1px 1px #FFFFFF;
}
#accordeon ul li p{
font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;
}
#accordeon ul li .accordeon-box {
width:150px;
height:20px;
font-size:30px;
position:relative;
top:50px;
left:-55px;
color:#0AA8F7;
text-shadow:#555159 1px 2px 2px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
Alors mes petits ennuis :
1 le défilement via la souris ne marchent pas
2 je souhaiterai mettre une image à la place du texte - voir le code html - (plus facile pour nous de changer l'image, car il y aura les infos sur cette image, que de retaper à chaque fois le texte vu que je vais me servir de cet accordéon pour nos infos et MAJ )
3 changer là où il y a marqué blog et forum etc... par une image - en fait cela sera une image coupée en trois : 1 partie pour Blog, 1 partie pour fansub et la dernière pour manga.
Je vous remercie infiniment de votre précieuse aide, j'avais déjà un petit soucis de background que j'ai réussis à rectifier seule, mais là...c'est au-dessus de mon niveau je pense :lol!:
Alors je suis co-admin
je navigue sous google chrome ( je pense que cela a son importance niveau bug de code )
le forum où je bidouille - et qu'il faut regarder - il est là
le forum à qui est destiné ce bidouillage : c'est celui de mon profil ^^
PG alias Jaycee
Dernière édition par Pomme Golden le Mer 22 Déc 2010 - 18:37, édité 1 fois
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Menu accordéon horizontal
par Adam_sfp Mer 22 Déc 2010 - 14:47
Bonjour
il manque pas un script dans votre code?
cordialement.
il manque pas un script dans votre code?
cordialement.
Adam_sfp- Membre actif
-
Messages : 4465
Inscrit(e) le : 18/04/2008 -
Re: Menu accordéon horizontal
par Pomme Golden Mer 22 Déc 2010 - 14:56
Hellow !
Euh...je ne pense pas..l'original est là :
*En mode quiche lorraine mononeurone de blonde je suis :lol!:
Euh...je ne pense pas..l'original est là :
- Spoiler:
- Code:
<div id="accordeon">
<ul>
<li><a id="current_item"><div class="accordeon-box">Choix n°1</div>
<div class="texte-presentation"><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</a></li>
<li><a><div class="accordeon-box">Choix n°2</div>
<div class="texte-presentation"><p>Voici le contenu de la deuxieme boite</p></div></a></li>
<li><a><div class="accordeon-box">Choix n°3</div>
<div class="texte-presentation"><p>Voici le contenu de la troisieme boite</p></div></a></li>
</ul>
<p style="clear:both"> </p>
</div>
*En mode quiche lorraine mononeurone de blonde je suis :lol!:
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Adam_sfp- Membre actif
-
Messages : 4465
Inscrit(e) le : 18/04/2008 -
Re: Menu accordéon horizontal
par Pomme Golden Mer 22 Déc 2010 - 15:24
j'ai déjà fais 
(en même temps ça se voit j'aurai été incapable de pondre un code CSS pareil ^^ )
(en même temps ça se voit j'aurai été incapable de pondre un code CSS pareil ^^ )
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Re: Menu accordéon horizontal
par Pomme Golden Mer 22 Déc 2010 - 18:38
Mouahahaha en résolu.
la blonde a trouvé ou ça coinçait : javascript.js je te hais ^^
la blonde a trouvé ou ça coinçait : javascript.js je te hais ^^
Pomme Golden- *****
-
Messages : 967
Inscrit(e) le : 26/04/2006 -
Sujets similaires» Menu accordéon horizontal
» Créer un menu horizontal en accordéon
» Menu accordéon Horizontal [résolu, merci !]
» Créer un accordéon horizontal
» Modifier accordéon horizontal
» Créer un menu horizontal en accordéon
» Menu accordéon Horizontal [résolu, merci !]
» Créer un accordéon horizontal
» Modifier accordéon horizontal
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