Vous n'êtes pas identifié.

Annonce

#1 menu déroulant (sfhover function) du 25-06-2008 17:21:14

hindo84
c00lnaute nouveau
Date d'inscription: 25-06-2008
Messages: 2

menu déroulant (sfhover function)

Bonjour,
J'utilise la fonction sfhover pour faire dérouler mon menu au passage de la souris.

sfHover = function() {
var sfEls = document.getElementById("menu" ).getElementsByTagName("LI" );
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" );
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Le problème est que quand j'enléve la souris le sous menu disparait ( à cause de l'évenement onmouseout ) donc quand je supprime cette partie :
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" );}
le sous menu reste affiché mais quand je passe à un autre onglet , les 2 sous menus restent affichés et ainsi de suite .Ce que je veux c'est : au passage de la souris sur un onglet le sous menu s'affiche et reste affiché jusqu'au ce que je la passe sur un autre onglet.
j'espére que j'étais assez claire.
Merci à tous.


Hors ligne

 

25-06-2008 17:21:14

Mister $$$


#2 Re menu déroulant (sfhover function) du 26-06-2008 13:56:50

Tourian
c00lnaute accrot
Lieu: Côte d'azur
Date d'inscription: 27-03-2008
Messages: 344
Site web

Re: menu déroulant (sfhover function)

Salut hindo84,

Pourai-je avoir un page possédant ce code pour pouvoir tester moi-même et comprendre (être sur plustôt) ce que tu dis ?

Tourian


http://tourian.free.fr/images/Belldandy_forum.jpg

Hors ligne

 

#3 Re menu déroulant (sfhover function) du 26-06-2008 15:28:35

hindo84
c00lnaute nouveau
Date d'inscription: 25-06-2008
Messages: 2

Re: menu déroulant (sfhover function)

Salut Tourian,

D'abord merci pour ton intrêt . donc voiçi les parties du code :

le menu en html:
    <tr>
        <td colspan="20" width="987" valign=top style="height: 31px; border-bottom-color:gray; border-bottom-style:inset; border-bottom-width:1px">
  <ul id="menu">
    <li >
    <a style="background-color:#FEF4F1; border-left-color:red; border-left-width:5px;border-left-style:solid; border-bottom-color:gray; border-bottom-style:inset; border-bottom-width:1px "; onmouseover="javascript:montre('smenu1');"> CREATION, DELOCALISATION, DOMICILIATION</a>
     <ul  style="background-color:#FFF2F2; border-left-color:red; border-left-width:5px; border-left-style:solid">
        <li><a href="news.aspx?type=1">- L'actualité</a></li>
        <li><a href="bibliographie.aspx?type=1">- La bibliographie</a></li>
        <li><a href="liens.aspx?type=1">- Les liens</a></li>
     </ul>
    </li>
    <li>

    <a style="background-color:#F4EBFE; border-left-color:#9933FF; border-left-width:5px; border-left-style:solid; border-bottom-color:gray; border-bottom-style:inset; border-bottom-width:1px " >NTIC & INFORMATIQUE</a>
     <ul style="background-color:#F8E9FE; border-left-color:#9933FF; border-left-width:5px; border-left-style:solid">
        <li><a href="news.aspx?type=2">- L'actualité</a></li>
        <li><a href="bibliographie.aspx?type=2">- La bibliographie</a></li>
        <li><a href="liens.aspx?type=2">- Les liens</a></li>
     </ul>
    </li>
    <li>
    <a style="background-color:#F2F2FF; border-left-color:blue; border-left-width:5px; border-left-style:solid; border-bottom-color:gray; border-bottom-style:inset; border-bottom-width:1px ">COMPTABILITE JURIDIQUE & FISCAL</a>
     <ul style="background-color:#EaEaFF; border-left-color:blue; border-left-width:5px; border-left-style:solid">
        <li><a href="news.aspx?type=3">- L'actualité</a></li>
        <li><a href="bibliographie.aspx?type=3">- La bibliographie</a></li>
        <li><a href="liens.aspx?type=3">- Les liens</a></li>
     </ul>   
    </li>
    <li>
    <a style="background-color:#F0FFF0; border-left-color:lime; border-left-width:5px; border-left-style:solid; border-bottom-color:gray; border-bottom-style:inset; border-bottom-width:1px ">BANQUE & GESTION DE PATRIMOINE</a>
     <ul style="background-color:#ECFFEC; border-left-color:lime; border-left-width:5px; border-left-style:solid">
        <li><a href="news.aspx?type=4">- L'actualité</a></li>
        <li><a href="bibliographie.aspx?type=4">- La bibliographie</a></li>
        <li><a href="liens.aspx?type=4">- Les liens</a></li>
     </ul>   
    </li>
    <li>
    <a style="background-color:#FFFFE1; border-left-color:Yellow; border-left-width:5px; border-left-style:solid; border-bottom-color:gray; border-bottom-style:inset; border-bottom-width:1px ">IMMOBILER D’ENTREPRISE</a>
    <ul style="background-color:#FFFFDD; border-left-color:Yellow; border-left-width:5px; border-left-style:solid">
        <li><a href="news.aspx?type=5">- L'actualité</a></li>
        <li><a href="bibliographie.aspx?type=5">- La bibliographie</a></li>
        <li><a href="liens.aspx?type=5">- Les liens</a></li>
     </ul>
    </li>
  </ul>
          
</td>

</tr>

le css :

#menu {
        font-weight : bold;
        font-family : Calibri;
        font-size : 9px;
}

#menu, #menu ul
{
        padding : 0;
        margin : 0;
        list-style : none;
        line-height : 15.5px;
        text-align : center;
}

#menu a
{
        display : block;
        padding : 0;
        color : #000;
        text-decoration : none; }
#menu li       
{
        float : left;
        width : 197.9px;
        cursor: pointer;
}
menu li a
{
    cursor: pointer;
}
#menu li ul
{
        position: absolute;
        width : 980px;
        left: -999em;
        margin: 0em 0 0 -10.9em;
        display  : list-item ;
}

#menu li ul li
{
        width : 69px;
        font-size : 10px;
}

#menu ul a:hover     
{
    color: Red
}

#menu li:hover ul, #menu li.sfhover ul
{
        left: auto;
        min-height: 0;
}


le javascript :

sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
      sfEls.onmouseover=function() {
         this.className+=" sfhover";     
       }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


Hors ligne

 

#4 Re menu déroulant (sfhover function) du 26-06-2008 17:43:33

Tourian
c00lnaute accrot
Lieu: Côte d'azur
Date d'inscription: 27-03-2008
Messages: 344
Site web

Re: menu déroulant (sfhover function)

J'arive plus ou moins à faire marcher ton code sous FireFox2, mais impossible de le faire marcher sous InternetExplorer7...

Rappel-moi le problème (car sous FireFox je n'ai pas le problème que je crois commprendre...)
Au mieu, donne-moi un lien vers une page contenant ce menu. Au pire, envoit-moi un lien vers un screen de ton problème...

Problème que je crois comprendre :
Lorsque tu met la souris sur le menu, celui-ci se dévelope. Ensuite lorsque tu veux cliquer sur un sous-menu il s'éfface sous ta souris, c'est ça ?
Moi ce problème ne m'arrive pas sous firefox, mais sous IE7, le sous-menu ne s'affiche pas...

Tourian


http://tourian.free.fr/images/Belldandy_forum.jpg

Hors ligne

 

#5 Re menu déroulant (sfhover function) du 26-06-2008 19:14:44

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: menu déroulant (sfhover function)

Bonjour et bienvenue hindo84e,

Perso, je suis une crème en javascript et je pense que le mieux pour obtenir une réponse correcte serai de demander directement à l'auteur du script -> http://www.pompage.net/pompe/deroulants/.
Je vois que tu as ouvert une multitude de poste pour cette même question sur le web...

Question bête mais question quand même...
Pourquoi vouloir utiliser ce menu alors que d'autres existent et qui semble correspondre à tes besoins?

Hors ligne

 

Propulsé par PunBB
© Copyright 2007
Forum créer un site

Partenaires de « créer un site internet »