Ouverture d'une liste

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

Résolu Ouverture d'une liste

Message par AiLDee le Ven 12 Aoû 2011 - 4:36

Salut tout le monde, sur mon portail, j'Aimerais beaucoup ajouter une fonction que lorsque l'on clique sur une image, une liste de noms ou de phrases apparait. voici un exemple ;



Pouvez-vous m'aider svp !


Dernière édition par AiLDee le Jeu 18 Aoû 2011 - 4:00, édité 1 fois

AiLDee
***

Masculin
Messages : 156
Inscrit(e) le : 10/07/2010

http://dreamhl.forumactif.com/
AiLDee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouverture d'une liste

Message par AiLDee le Ven 12 Aoû 2011 - 17:49

up svp !

AiLDee
***

Masculin
Messages : 156
Inscrit(e) le : 10/07/2010

http://dreamhl.forumactif.com/
AiLDee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouverture d'une liste

Message par AiLDee le Sam 13 Aoû 2011 - 4:15

UP svp Smile !

AiLDee
***

Masculin
Messages : 156
Inscrit(e) le : 10/07/2010

http://dreamhl.forumactif.com/
AiLDee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouverture d'une liste

Message par AiLDee le Sam 13 Aoû 2011 - 20:58

up

AiLDee
***

Masculin
Messages : 156
Inscrit(e) le : 10/07/2010

http://dreamhl.forumactif.com/
AiLDee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouverture d'une liste

Message par tupac le Mar 16 Aoû 2011 - 11:19

Bonjour

Je peux vous proposer ce menu ici.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Ouverture d'une liste

Message par AiLDee le Mar 16 Aoû 2011 - 19:47

Cool, mais est-ce possible d'avoir une image plutot que Menu 1, menu 2, etc .. ?

AiLDee
***

Masculin
Messages : 156
Inscrit(e) le : 10/07/2010

http://dreamhl.forumactif.com/
AiLDee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouverture d'une liste

Message par tupac le Mar 16 Aoû 2011 - 19:59

Bien sur je m'occupe de ça.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Ouverture d'une liste

Message par AiLDee le Mar 16 Aoû 2011 - 19:59

Parfait merci beaucoup Smile !

AiLDee
***

Masculin
Messages : 156
Inscrit(e) le : 10/07/2010

http://dreamhl.forumactif.com/
AiLDee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouverture d'une liste

Message par AiLDee le Mer 17 Aoû 2011 - 2:15

et puis ?

AiLDee
***

Masculin
Messages : 156
Inscrit(e) le : 10/07/2010

http://dreamhl.forumactif.com/
AiLDee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouverture d'une liste

Message par AiLDee le Jeu 18 Aoû 2011 - 2:18

up

AiLDee
***

Masculin
Messages : 156
Inscrit(e) le : 10/07/2010

http://dreamhl.forumactif.com/
AiLDee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouverture d'une liste

Message par tupac le Jeu 18 Aoû 2011 - 2:34

Bonsoir

Pour commencer nous allons héberger le petit javascript sur le forum en faisant comme ceci => panneau d'administration => modules => gestion des pages javascript => créer un nouveau javascript => mettre un titre puis cocher ( sur toutes les pages ) placer le code et valider.

Code javascript a placer dans votre page
Code:
function afficheMenu(obj){
   
   var idMenu    = obj.id;
   var idSousMenu = 'sous' + idMenu;
   var sousMenu  = document.getElementById(idSousMenu);
   
   /*****************************************************/
   /**   si le sous-menu correspondant au menu cliqué    **/
   /** est caché alors on l'affiche, sinon on le cache **/
   /*****************************************************/
   if(sousMenu.style.display == "none"){
      sousMenu.style.display = "block";
   }
   else{
      sousMenu.style.display = "none";
   }
   
}

Une fois cela fait récupérer l'adresse de cette page et placez-la dans ce script
Code:
<script type="text/javascript" src=" ici l'adresse de votre page javascript "></script>
et placer ce script avec le code html.

Code html
Spoiler:
Code:
  <div id="menu">

   <div class="menu" id="menu1" onclick="afficheMenu(this)"><img src="http://hariboow.free.fr/upload/images/201101wdw.png" height="40" width="175"></div>
   <div id="sousmenu1" style="display:none">

      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
   </div>
   
   <div class="menu" id="menu2" onclick="afficheMenu(this)"><img src="http://hariboow.free.fr/upload/images/201101vuv.png" height="40" width="175"></div>
   <div id="sousmenu2" style="display:none">

      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
   </div>

   
   <div class="menu" id="menu3" onclick="afficheMenu(this)"><img src="http://hariboow.free.fr/upload/images/201101lul.png" height="40" width="175"></div>
        <div id="sousmenu3" style="display:none">

      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
   </div>
   
   <div class="menu" id="menu4" onclick="afficheMenu(this)"><img src="http://hariboow.free.fr/upload/images/201103vuv.png" height="40" width="175"></div>
   <div id="sousmenu4" style="display:none">

      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>
      <div class="sousmenu"><a href=" url lien ici " target="_blank">lien</a></div>

   </div>
      </div>

et pour finir le css a placer dans votre feuille de style css.
Spoiler:
Code:
#menu{
   width:175px;

}
.menu, .sousmenu{
   text-align:center;
}
.menu{
   height:40px;
   width:175px;

   padding:0px;
   background:#404040;
   color:#fff;
}
.sousmenu a{
   height:40px;
   width:175px;
   padding:1px 0;
   background:#808080;
   color:#fff;
}

.menu a{
   display:block;
   width:100%;
   height:100%;
   color:#fff;
   font-family:arial,sans-serif;
   font-size:12px;
   font-weight:bold;
   text-decoration:none;
   background:#404040;
}
.sousmenu {
   display:block;
   width:100%;
   height:100%;
   color:#fff;
   font-family:arial,sans-serif;
   font-size:12px;
   font-weight:bold;
   text-decoration:none;
   background:#808080;
}
.menu a:hover, .sousmenu :hover, .menu a:active, .sousmenu :active, .menu a:focus, .sousmenu :focus{
   background:#ca0008;
}

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Ouverture d'une liste

Message par AiLDee le Jeu 18 Aoû 2011 - 3:01

Merci beaucoup Smile !

AiLDee
***

Masculin
Messages : 156
Inscrit(e) le : 10/07/2010

http://dreamhl.forumactif.com/
AiLDee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouverture d'une liste

Message par tupac le Jeu 18 Aoû 2011 - 3:25

Content que cela vous plaise et pensez a d'éditer votre premier message et de cocher ( résolu ) svp.


tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac 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