comment realiser un effet accordeon dans un sujet

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

Résolu comment realiser un effet accordeon dans un sujet

Message par flexi2202 le Mer 8 Mai 2013 - 14:07

bonjour a tous

comment faire un effet accordéon en javascrip ou avec la lightbox sur un sujet de mon forum

de ce style

http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu_demo.html

merci de votre aide


Dernière édition par flexi2202 le Jeu 16 Mai 2013 - 11:33, édité 1 fois

flexi2202
****

Messages : 368
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser un effet accordeon dans un sujet

Message par flexi2202 le Ven 10 Mai 2013 - 18:32

bonjour a tous
je viens de trouver sur le net un tuto
que j ai mis en place
mais cela ne fonctionne pas

le tuto est a cet endroid


http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html


1 er etape

la base html que j ai copier du tuto et que j ai mise la gestion des pages html de facon a en sortir un lien de ce style

Code:

<IFRAME SRC=   "http://la-peche-a-la-perle.forumgratuit.be/h2-accordeon" width=940 height=850 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>


ceci est donc l interieur de l iframe
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

   <title></title>

   <link rel="stylesheet" type="text/css" media="screen" href="ecran.css" />

   <!--[if IE 7]><![endif]-->
</head>
<body>

<ul class="navigation">
  <li><a href="#" title="Aller à la page 1">Page 1</a></li>
  <li class="toggleSubMenu"><span>Page 2</span>
    <ul class="subMenu">
      <li><a href="#" title="Aller à la page 2.1">Page 2.1</a></li>
      <li><a href="#" title="Aller à la page 2.2">Page 2.2</a></li>
      <li><a href="#" title="Aller à la page 2.3">Page 2.3</a></li>
    </ul>
    </li>
    <li class="toggleSubMenu"><span>Item 3</span>
      <ul class="subMenu">
        <li><a href="#" title="Aller à la page 3.1">Page 3.1</a></li>
        <li><a href="#" title="Aller à la page 3.2">Page 3.2</a></li>
      </ul>
    </li>
    <li><a href="#" title="Aller à la page 4">Page 4</a></li>
</ul>

</body>
</html>




2 eme etape le code javascript

j ai donc telecharger le pack de jquery que j ai mis dans la gestion des codes javascript

Code:

<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/18896.js"></script>

ensuite j ai rpis le code css que j ai mis a la suite du mien

Code:

.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #000;
  color: #fff;
  width: 200px;
  font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
  display: block;
  padding: 4px 10px;
  color: #fff;
  text-decoration: none;
  background: #000 url(menu-item.png) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
  background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
  background-image: url(menu-item-enroule.png);
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
  text-decoration: underline;
}
.navigation .subMenu {
  font-size: .8em;
  background: #ccc url(subMenu.png) 0 0 repeat-x;
  font-size: .9em;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666;
}
.navigation ul.subMenu a {
  background: none;
  padding: 3px 20px;
}




pour les images je verrais apres

ensuite une fois cela fait

j ai donc editer un nouveau message dans lequel je mets ceci

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<IFRAME SRC=   "http://la-peche-a-la-perle.forumgratuit.be/h2-accordeon" width=940 height=850 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>

mais cela ne fonctionne pas
j ai ceci


merci de vos reponses

flexi2202
****

Messages : 368
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser un effet accordeon dans un sujet

Message par flexi2202 le Sam 11 Mai 2013 - 20:52

bonsoir a tous
un petit up

flexi2202
****

Messages : 368
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser un effet accordeon dans un sujet

Message par flexi2202 le Dim 12 Mai 2013 - 20:56

bonsoir
un petit up

flexi2202
****

Messages : 368
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser un effet accordeon dans un sujet

Message par flexi2202 le Lun 13 Mai 2013 - 21:41

bonsoir
un petit up

flexi2202
****

Messages : 368
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser un effet accordeon dans un sujet

Message par [Nihil] le Lun 13 Mai 2013 - 22:57

Bonjour,

Pour que cela fonctionner, contentez vous de reproduire simplement le tutoriel dans votre page HTML http://la-peche-a-la-perle.forumgratuit.be/h2-accordeon
Une fois qu'elle fonctionne, c'est là que l'iframe entrera en jeu Wink.

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser un effet accordeon dans un sujet

Message par flexi2202 le Mar 14 Mai 2013 - 8:46

merci pour la reponse
mais je viens juste de trouver le couac

flexi2202
****

Messages : 368
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser un effet accordeon dans un sujet

Message par AenigmA le Mar 14 Mai 2013 - 9:49

Je pense que tu y es arrivé, mais si besoin inspire toi de :
http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu_demo.html (regarde le code Wink )

Puis créée ton iframe.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser un effet accordeon dans un sujet

Message par flexi2202 le Mar 14 Mai 2013 - 9:56

merci de l intervention mais c est bon , il est fini
et c est vrai que c est grace a ce que tu as fait pour moi je m en inspire
mais bon en principe je devrais plus trop bouger dans ses codes pour l instant
cela m a épuisé a chercher encore et encore

donc a présent je vais enfin mettre les photos mdrrrr

flexi2202
****

Messages : 368
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 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