Menu déroulant en css

Fred'X

Salut les gones,
En testant ce p'tit tuto sympa http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-avec-commentaires-au-survol j'ai voulu reproduire le même genre de truc mais avec un sous-menu à la place des commentaires.
Comme je me suis rendu compte de la bêtise de vouloir mettre un lien <a href...> dans un autre j'ai plutôt utilisé le p'tit on mouseover js qui change le className et fait donc passer le span contanant le sous-menu de display:none à display:block.
Et là, c'est le drame.
Le span aggrandit le td. En ajoutant un display:block et un float:left dans le style du td contenant le menu j'arrive à ce que je cherche dans firefox, mais dans IE (qu'il soit maudit) j'ai la même merde.
Est-ce qu'il y aurait un moyen de faire déborder joyeusement le span du td ?

_________________
Attention, ce flim n'est pas un flim sur le cyclimse...
playmobitch 4 ever

Fred'X

Le code :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
table#tab_menu{
   width:500px;
   border:1px solid black;
   }
table#tab_menu td{
   width       : 100px;
   height       : 30px;
   text-align    : center;
   text-decoration : none;
   color       : #000;
   background    : #fff;
   }
table#tab_menu td.item_off span{
   display    : none;
   }
table#tab_menu td.item_on span{
   display    : block;
   }
div.ss_menu{
   background-color: #00CC99;
   padding       : 2px;
   margin       : 2px;
}
</style>
</head>
<body bgcolor="#CCCCCC">
<table id="tab_menu">
   <tbody>
      <tr>
         <td class="item_off" onmouseover="this.className='item_on'" onmouseout="this.className='item_off'">menu 1
            <span>
               <div class="ss_menu"><a href="test1"> :: Test 01 :: </a></div>
               <div class="ss_menu"><a href="test2"> :: Test 02 :: </a></div>
               <div class="ss_menu"><a href="test3"> :: Test 03 :: </a></div>
               <div class="ss_menu"><a href="test4"> :: Test 04 :: </a></div>
            </span>
         </td>
         <td class="item_off" onmouseover="this.className='item_on'" onmouseout="this.className='item_off'">menu 2
            <span>
               <div class="ss_menu"><a href="test1"> :: Test 01 :: </a></div>
               <div class="ss_menu"><a href="test2"> :: Test 02 :: </a></div>
               <div class="ss_menu"><a href="test3"> :: Test 03 :: </a></div>
               <div class="ss_menu"><a href="test4"> :: Test 04 :: </a></div>
            </span>
         </td>
         <td class="item_off" onmouseover="this.className='item_on'" onmouseout="this.className='item_off'">menu 3
            <span>
               <div class="ss_menu"><a href="test1"> :: Test 01 :: </a></div>
               <div class="ss_menu"><a href="test2"> :: Test 02 :: </a></div>
               <div class="ss_menu"><a href="test3"> :: Test 03 :: </a></div>
               <div class="ss_menu"><a href="test4"> :: Test 04 :: </a></div>
            </span>
         </td>
         <td class="item_off" onmouseover="this.className='item_on'" onmouseout="this.className='item_off'">menu 4
            <span>
               <div class="ss_menu"><a href="test1"> :: Test 01 :: </a></div>
               <div class="ss_menu"><a href="test2"> :: Test 02 :: </a></div>
               <div class="ss_menu"><a href="test3"> :: Test 03 :: </a></div>
               <div class="ss_menu"><a href="test4"> :: Test 04 :: </a></div>
            </span>
         </td>
         <td class="item_off" onmouseover="this.className='item_on'" onmouseout="this.className='item_off'">menu 5
            <span>
               <div class="ss_menu"><a href="test1"> :: Test 01 :: </a></div>
               <div class="ss_menu"><a href="test2"> :: Test 02 :: </a></div>
               <div class="ss_menu"><a href="test3"> :: Test 03 :: </a></div>
               <div class="ss_menu"><a href="test4"> :: Test 04 :: </a></div>
            </span>
         </td>
      </tr>
   </tbody>
</table>
</body>
</html>

_________________
Attention, ce flim n'est pas un flim sur le cyclimse...
playmobitch 4 ever

Vilcoyote

moi je dirais que non on ne peut pas faire dépasser le span du td sauf éventuellement tu utilise le meme span pour tous.

_________________

Fred'X

C'est ce qu'il semble.
Du coup j'ai essayé de feinter en utilisant un div en position absolute et en utilisant des listes et définitions au lieu de td.
En gros ça :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
div#tab_menu{
   width:500px;
   border:1px solid black;
   }
div#tab_menu dl{
   width       : 100px;
   height       : 30px;
   text-align    : center;
   text-decoration : none;
   color       : #000;
   background    : #fff;
   float       : left;
   }
dl, dt, dd, ul, li {
   margin       : 0;
   padding       : 0;
   list-style-type : none;
   }
div#tab_menu dt.item_off{
   background-color:#00CC00;
   }
div#tab_menu dt.item_off dd{
   color    : #FF0000;
   display    : none;
   }
div#tab_menu dt.item_on{
   background-color:#CCCCCC;
   }
div#tab_menu dt.item_on dd{
   display    : block;
   position : relative;
   }
</style>
</head>
<body bgcolor="#CCCCCC">
<div id="tab_menu">
   <dl>
      <dt class="item_off" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 01</dt>
         <dd>
            <ul>
               <li class="ss_menu"><a href="test1"> :: Test 1-01 :: </a></li>
               <li class="ss_menu"><a href="test2"> :: Test 1-02 :: </a></li>
               <li class="ss_menu"><a href="test3"> :: Test 1-03 :: </a></li>
               <li class="ss_menu"><a href="test4"> :: Test 1-04 :: </a></li>
            </ul>
         </dd>
   </dl>
   <dl>
      <dt class="item_off" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 02</dt>
         <dd>
            <ul>
               <li class="ss_menu"><a href="test1"> :: Test 2-01 :: </a></li>
               <li class="ss_menu"><a href="test2"> :: Test 2-02 :: </a></li>
               <li class="ss_menu"><a href="test3"> :: Test 2-03 :: </a></li>
               <li class="ss_menu"><a href="test4"> :: Test 2-04 :: </a></li>
            </ul>
         </dd>
   </dl>
   <dl>
      <dt class="item_on" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 03</dt>
         <dd>
            <ul>
               <li class="ss_menu"><a href="test1"> :: Test 3-01 :: </a></li>
               <li class="ss_menu"><a href="test2"> :: Test 3-02 :: </a></li>
               <li class="ss_menu"><a href="test3"> :: Test 3-03 :: </a></li>
               <li class="ss_menu"><a href="test4"> :: Test 3-04 :: </a></li>
            </ul>
         </dd>
   </dl>
   <dl>
      <dt class="item_off" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 04</dt>
         <dd>
            <ul>
               <li class="ss_menu"><a href="test1"> :: Test 4-01 :: </a></li>
               <li class="ss_menu"><a href="test2"> :: Test 4-02 :: </a></li>
               <li class="ss_menu"><a href="test3"> :: Test 4-03 :: </a></li>
               <li class="ss_menu"><a href="test4"> :: Test 4-04 :: </a></li>
            </ul>
         </dd>
   </dl>
   <dl>
      <dt class="item_off" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 05</dt>
         <dd>
            <ul>
               <li class="ss_menu"><a href="test1"> :: Test 5-01 :: </a></li>
               <li class="ss_menu"><a href="test2"> :: Test 5-02 :: </a></li>
               <li class="ss_menu"><a href="test3"> :: Test 5-03 :: </a></li>
               <li class="ss_menu"><a href="test4"> :: Test 5-04 :: </a></li>
            </ul>
         </dd>
   </dl>
</div>
</body>
</html>

La merde c'est que j'ai l'impression que l'héritage ne s'applique pas pour les

Code:

div#tab_menu dt.item_off dd{
   color    : #FF0000;
   display    : none;
   }

alors que ça marchait bien avec le précédent. J'ai bien une solution en javascript mais j'aimerais comprendre pourquoi ça ne marche pas avec ces p##n de dl et dt ?

_________________
Attention, ce flim n'est pas un flim sur le cyclimse...
playmobitch 4 ever

Choub · Langue vivante Nombre de messages: 325 Date d'inscription: 05/11/2004

Pour un menu efficace je te conseille le positionnement en absolu, et pas dans le flux.
Sinon, tout ce qui sera en dessous du menu dans le code risque d'être poussé a l'ouverture du menu. Alors qu'en absolute, ça passe au dessus si tu joues avec le z-index.

Et fait deux éléments distincts et pas imbriqués pour ton titre de menu et ton contenu du menu. Le titre sera dans le flux, alors que le contenu sera en absolu.
- Calcule sa position par rapport à celle de son titre, en utilisant DOMElement.offsetLeft et DOMElement.offsetRight pour chopper la position d'un élément par rapport a son parent.
- Boucle sur les parents jusqu'à ce qu'il n'y en ai plus et additionne les valeurs des offsets.
- Ajoute la "height" de ton titre et tu as la position absolue de ton menu, qui se positionnera au dessus de tout (sauf des balises select sous IE).

Fred'X

En fait j'ai trouvé la solution hier : le dd ne peut pas être fils du dt puisqu'il est en-dehors. Donc j'applique le comportement dur sur le dl et le dt peut bien varier. Et voilà un beau menu presque tout en css.

Merci pour la proposition, choub, je jetterais un oeil quand-même, c'est grosso-modo l'idée que j'ai retenue pour ne pas être emmerdé.

En fait si je ne voulais pas de js ou autre c'est pour pouvoir conserver les menus et sous-menus directement en html, pour les cms du genre spip ou typo3 j'ai l'impression que c'est nécessaire.

_________________
Attention, ce flim n'est pas un flim sur le cyclimse...
playmobitch 4 ever

PierrePEON · Langue vivante Nombre de messages: 1276 Date d'inscription: 05/11/2004

oui c'est toujours mieux pour les ducons qui ont toiujours que internet explorer et qui ont le javascript désactivé par peur des virus^^

Fred'X

Ou un méga-menu en dhtml avec clignottement dégradé en latéral et flux rss intégré dans un flash auto-généré qui aura une chance sur deux d'être compatible avec typo3 ou autre ie7 de mes burnes.

_________________
Attention, ce flim n'est pas un flim sur le cyclimse...
playmobitch 4 ever

dj_ouf · Langue vivante Nombre de messages: 518 Date d'inscription: 10/01/2005

ou un activeX intégré qui te génererait une feuille de style en css 3.0 alpha dont tout déposerait un brevet par la suite... à voir Very Happy

Citation:

oui c'est toujours mieux pour les ducons qui ont toiujours que internet explorer et qui ont le javascript désactivé par peur des virus^^

Gniaaaa comme je les aime ces gens!!! copaing' ^^

truc de ouf le code de choub pendu

j'ai leave à la 2nd ligne

A part ça ca va les gens? Very Happy

PierrePEON · Langue vivante Nombre de messages: 1276 Date d'inscription: 05/11/2004

j'espère que mon fils plus tard il bouclera pas sur ses parents...

yep moi ça peut aller et toi ?

dj_ouf · Langue vivante Nombre de messages: 518 Date d'inscription: 10/01/2005

yep! je suis en stage dans un petite boite bien tranquillou à strasbourg en alsâââce ^^. Au menu : dev web + flash + papotage dans la cuisine ac les collègues

bref jvais éviter de troller sur le topic de fred'x il me ramener sa bande de parigos dans le 6-7 et on devra se défendre à coup de saucisses et tartes flambées !

PierrePEON · Langue vivante Nombre de messages: 1276 Date d'inscription: 05/11/2004

lol^^

moi je suis dans une boîte avec une ambiance pourrave, mais pas grave ça me fera de l'expérience pour plus tard^^

genre je suis webmaster et mon collègue est infographiste - technicien pc, et je suis meilleur que lui dans ces deux domaines, en fait en gros je vais être le seul mec capable de la boîte Very Happy

pas grave, soit ils alligneront une grosse paie soit j'irai voir ailleurs !

Vilcoyote

moi je vote pour la 2eme solution

et djam t'es en stage?? encore evil

au fait mysql ça a donné quoi le rattrapage pedro??

_________________

MySql

LOOOL ---> REFUSE LE MYSQL | mais good job atm infographie en masse !

_________________
nul n'est prophète en son pays...

... mais tous les nains y sont en leur jardin !

Vilcoyote

ce qui veux dire?

_________________

dj_ouf · Langue vivante Nombre de messages: 518 Date d'inscription: 10/01/2005

mouarf...tu need le décrypto warcraftien ^^

wé je suis en stage de fin de formation web developpeur (just 6 semaines)

mais je n'ai pas fait de stage avant ça...p-e que tu parlais de ma formation?

matt t'as qu'a essayer de négo une augmentation sinon clair tu bouge ailleurs

@mysql -> tu veux dire que tu recherche du taf en infographie ?

PierrePEON · Langue vivante Nombre de messages: 1276 Date d'inscription: 05/11/2004

il a pas eu le diplôme mais il fait un bon boulot en ce moment avec plein d'infographie dedans...

Moi clair que si ils me filent pas une bonne paie je repasse par la case vacances !

Vilcoyote

ouep mais faudrais déjà savoir ce que tu appel une bonne paie

_________________

MySql

yep PierrePeon, pourtant simple le franglais Bad

((((

_________________
nul n'est prophète en son pays...

... mais tous les nains y sont en leur jardin !

dj_ouf · Langue vivante Nombre de messages: 518 Date d'inscription: 10/01/2005

GG PierreAccolyte ^^

c'est une langue bien cool le franglais, qu'on devrait officialiser, fokin fichtre!!

Une bonne paie? genre : 1200€ < paye PierrePon < 1800 € (en prenant en compte les limites que ce qu'un développeur peut prétendre toucher bien sûr)

Citation:

je repasse par la case vacances

Cette fameuse case appellée aussi dans le bouchonnoi "assedic"?