Menu accordéon horizontal

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

Résolu Menu accordéon horizontal

Message par Pomme Golden le Mer 22 Déc - 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 :


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 - 18:37, édité 1 fois

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Adam_sfp le Mer 22 Déc - 14:47

Bonjour
il manque pas un script dans votre code?

cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Pomme Golden le Mer 22 Déc - 14:56

Hellow !



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

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Adam_sfp le Mer 22 Déc - 15:08

Essayez de faire une recherche accordion jquery

Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Pomme Golden le Mer 22 Déc - 15:24

j'ai déjà fais

(en même temps ça se voit j'aurai été incapable de pondre un code CSS pareil ^^ )

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Pomme Golden le Mer 22 Déc - 18:38

Mouahahaha en résolu.

la blonde a trouvé ou ça coinçait : javascript.js je te hais ^^

Pomme Golden
*****

Féminin
Messages : 967
Inscrit(e) le : 26/04/2006

http://passionmangang.forumactif.com/index.htm
Pomme Golden 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