JS: un menu deroulant qui appel une page HTML

Résolu/Fermé

Grogro - 1 mars 2012 à 04:30
Grogro - 1 mars 2012 à 08:52

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

A voir également:

2 réponses

Réponse 1 / 2

Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
Modifié par Atropa le 1/03/2012 à 06:23

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>

Réponse 2 / 2

Grogro
1 mars 2012 à 08:52

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

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

'JS/Agent.TS' Qu'est ce que c'est ?

javascript arrondi après la virgule

Arrondir nombre Math.round

Cheval de Troie JS/Kryptik.I