JS: un menu deroulant qui appel une page HTML [Résolu/Fermé]

Signaler
-
 Grogro -
Bonjour,

Je suppose etre au bon endroit. J'aimerais avoir sur ma page web un menu qui s affiche comme ici http://www.yebhi.com/index.aspx?15
C'est du JS et CSS, Lorsque vous pointer votre souris sur les menus shoes, Clothing, bag ou autres. un sous menu mais tres grand bien fait apparaît avec plusieurs liens. Ce suppose que cela fait appel a une page html une fois le mouse est over et se cahe des que le mouse est out.
Je désire quelques conseil pour arriver a réaliser un truc similaire. Merci d'avance.

Grogro

2 réponses

Messages postés
1935
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
268
c'est assez simple a faire et sans javascript !!

voilà un exemple :

<!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">  
<head>  
 <meta http-equiv="Pragma" content="no-cache" />  
 <meta http-equiv="Expires" content="-1" />  
 <meta http-equiv="content-language" content="fr" />  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>Luminis</title>  
 <style type="text/css">  
  * {  
   padding: 0;  
   margin: 0;  
  }  

  .menuCont {  
   /* là tu place ton menu */  
   margin-top: 30px;  
   margin-left: 40px;  
  }  
    
  .menu {  
   float: left;  
   list-style: none;  
   position: relative;  
  }  
  .menu > li {  
   float: left;
  }  
    
  .menu > li > span {  
   display: block;  
   line-height: 35px;  
   /* ici le style que tu veux l'important et de garder display block  et de centrer le text en hauteur avec ligne-height */  
   border: 1px solid black;  
   padding-left: 5px;  
   padding-right: 5px;  
   margin-right: 5px;  
  }  
    
  .menu > li > .lastspan {  
   margin-right: 0px;  
  }  
    
  .contBlock {  
   display: none;  
   position: absolute;  
   left: 0px;  
   width: 100%;  
  }  
    
  .menu > li:hover > span{  
   /* ici le style que tu veux */  
   background-color: red;  
  }  
    
  .menu > li:hover > .contBlock {  
   display: block;  
   background-color: #ffffff;  
  }  
    
  .block {  
   border: 10px solid red;  
   padding: 10px;  
   /* ici le style que tu veux*/  
  }  
    
  .clearBoth {  
   clear: both;  
   /* pour ne pas être ennuyé par les floats */  
  }  
 </style>  
</head>  
<body style="background-color: white;">  
<div class="menuCont">  
 <ul class="menu">  
  <li>  
   <span>catégorie1</span>  
   <div class="contBlock"><div class="block">ce que tu veux 1</div></div>  

  </li>  
  <li>  
   <span>catégorie2</span>  
   <div class="contBlock"><div class="block">ce que tu veux 2</div></div>  
  </li>  
  <li>  
   <span class="lastspan">catégorie3</span>  

   <div class="contBlock"><div class="block">ce que tu veux 3</div></div>  
  </li>  
 </ul>  
</div>  
 <div class="clearBoth"></div>  
<div>  
 le reste de ton site  
</div>  

</body>  
</html>  
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Merci Atropa, ceci m'a ete d une forte importance. Stay Blessed.