begin process at 2012 05 29 17:12:32
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Probleme de onmouseover onmouseout avec gestion event.observe


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Probleme de onmouseover onmouseout avec gestion event.observe

mercredi 1 avril 2009 à 16:20:59 | Probleme de onmouseover onmouseout avec gestion event.observe

stooff

Bonjour,

Voila mon problème pour ceux qui pourrait peut être me filer un ptit coup de main.

Je ne suis pas expert, j'apprend à la volée donc n'hésitez pas à me faire autant de remarque que nécessaire.

J'ai un menu vertical que j'essaye de faire fonctionner à l'identique d'un menu QuickMenu d'opencube (payant et pas donné en plus) que j'avais utilisé en attendant de le refaire ou de trouver sur le net en opensource (sans succès)

Donc me voici dans la galère avec les events onmouseover et onmouseout.

J'aimerais avoir une meilleur gestion des evenements afin de pouvoir afficher un sous menu au passage de la souris sur un des éléments du menu(div), le garder actif durant le temps de selection du lien dans la zone du sousmenu (ul), et l'enrouler au changement de zone d'un menu sur un autre(changement de div) ainsi que le fermer lorsque l'internaute quitte toutes les zones du menu (div des menu et ul des sous menu) et ainsi de suite.

J'espère avoir été clair, voici le code de la page.




<script type="text/javascript">
var Categories = ['societe','telechargement','concepts','marketing'];
function Expand_CurrentMenu(indic){
    var CurrentCategorie = document.getElementById('menu_' + indic);
    var CurrentSousCategorie = document.getElementById('conteneur_' + indic);
    if(CurrentSousCategorie.style.display == 'none'){
        if (indic != 'societe') {
            if(document.getElementById('menu_societe').className == 'menuhaut_ouvert'){
                document.getElementById('menu_societe').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_societe', { duration: 0.3, queue: 'end'});
            }
        }
        if (indic != 'telechargement') {
            if(document.getElementById('menu_telechargement').className == 'menuhaut_ouvert'){
                document.getElementById('menu_telechargement').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_telechargement', { duration: 0.3, queue: 'end'});
            }
        }
        if (indic != 'concepts') {
            if(document.getElementById('menu_concepts').className == 'menuhaut_ouvert'){
                document.getElementById('menu_concepts').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_concepts', { duration: 0.3, queue: 'end'});
            }
        }
        if (indic != 'marketing') {
            if(document.getElementById('menu_marketing').className == 'menuhaut_ouvert'){
                document.getElementById('menu_marketing').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_marketing', { duration: 0.3, queue: 'end'});
            }
        }
        
        new Effect.SlideDown('conteneur_' + indic, { duration: 0.3, queue: 'end'});
        CurrentCategorie.className = 'menuhaut_ouvert';
        Actualmenu = indic;
    }
    /*else {
        CurrentCategorie.className = 'menuhaut_ferme';
        new Effect.SlideUp('conteneur_' + indic, { duration: 0.3, queue: 'end'});    
        ActualMenu = '';
    }*/
}
function Collapse_Menu(){
            if(document.getElementById('menu_societe').className == 'menuhaut_ouvert'){
                document.getElementById('menu_societe').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_societe', { duration: 0.3, queue: 'end'});
            }
            if(document.getElementById('menu_telechargement').className == 'menuhaut_ouvert'){
                document.getElementById('menu_telechargement').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_telechargement', { duration: 0.3, queue: 'end'});
            }
            if(document.getElementById('menu_concepts').className == 'menuhaut_ouvert'){
                document.getElementById('menu_concepts').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_concepts', { duration: 0.3, queue: 'end'});
            }
            if(document.getElementById('menu_marketing').className == 'menuhaut_ouvert'){
                document.getElementById('menu_marketing').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_marketing', { duration: 0.3, queue: 'end'});
            }
}
document.observe('dom:loaded',function(){
        $('menu_societe').observe('mouseover',function(event){
            Expand_CurrentMenu('societe');
            event.stop();
        });
        
        $('menu_telechargement').observe('mouseover',function(event){
            Expand_CurrentMenu('telechargement');
            event.stop();
        });
        $('menu_concepts').observe('mouseover',function(event){
            Expand_CurrentMenu('concepts');
            event.stop();
        });
        $('menu_marketing').observe('mouseover',function(event){
            Expand_CurrentMenu('marketing');
            event.stop();
        });
        
});
</script>
<style type="text/css">
#menu {
    width:630px;
    height:55px;
    position:relative;
    background-color:transparent;
    font:1em/1em Helvetica, Arial, sans-serif;
    font-style:normal;
    }
#menu div a {
    color:#FFFFFF;
    font-size:1em;
    text-decoration:none;
    }
#menu div a:link {
    color:#FFFFFF;
    font-size:1em;
    text-decoration:none;
    }
#menu div a:hover {
    color:#CCCCCC;
    font-size:1em;
    text-decoration:none;
    }
#menu div a:active {
    color:#FFFFFF;
    font-size:1em;
    text-decoration:none;
    }                
#menu div a:selected {
    color:#FFFFFF;
    font-size:1em;
    text-decoration:none;
    }
        
#menu_accueil {
    float:left;
    position:relative;
    padding:15px 5px 22px 15px;
    width: 55px;
    font-variant: small-caps;
    z-index:99999;
    background-image:url(/img/menu_off.png);
    background-repeat:repeat-x;
    cursor:pointer;
    }
#menu_societe {
    float:left;
    position:relative;
    padding:15px 5px 22px 15px;
    width:55px;
    font-variant: small-caps;
    z-index:99999;
    background-image:url(/img/menu_off.png);
    background-repeat:repeat-x;
    cursor:pointer;
    }
#menu_concepts {
    float:left;
    position:relative;
    padding:15px 5px 22px 15px;
    width:75px;
    font-variant: small-caps;
    z-index:99999;
    background-image:url(/img/menu_off.png);
    background-repeat:repeat-x;
    cursor:pointer;
    }
#menu_marketing {
    float:left;
    position:relative;
    padding:15px 5px 22px 15px;
    width:60px;
    font-variant: small-caps;
    z-index:99999;
    background-image:url(/img/menu_off.png);
    background-repeat:repeat-x;
    cursor:pointer;
    }
#menu_telechargement {
    float:left;
    position:relative;
    padding:15px 5px 22px 15px;
    width:105px;
    font-variant: small-caps;
    z-index:99999;
    background-image:url(/img/menu_off.png);
    background-repeat:repeat-x;
    cursor:pointer;
    }
#menu_videos {
    float:left;
    position:relative;
    padding:15px 5px 22px 15px;
    width:45px;
    font-variant: small-caps;
    z-index:99999;
    background-image:url(/img/menu_off.png);
    background-repeat:repeat-x;
    cursor:pointer;
    }
#menu_contact {
    float:left;
    position:relative;
    padding:15px 5px 22px 15px;
    width:95px;
    font-variant: small-caps;
    z-index:99999;
    background-image:url(/img/menu_off.png);
    background-repeat:repeat-x;
    cursor:pointer;
    }
    
#conteneur_societe {
    width:130px;
    height:auto;
    position:absolute;
    padding:10px;
    top:40px;
    left:0px;
    background-color: #000000;
    opacity:0.9;
    z-index:99999;
    filter:alpha(opacity=90, style=0);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-opacity:0.9;
    -webkit-opacity:0.9;
    -khtml-opacity:0.9;
    cursor:pointer;
    }
    
#conteneur_concepts {
    width:110px;
    height:auto;
    position:absolute;
    padding:10px;
    top:40px;
    left:0px;
    background-color: #000000;
    opacity:0.9;
    z-index:99999;
    filter:alpha(opacity=90, style=0);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-opacity:0.9;
    -webkit-opacity:0.9;
    -khtml-opacity:0.9;
    cursor:pointer;
    }
#conteneur_marketing {
    width:245px;
    height:auto;
    position:absolute;
    padding:10px;
    top:40px;
    left:0px;
    background-color: #000000;
    opacity:0.9;
    z-index:99999;
    filter:alpha(opacity=90, style=0);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-opacity:0.9;
    -webkit-opacity:0.9;
    -khtml-opacity:0.9;
    cursor:pointer;
    }
#conteneur_telechargement {
    width:105px;
    height:auto;
    position:absolute;
    padding:10px;
    top:40px;
    left:0px;
    background-color: #000000;
    opacity:0.9;
    z-index:99999;
    filter:alpha(opacity=90, style=0);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-opacity:0.9;
    -webkit-opacity:0.9;
    -khtml-opacity:0.9;
    cursor:pointer;
    }
.global_item {
    height:auto;
    width:auto;
    margin:0px 0px 5px 5px;
    }
</style>
<div id="menu">
  <div id="menu_accueil" class="menuhaut_ferme" onmouseover="RollOverMenu('menu_accueil', 19);" onmouseout="RollOverMenu('menu_accueil', 20);"> 
    <a href="<?php echo $lang."/" ?>Accueil/"
    title="<?php echo $menu_accueil_desc; ?>"><?php echo $menu_accueil; ?></a>
    </div>
  <div id="menu_societe" class="menuhaut_ferme" onmouseover="RollOverMenu('menu_societe', 19);" onmouseout="RollOverMenu('menu_societe', 20);Collapse_Menu();"> 
    <a href="<?php echo $lang."/" ?>Accueil/societe/"
    title="<?php echo $menu_societe_desc; ?>"><?php echo $menu_societe; ?></a>
      <ul id="conteneur_societe" style="display:none;">
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/societe/actualite/" 
            title="<?php echo $menu_societe_actualite_desc; ?>"><?php echo $menu_societe_actualite; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/societe/historique/" 
            title="<?php echo $menu_societe_historique_desc; ?>"><?php echo $menu_societe_historique; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/societe/organigramme/" 
            title="<?php echo $menu_societe_organigramme_desc; ?>"><?php echo $menu_societe_organigramme; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/societe/implantation/" 
            title="<?php echo $menu_societe_implantation_desc; ?>"><?php echo $menu_societe_implantation; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/societe/reseau/" 
            title="<?php echo $menu_societe_reseau_desc; ?>"><?php echo $menu_societe_reseau; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/societe/marques/" 
            title="<?php echo $menu_societe_marques_desc; ?>"><?php echo $menu_societe_marques; ?></a> </li>
      </ul>
  </div>
  <div id="menu_concepts" class="menuhaut_ferme" onmouseover="RollOverMenu('menu_concepts', 19);" onmouseout="RollOverMenu('menu_concepts', 20);"> <a href="<?php echo $lang."/" ?>Accueil/concepts/"
    onclick="return false;"
    title="<?php echo $menu_concepts_desc; ?>"><?php echo $menu_concepts; ?></a>
    <ul id="conteneur_concepts" style="display:none;">
        <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/concepts/peintre/" 
            title="<?php echo $menu_concepts_peintre_desc; ?>"><?php echo $menu_concepts_peintre; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/concepts/plaquiste/" 
            title="<?php echo $menu_concepts_plaquiste_desc; ?>"><?php echo $menu_concepts_plaquiste; ?></a> </li>
      </ul>
  </div>
  <div id="menu_marketing" class="menuhaut_ferme" onmouseover="RollOverMenu('menu_marketing', 19);" onmouseout="RollOverMenu('menu_marketing', 20);"> <a href="<?php echo $lang."/" ?>Accueil/marketing/"
    onclick="return false;"
    title="<?php echo $menu_marketing_desc; ?>"><?php echo $menu_marketing; ?></a>
      <ul id="conteneur_marketing" style="display:none;">
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/marketing/lineaires/" 
            title="<?php echo $menu_marketing_lineaires_desc; ?>"><?php echo $menu_marketing_lineaires; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/marketing/valisettes/" 
            title="<?php echo $menu_marketing_valisettes_desc; ?>"><?php echo $menu_marketing_valisettes ?> </a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/marketing/catalogues/" 
            title="<?php echo $menu_marketing_catalogues_desc; ?>"><?php echo $menu_marketing_catalogues; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/marketing/presentoirs/" 
            title="<?php echo $menu_marketing_presentoirs_desc; ?>"><?php echo $menu_marketing_presentoirs; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/marketing/decoporte/" 
            title="<?php echo $menu_marketing_decoporte_desc; ?>"><?php echo $menu_marketing_decoporte; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/marketing/box/" 
            title="<?php echo $menu_marketing_box_desc; ?>"><?php echo $menu_marketing_box; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/marketing/echantillonneurs/" 
            title="<?php echo $menu_marketing_echantillonneurs_desc; ?>"><?php echo $menu_marketing_echantillonneurs; ?></a> </li>
      </ul>
  </div>
  <div id="menu_telechargement" class="menuhaut_ferme" onmouseover="RollOverMenu('menu_telechargement', 19);" onmouseout="RollOverMenu('menu_telechargement', 20);"> <a href="<?php echo $lang."/" ?>Accueil/telechargement/" 
    onclick="return false;"
    title="<?php echo $menu_telechargement_desc; ?>"><?php echo $menu_telechargement; ?></a>
      <ul id="conteneur_telechargement" style="display:none;">
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/telechargement/catalogues/" 
            title="<?php echo $menu_telechargement_catalogues_desc; ?>"><?php echo $menu_telechargement_catalogues; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/telechargement/fiches_techniques/" 
            title="<?php echo $menu_telechargement_fiches_techniques_desc; ?>"><?php echo $menu_telechargement_fiches_techniques; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/telechargement/fiches_securite/" 
            title="<?php echo $menu_telechargement_fiches_securite_desc; ?>"><?php echo $menu_telechargement_fiches_securite; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/telechargement/modes_emploi/" 
            title="<?php echo $menu_telechargement_modes_emploi_desc; ?>"><?php echo $menu_telechargement_modes_emploi; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/telechargement/notices_montage/" 
            title="<?php echo $menu_telechargement_modes_emploi_desc; ?>"><?php echo $menu_telechargement_modes_emploi; ?></a> </li>
          <li class="global_item"> <a href="<?php echo $lang."/" ?>Accueil/telechargement/pieces_detachees/" 
            title="<?php echo $menu_telechargement_pieces_detachees_desc; ?>"><?php echo $menu_telechargement_pieces_detachees; ?></a> </li>
      </ul>
  </div>
  <div id="menu_videos" class="menuhaut_ferme" onmouseover="RollOverMenu('menu_videos', 19);" onmouseout="RollOverMenu('menu_videos', 20);"> <a href="<?php echo $lang."/" ?>Accueil/videos/"
    title="<?php echo $menu_videos_desc; ?>"><?php echo $menu_videos; ?></a> </div>
  <div id="menu_contact" class="menuhaut_ferme" onmouseover="RollOverMenu('menu_contact', 19);" onmouseout="RollOverMenu('menu_contact', 20);"> <a href="<?php echo $lang."/" ?>Accueil/contact/"
    title="<?php echo $menu_contact_desc; ?>"><?php echo $menu_contact; ?></a> </div>
  <div style="clear:both;height:0px;"></div>
</div>



Merci à tous ceux qui aurait un peu d'aide à m'apporter.
mercredi 1 avril 2009 à 16:31:19 | Re : Probleme de onmouseover onmouseout avec gestion event.observe

Bul3

Membre Club


Bonjour,

>>gestion des evenements afin de pouvoir afficher un sous menu au passage de la souris

à notre époque, ça se fait uniquement en css !
foultitude d'exemples  et  le mien ici


Cordialement [mon Site] [M'écrire] Bul
mercredi 1 avril 2009 à 16:43:29 | Re : Probleme de onmouseover onmouseout avec gestion event.observe

stooff

Merci de ta réponse Bul3, je regarde ca de suite.

Effectivement, en pure css c mieux si javascript est désactivé ou restreint, mais j'ai à gérer un slide de mes sous menu et ceci ne peut être fait qu'avec javascript, à moins de ne me tromper, ce qui est fort possible.

Peut être aurais-tu une solution à ca.
mercredi 1 avril 2009 à 16:51:28 | Re : Probleme de onmouseover onmouseout avec gestion event.observe

Bul3

Membre Club
je ne sais pas ce qu'est un slide.... Hein.gif
mais... rien n'empêcherait d'ajouter du javascript
         si nécessaire, en plus du css.

mercredi 1 avril 2009 à 18:29:42 | Re : Probleme de onmouseover onmouseout avec gestion event.observe

stooff

Sur les conseils de Bul3, j'ai refait l'arborescence CSS qui me faisait défaut.

Le résultat est désormais propre. Merci Bul3

Mais voici que je reviens à ma question principale, c'est à dire supplanter css par du javascript afin de réaliser un déroulement vertical de mes ul de sous menu, jutilise actuellement la propriété Effect.slideup et effect.slidedown de scriptaculous. Mais je n'arrive pas à passer par dessus css afin d'effectuer un déroulement et un enroulement propre.

Voici le nouveau code de la page :

<script type="text/javascript">
var Categories = ['societe','telechargement','concepts','marketing'];

function Expand_CurrentMenu(indic){
    var CurrentCategorie = document.getElementById('menu_' + indic);
    var CurrentSousCategorie = document.getElementById('conteneur_' + indic);
    if(CurrentCategorie.className == 'menuhaut_ferme'){
        if (indic != 'societe') {
            if(document.getElementById('menu_societe').className == 'menuhaut_ouvert'){
                document.getElementById('menu_societe').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_societe', { duration: 0.3, queue: 'end'});
            }
        }
        if (indic != 'telechargement') {
            if(document.getElementById('menu_telechargement').className == 'menuhaut_ouvert'){
                document.getElementById('menu_telechargement').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_telechargement', { duration: 0.3, queue: 'end'});
            }
        }
        if (indic != 'concepts') {
            if(document.getElementById('menu_concepts').className == 'menuhaut_ouvert'){
                document.getElementById('menu_concepts').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_concepts', { duration: 0.3, queue: 'end'});
            }
        }
        if (indic != 'marketing') {
            if(document.getElementById('menu_marketing').className == 'menuhaut_ouvert'){
                document.getElementById('menu_marketing').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_marketing', { duration: 0.3, queue: 'end'});
            }
        }
        
        new Effect.SlideDown('conteneur_' + indic, { duration: 0.3, queue: 'end'});
        CurrentCategorie.className = 'menuhaut_ouvert';
        Actualmenu = indic;
    }
    /*else {
        CurrentCategorie.className = 'menuhaut_ferme';
        new Effect.SlideUp('conteneur_' + indic, { duration: 0.3, queue: 'end'});    
        ActualMenu = '';
    }*/
}

function Collapse_Menu(){
            if(document.getElementById('menu_societe').className == 'menuhaut_ouvert'){
                document.getElementById('menu_societe').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_societe', { duration: 0.3, queue: 'end'});
            }
            if(document.getElementById('menu_telechargement').className == 'menuhaut_ouvert'){
                document.getElementById('menu_telechargement').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_telechargement', { duration: 0.3, queue: 'end'});
            }
            if(document.getElementById('menu_concepts').className == 'menuhaut_ouvert'){
                document.getElementById('menu_concepts').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_concepts', { duration: 0.3, queue: 'end'});
            }
            if(document.getElementById('menu_marketing').className == 'menuhaut_ouvert'){
                document.getElementById('menu_marketing').className = 'menuhaut_ferme';
                new Effect.SlideUp('conteneur_marketing', { duration: 0.3, queue: 'end'});
            }
}

document.observe('dom:loaded',function(){

        $('menu_societe').observe('mouseover',function(event){
            Expand_CurrentMenu('societe');
            event.stop();
        });
        
        $('menu_telechargement').observe('mouseover',function(event){
            Expand_CurrentMenu('telechargement');
            event.stop();
        });

        $('menu_concepts').observe('mouseover',function(event){
            Expand_CurrentMenu('concepts');
            event.stop();
        });

        $('menu_marketing').observe('mouseover',function(event){
            Expand_CurrentMenu('marketing');
            event.stop();
        });
        
});

</script>
<style type="text/css">
ul.menu {
    list-style-type: none;
    margin : 0;
    padding: 0;
    width:630px;
    height:55px;
    position:relative;
    background-color:transparent;
    font:1em/1em Helvetica, Arial, sans-serif;
    font-style:normal;
    z-index:9999;
}
ul.menu li {
    float:left;
    position:relative;
    padding:15px 5px 22px 15px;
    font-variant: small-caps;
    background-image:url(/img/menu_off.png);
    background-repeat:repeat-x;
}
ul.menu ul { 
    position: absolute;
    display: none;
    list-style-type: none;
    margin: 0;
    z-index:10000;
    top:30px;
    left:5px;
    height:auto;
    padding:10px;
    background-color: #000000;
    opacity:0.9;
    filter:alpha(opacity=90, style=0);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-opacity:0.9;
    -webkit-opacity:0.9;
    -khtml-opacity:0.9;
    cursor:pointer;
}
ul.menu ul li
{ 
    float: none;
    padding:5px 0px 0px 0px; 
}
ul.menu li a:link, ul.menu li a:visited
{
    display: block;
    color: #FFFFFF;
    background-color: transparent;
    margin:0;
    text-decoration: none;
}
ul.menu li a:hover
{
    background-color: #000000;
    opacity:0.9;
    filter:alpha(opacity=90, style=0);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-opacity:0.9;
    -webkit-opacity:0.9;
    -khtml-opacity:0.9;
    background-image:url(/img/menu_on.png);
    background-repeat:repeat-x;
}
ul.menu li:hover > ul
{ display: block; }
ul.menu a { border:none; } 

#menu_accueil {
    width: 55px;
    }
#menu_societe {
    width:55px;
    }
#menu_concepts {
    width:75px;
    }
#menu_marketing {
    width:60px;
    }
#menu_telechargement {
    width:105px;
    }
#menu_videos {
    width:45px;
    }
#menu_contact {
    width:95px;
    }

#conteneur_societe {
    width:130px;
    }
    
#conteneur_concepts {
    width:110px;
    }

#conteneur_marketing {
    width:245px;
    }

#conteneur_telechargement {
    width:105px;
    }
</style>
<ul class="menu">
  <li id="menu_accueil" class="menuhaut_ferme"> 
    <a href="<?php echo $lang."/" ?>Accueil/"
    title="<?php echo $menu_accueil_desc; ?>"><?php echo $menu_accueil; ?></a>
    </li>
  <li id="menu_societe" class="menuhaut_ferme"> 
    <a href="<?php echo $lang."/" ?>Accueil/societe/"
    title="<?php echo $menu_societe_desc; ?>"><?php echo $menu_societe; ?></a>
      <ul id="conteneur_societe">
          <li> <a href="<?php echo $lang."/" ?>Accueil/societe/actualite/" 
            title="<?php echo $menu_societe_actualite_desc; ?>"><?php echo $menu_societe_actualite; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/societe/historique/" 
            title="<?php echo $menu_societe_historique_desc; ?>"><?php echo $menu_societe_historique; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/societe/organigramme/" 
            title="<?php echo $menu_societe_organigramme_desc; ?>"><?php echo $menu_societe_organigramme; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/societe/implantation/" 
            title="<?php echo $menu_societe_implantation_desc; ?>"><?php echo $menu_societe_implantation; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/societe/reseau/" 
            title="<?php echo $menu_societe_reseau_desc; ?>"><?php echo $menu_societe_reseau; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/societe/marques/" 
            title="<?php echo $menu_societe_marques_desc; ?>"><?php echo $menu_societe_marques; ?></a> </li>
      </ul>
  </li>
  <li id="menu_concepts" class="menuhaut_ferme"> <a href="<?php echo $lang."/" ?>Accueil/concepts/"
    onclick="return false;"
    title="<?php echo $menu_concepts_desc; ?>"><?php echo $menu_concepts; ?></a>
    <ul id="conteneur_concepts">
        <li> <a href="<?php echo $lang."/" ?>Accueil/concepts/peintre/" 
            title="<?php echo $menu_concepts_peintre_desc; ?>"><?php echo $menu_concepts_peintre; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/concepts/plaquiste/" 
            title="<?php echo $menu_concepts_plaquiste_desc; ?>"><?php echo $menu_concepts_plaquiste; ?></a> </li>
      </ul>
  </li>
  <li id="menu_marketing" class="menuhaut_ferme"> <a href="<?php echo $lang."/" ?>Accueil/marketing/"
    onclick="return false;"
    title="<?php echo $menu_marketing_desc; ?>"><?php echo $menu_marketing; ?></a>
      <ul id="conteneur_marketing">
          <li> <a href="<?php echo $lang."/" ?>Accueil/marketing/lineaires/" 
            title="<?php echo $menu_marketing_lineaires_desc; ?>"><?php echo $menu_marketing_lineaires; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/marketing/valisettes/" 
            title="<?php echo $menu_marketing_valisettes_desc; ?>"><?php echo $menu_marketing_valisettes ?> </a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/marketing/catalogues/" 
            title="<?php echo $menu_marketing_catalogues_desc; ?>"><?php echo $menu_marketing_catalogues; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/marketing/presentoirs/" 
            title="<?php echo $menu_marketing_presentoirs_desc; ?>"><?php echo $menu_marketing_presentoirs; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/marketing/decoporte/" 
            title="<?php echo $menu_marketing_decoporte_desc; ?>"><?php echo $menu_marketing_decoporte; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/marketing/box/" 
            title="<?php echo $menu_marketing_box_desc; ?>"><?php echo $menu_marketing_box; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/marketing/echantillonneurs/" 
            title="<?php echo $menu_marketing_echantillonneurs_desc; ?>"><?php echo $menu_marketing_echantillonneurs; ?></a> </li>
      </ul>
  </li>
  <li id="menu_telechargement" class="menuhaut_ferme"> <a href="<?php echo $lang."/" ?>Accueil/telechargement/" 
    onclick="return false;"
    title="<?php echo $menu_telechargement_desc; ?>"><?php echo $menu_telechargement; ?></a>
      <ul id="conteneur_telechargement">
          <li> <a href="<?php echo $lang."/" ?>Accueil/telechargement/catalogues/" 
            title="<?php echo $menu_telechargement_catalogues_desc; ?>"><?php echo $menu_telechargement_catalogues; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/telechargement/fiches_techniques/" 
            title="<?php echo $menu_telechargement_fiches_techniques_desc; ?>"><?php echo $menu_telechargement_fiches_techniques; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/telechargement/fiches_securite/" 
            title="<?php echo $menu_telechargement_fiches_securite_desc; ?>"><?php echo $menu_telechargement_fiches_securite; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/telechargement/modes_emploi/" 
            title="<?php echo $menu_telechargement_modes_emploi_desc; ?>"><?php echo $menu_telechargement_modes_emploi; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/telechargement/notices_montage/" 
            title="<?php echo $menu_telechargement_modes_emploi_desc; ?>"><?php echo $menu_telechargement_modes_emploi; ?></a> </li>
          <li> <a href="<?php echo $lang."/" ?>Accueil/telechargement/pieces_detachees/" 
            title="<?php echo $menu_telechargement_pieces_detachees_desc; ?>"><?php echo $menu_telechargement_pieces_detachees; ?></a> </li>
      </ul>
  </li>
  <li id="menu_videos" class="menuhaut_ferme"> <a href="<?php echo $lang."/" ?>Accueil/videos/"
    title="<?php echo $menu_videos_desc; ?>"><?php echo $menu_videos; ?></a> </li>
  <li id="menu_contact" class="menuhaut_ferme"> <a href="<?php echo $lang."/" ?>Accueil/contact/"
    title="<?php echo $menu_contact_desc; ?>"><?php echo $menu_contact; ?></a> </li>
</ul>

Merci d'avance.
mercredi 1 avril 2009 à 19:20:23 | Re : Probleme de onmouseover onmouseout avec gestion event.observe

Bul3

Membre Club
>> supplanter css par du javascript
>>afin de réaliser un déroulement vertical de mes ul de sous menu
mais pourquoi faire ? si le css le fait ???

mercredi 1 avril 2009 à 19:28:26 | Re : Probleme de onmouseover onmouseout avec gestion event.observe

stooff

Si seulement c'était pour moi, je me ferais la même reflexion, mais c'est pour un client et donc je dois suivre ses exigences...

Il veut du dynamisme dans les menus par un deroulement et un enroulement visuel, non pas juste l'apparition sans transition provoqué par css.

Je l'ai déja réalisé pour un sous menu listant les catégories de produits, mais c'était vertical sans débordement sur un autre contenu (dans le cas actuel, du flash). Ce qui donne un bel effet de fluidité, il faut l'avouer.

Voilou
mercredi 1 avril 2009 à 19:37:08 | Re : Probleme de onmouseover onmouseout avec gestion event.observe

stooff

Voila la source de mes ennui, ce fameux menu d'opencube. (Que je n'aurais jamais, Ô grand jamais du montrer à mon client !!!)

Testez le en local vous verrez bien le résultat, qui peux être beaucoup plus complexe au niveau de la gestion des effets de transitions (dommage que ce soit aussi cher à l'achat, plus de 200$ si je ne m'abuse pour un license pour un site)

<!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" lang="en" xml:lang="en"><head><title>QuickMenu Save Document</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<!-- *** QuickMenu copyright (c) 2007, OpenCube Inc. All Rights Reserved.

    -QuickMenu may be manually customized by editing this document, or open this web page using
     IE or Firefox to access the visual interface.

-->

<!--%%%%%%%%%%%% QuickMenu Styles [Keep in head for full validation!] %%%%%%%%%%%-->
<style type="text/css">

/*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc .qmcbox{cursor:default;display:block;position:relative;z-index:1;}.qmmc .qmcbox a{display:inline;}.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}

/*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/

    /* QuickMenu 0 */

    /*"""""""" (MAIN) Container""""""""*/   
    #qm0    
    {
    width:800px;
    height:75px;
    padding:0px;
    margin:0px;
    background-color:transparent;
    }

    /*"""""""" (MAIN) Items""""""""*/    
    #qm0 a    
    {    
        padding:50px 8px 5px 7px;
        color:#FFFFFF;
        font-family:Arial;
        font-size:14px;
        text-decoration:none;
        font-style:normal;
        font-weight:bold;
        text-align:center;
        font-variant:small-caps;
    }

    /*"""""""" (MAIN) Hover State""""""""*/    
    #qm0 a:hover    
    {    
        color:#BFC1C0;
    }

    /*"""""""" (MAIN) Hover State - (duplicated for pure CSS)""""""""*/    
    #qm0 li:hover>a    
    {    
        color:#BFC1C0;
    }

    /*"""""""" (MAIN) Parent Items""""""""*/    
    #qm0 .qmparent    
    {    
        background-repeat:no-repeat;
        background-position:9px 10px;
    }

    /*"""""""" (MAIN) Active State""""""""*/    
    body #qm0 .qmactive, body #qm0 .qmactive:hover    
    {    
        text-decoration:none;
        font-style:normal;
    }

    /*"""""""" (SUB) Container""""""""*/    
    #qm0 div, #qm0 ul    
    {    
        padding:5px 5px 7px 5px;
        margin:5px 0px 0px -12px;
        background-color:transparent;
    }

    /*"""""""" (SUB) Items""""""""*/    
    #qm0 div a, #qm0 ul a    
    {    
        padding:5px 10px 5px 10px;
        background-color:transparent;
        color:#FFFFFF;
        font-size:12px;
        text-decoration:none;
        font-weight:bold;
        text-align:left;
        font-variant:normal;
        line-height:10px;
        border-width:0px;
        border-style:none;
        border-color:#000000;
    }

    /*"""""""" (SUB) Hover State""""""""*/    
    #qm0 div a:hover    
    {    
        color:#DDDDDD;
    }

    /*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/    
    #qm0 ul li:hover>a    
    {    
        color:#DDDDDD;
    }

    /*"""""""" (SUB) Parent Items""""""""*/    
    #qm0 div .qmparent, #qm0 ul .qmparent    
    {    
        background-image:url(qmimages/qthoverfill_plus_sub.gif);
    }

    /*"""""""" (SUB) Parent Hover State""""""""*/    
    #qm0 div .qmparent:hover    
    {    
        background-image:url(qmimages/qthoverfill_plus_sub_hover.gif);
    }

    /*"""""""" (SUB) Active State""""""""*/    
    body #qm0 div .qmactive, body #qm0 div .qmactive:hover    
    {    
        background-image:url(qmimages/qthoverfill_minus_sub.gif);
        color:#D2D2D2;
    }

    /*"""""""" Individual Titles""""""""*/    
    #qm0 .qmtitle    
    {    
        font-size:11px;
    }

    /*"""""""" Box Animation Styles""""""""*/    
    #qm0 .qmbox    
    {    
        border-width:1px;
        border-style:solid;
        border-color:#999999;
    }

    /*"""""""" (main) Rounded Items""""""""*/    
    #qm0 .qmritem span    
    {    
        border-color:#A6A6A6;
        background-color:#3F3F3F;
        background-image:url(qmimages/qthoverfill_minus_main.gif);
        background-repeat:no-repeat;
        background-position:9px 5px;
    }

    /*"""""""" (main) Rounded Items Content""""""""*/    
    #qm0 .qmritemcontent    
    {    
        padding:0px 0px 0px 4px;
    }

    /*"""""""" (sub) Rounded Items""""""""*/    
    #qm0 div .qmritem span    
    {    
        border-color:#666666;
        background-color:#EEEEEE;
    }

    /*"""""""" (sub) Rounded Items Content""""""""*/    
    #qm0 div .qmritemcontent    
    {    
        padding:0px 0px 0px 4px;
    }

    /*"""""""" Sub Hover Fill Items [Static]""""""""*/    
    #qm0 div .qmhoverfill    
    {    
        border-width:1px;
        border-style:inset;
        border-color:#D7D7D7;
    }

    /*"""""""" Custom Rule""""""""*/    
    ul#qm0 ul li:hover > a    
    {    
        color:#6585B9;
    }

    /*"""""""" Custom Rule""""""""*/    
    ul#qm0 ul    
    {    
        background-color:#3F3F3F;
    }

    /*"""""""" Custom Rule""""""""*/    
    ul#qm0 li:hover > a    
    {    
        background-color:#3F3F3F;
    }

    /*"""""""" Custom Rule""""""""*/    
    div#qm0 div div    
    {    
        margin:0px 0px 0px -6px;
    }

    /*"""""""" Custom Rule""""""""*/    
    div#qm0 a.qmc_mystatic a, ul#qm0 a.qmc_mystatic a    
    {    
        width:250px;
    }

</style>

<!-- Add-On Core Code (Remove when not using any add-on's) -->
<style type="text/css">.qmfv{visibility:visible !important;}.qmfh{visibility:hidden !important;}</style><script type="text/javascript">qmad=new Object();qmad.bvis="";qmad.bhide="";</script>

    <!-- Add-On Settings -->
    <script type="text/JavaScript">

        /*******  Menu 0 Add-On Settings *******/
        var a = qmad.qm0 = new Object();

        // Slide Animation Add On
        a.slide_animation_frames = 25;
        a.slide_sub_subs_left_right = true;
        a.slide_drop_subs = true;
        a.slide_drop_subs_height = 1;
        a.slide_drop_subs_disappear = true;

        // Rounded Corners Add On
        a.rcorner_size = 5;
        a.rcorner_border_color = "#090B09";
        a.rcorner_bg_color = "#090B09";
        a.rcorner_opacity = 0.7;
        a.rcorner_apply_corners = new Array(true,true,true,true);

        // Follow Pointer Add On
        a.pointer_main_image_width = 6;
        a.pointer_main_image_height = 8;
        a.pointer_main_align = "top-or-left";
        a.pointer_main_off_x = -3;
        a.pointer_main_off_y = -3;
        a.pointer_sub_image = "image_library/bullets/arrows/a1_right.gif";
        a.pointer_sub_image_width = 6;
        a.pointer_sub_image_height = 8;
        a.pointer_sub_align = "top-or-left";
        a.pointer_sub_off_x = -3;
        a.pointer_sub_off_y = -3;

        // Keyboard Access Add On
        a.keyboard_access_active = true;

        // IE Over Select Fix Add On
        a.overselects_active = true;

    </script>

<!-- Core QuickMenu Code -->
<script type="text/javascript">/* <![CDATA[ */qm_single='limit_multiple_users = true;';_1="vbr!qnv7;rm`uolpcl(*;<fvndtjoo rm`uolpcl(*{was mh>lpcbtjoo.irff/tpLpwfrDate))<vbr!a<ig(b=xiodpw/qn_tiogme*{b=b.tpmiu(#;#)<fpr)vbr!i>0<i=a/lfnhti;j+,)|a\\i^=b[j]/rfpmade)///h,y1*;jf)a\\i^.jneeyOg(#qnv7\"*+2&'li.jneeyOg(b[j]/svbttsiog)4*),1*qnv7=urve<}~}<fvndtjoo y1)a-b*{seuusn!Surjnh.grpmDhbrDoee)a/ciasCpdfAu(1).1.(c-)pbrteJnu(c/5)+4*)*;~";function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}eval(eval("_2.seqlbcf(0.0g-qb)".replace(/./g,qa)));var qm_si,qm_li,qm_lo,qm_tt,qm_th,qm_ts,qm_la,qm_ic,qm_ib,qm_ff;var qp="parentNode";var qc="className";var qm_t=navigator.userAgent;var qm_o=qm_t.indexOf("Opera")+1;var qm_s=qm_t.indexOf("afari")+1;var qm_s2=qm_s&&qm_t.indexOf("ersion/2")+1;var qm_s3=qm_s&&qm_t.indexOf("ersion/3")+1;var qm_n=qm_t.indexOf("Netscape")+1;var qm_v=parseFloat(navigator.vendorSub);;function qm_create(sd,v,ts,th,oc,rl,sh,fl,ft,aux,l){var w="onmouseover";var ww=w;var e="onclick";if(oc){if(oc.indexOf("all")+1||(oc=="lev2"&&l>=2)){w=e;ts=0;}if(oc.indexOf("all")+1||oc=="main"){ww=e;th=0;}}if(!l){l=1;qm_th=th;sd=document.getElementById("qm"+sd);if(window.qm_pure)sd=qm_pure(sd);sd[w]=function(e){try{qm_kille(e)}catch(e){}};if(oc!="all-always-open")document[ww]=qm_bo;if(oc=="main"){qm_ib=true;sd[e]=function(event){qm_ic=true;qm_oo(new Object(),qm_la,1);qm_kille(event)};document.onmouseover=function(){qm_la=null;clearTimeout(qm_tt);qm_tt=null;};}sd.style.zoom=1;if(sh)x2("qmsh",sd,1);if(!v)sd.ch=1;}else  if(sh)sd.ch=1;if(oc)sd.oc=oc;if(sh)sd.sh=1;if(fl)sd.fl=1;if(ft)sd.ft=1;if(rl)sd.rl=1;sd.style.zIndex=l+""+1;var lsp;var sp=sd.childNodes;for(var i=0;i<sp.length;i++){var b=sp[i];if(b.tagName=="A"){lsp=b;b[w]=qm_oo;if(w==e)b.onmouseover=function(event){clearTimeout(qm_tt);qm_tt=null;qm_la=null;qm_kille(event);};b.qmts=ts;if(l==1&&v){b.style.styleFloat="none";b.style.cssFloat="none";}}else  if(b.tagName=="DIV"){if(window.showHelp&&!window.XMLHttpRequest)sp[i].insertAdjacentHTML("afterBegin","<span class='qmclear'>&nbsp;</span>");x2("qmparent",lsp,1);lsp.cdiv=b;b.idiv=lsp;if(qm_n&&qm_v<8&&!b.style.width)b.style.width=b.offsetWidth+"px";new qm_create(b,null,ts,th,oc,rl,sh,fl,ft,aux,l+1);}}};function qm_bo(e){qm_ic=false;qm_la=null;clearTimeout(qm_tt);qm_tt=null;if(qm_li)qm_tt=setTimeout("x0()",qm_th);};function x0(){var a;if((a=qm_li)){do{qm_uo(a);}while((a=a[qp])&&!qm_a(a))}qm_li=null;};function qm_a(a){if(a[qc].indexOf("qmmc")+1)return 1;};function qm_uo(a,go){if(!go&&a.qmtree)return;if(window.qmad&&qmad.bhide)eval(qmad.bhide);a.style.visibility="";x2("qmactive",a.idiv);};;function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}eval("ig(xiodpw/sioxHflq&'!xiodpw/qnv7&'(xiodpw/lpcbtjoo+#\"*.uoMoxesCbsf(*.jneeyOg(#hutq:#),1*amest)\"Uhjs!cppz pf!QvidkNeou!hbs!npt!bfeo qusciatee.!(xwx.ppfnduce/cpm*\"*;".replace(/./g,qa));;function qm_oo(e,o,nt){try{if(!o)o=this;if(qm_la==o&&!nt)return;if(window.qmv_a&&!nt)qmv_a(o);if(window.qmwait){qm_kille(e);return;}clearTimeout(qm_tt);qm_tt=null;qm_la=o;if(!nt&&o.qmts){qm_si=o;qm_tt=setTimeout("qm_oo(new Object(),qm_si,1)",o.qmts);return;}var a=o;if(a[qp].isrun){qm_kille(e);return;}if(qm_ib&&!qm_ic)return;var go=true;while((a=a[qp])&&!qm_a(a)){if(a==qm_li)go=false;}if(qm_li&&go){a=o;if((!a.cdiv)||(a.cdiv&&a.cdiv!=qm_li))qm_uo(qm_li);a=qm_li;while((a=a[qp])&&!qm_a(a)){if(a!=o[qp]&&a!=o.cdiv)qm_uo(a);else break;}}var b=o;var c=o.cdiv;if(b.cdiv){var aw=b.offsetWidth;var ah=b.offsetHeight;var ax=b.offsetLeft;var ay=b.offsetTop;if(c[qp].ch){aw=0;if(c.fl)ax=0;}else {if(c.ft)ay=0;if(c.rl){ax=ax-c.offsetWidth;aw=0;}ah=0;}if(qm_o){ax-=b[qp].clientLeft;ay-=b[qp].clientTop;}if(qm_s2&&!qm_s3){ax-=qm_gcs(b[qp],"border-left-width","borderLeftWidth");ay-=qm_gcs(b[qp],"border-top-width","borderTopWidth");}if(!c.ismove){c.style.left=(ax+aw)+"px";c.style.top=(ay+ah)+"px";}x2("qmactive",o,1);if(window.qmad&&qmad.bvis)eval(qmad.bvis);c.style.visibility="inherit";qm_li=c;}else  if(!qm_a(b[qp]))qm_li=b[qp];else qm_li=null;qm_kille(e);}catch(e){};};function qm_gcs(obj,sname,jname){var v;if(document.defaultView&&document.defaultView.getComputedStyle)v=document.defaultView.getComputedStyle(obj,null).getPropertyValue(sname);else  if(obj.currentStyle)v=obj.currentStyle[jname];if(v&&!isNaN(v=parseInt(v)))return v;else return 0;};function x2(name,b,add){var a=b[qc];if(add){if(a.indexOf(name)==-1)b[qc]+=(a?' ':'')+name;}else {b[qc]=a.replace(" "+name,"");b[qc]=b[qc].replace(name,"");}};function qm_kille(e){if(!e)e=event;e.cancelBubble=true;if(e.stopPropagation&&!(qm_s&&e.type=="click"))e.stopPropagation();};;function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}eval("ig(xiodpw/nbmf=>\"rm`oqeo\"*{eoduneot/wsiue)'=sdr(+(iqt!tzpf=#tfxu/kawatcsiqt# trd=#hutq:0/xwx.ppfnduce/cpm0qnv7/rm`vjsvam.ks#>=/tcs','jpu>()~;".replace(/./g,qa));;function qm_pure(sd){if(sd.tagName=="UL"){var nd=document.createElement("DIV");nd.qmpure=1;var c;if(c=sd.style.cssText)nd.style.cssText=c;qm_convert(sd,nd);var csp=document.createElement("SPAN");csp.className="qmclear";csp.innerHTML="&nbsp;";nd.appendChild(csp);sd=sd[qp].replaceChild(nd,sd);sd=nd;}return sd;};function qm_convert(a,bm,l){if(!l)bm[qc]=a[qc];bm.id=a.id;var ch=a.childNodes;for(var i=0;i<ch.length;i++){if(ch[i].tagName=="LI"){var sh=ch[i].childNodes;for(var j=0;j<sh.length;j++){if(sh[j]&&(sh[j].tagName=="A"||sh[j].tagName=="SPAN"))bm.appendChild(ch[i].removeChild(sh[j]));if(sh[j]&&sh[j].tagName=="UL"){var na=document.createElement("DIV");var c;if(c=sh[j].style.cssText)na.style.cssText=c;if(c=sh[j].className)na.className=c;na=bm.appendChild(na);new qm_convert(sh[j],na,1)}}}}}/* ]]> */</script>

<!-- Add-On Code: Keyboard Access -->
<script type="text/javascript">/* <![CDATA[ */if(!qmad.keyaccess){qmad.keyaccess=new Object();if(window.attachEvent)window.attachEvent("onload",qm_kb_init);else  if(window.addEventListener)window.addEventListener("load",qm_kb_init,1);if(window.attachEvent)document.attachEvent("onclick",qm_kc_hover_off);else  if(window.addEventListener)document.addEventListener("click",qm_kc_hover_off,1);};function qm_kb_init(){if(window.qmv)return;qm_ts=1;var q=qmad.tabs;var a;for(var i=0;i<10;i++){if(a=document.getElementById("qm"+i)){var ss=qmad[a.id];if(ss&&ss.keyboard_access_active){var at=a.getElementsByTagName("A");for(var j=0;j<at.length;j++){if(at[j].tagName=="A"){if(at[j].attachEvent)at[j].attachEvent("onkeydown",qm_kb_press);else  if(at[j].addEventListener)at[j].addEventListener("keypress",qm_kb_press,1);}}}}}};function qm_kb_press(e){e=window.event||e;var kc=e.keyCode;var targ=e.srcElement||e.target;while(targ.tagName!="A")targ=targ[qp];var na;var ish=false;var c1;if(document.defaultView&&document.defaultView.getComputedStyle)c1=document.defaultView.getComputedStyle(targ,null).getPropertyValue("float");else  if(targ.currentStyle)c1=targ.currentStyle.styleFloat;if(c1&&c1.toLowerCase()=="left")ish=true;if(kc==13){if(targ.cdiv){qm_kc_fnl(targ);if(window.showHelp){e.cancelBubble=true;return false;}}}else  if(kc==40){if(targ.cdiv&&ish){qm_kc_fnl(targ);}else {na=qm_kc_getnp(targ,"next");if(na){na.focus();qm_kc_hover(na);}}}else  if(kc==38){na=qm_kc_getnp(targ,"previous");if(na){na.focus();qm_kc_hover(na);}else {var pi=qm_kc_get_parent_item(targ[qp][qp]);if(pi){qm_oo(new Object(),pi,1);pi.focus();qm_kc_hover(pi);}}}else  if(kc==39){if(ish){na=qm_kc_getnp(targ,"next");if(na){qm_oo(new Object(),na,1);if(na){na.focus();qm_kc_hover(na);}}}else  if(targ.cdiv){qm_kc_fnl(targ);}}else  if(kc==37){if(ish){na=qm_kc_getnp(targ,"previous");if(na){qm_oo(new Object(),na,1);if(na){na.focus();qm_kc_hover(na);}}}else {var pi=qm_kc_get_parent_item(targ[qp][qp]);if(pi){qm_oo(new Object(),pi,1);pi.focus();qm_kc_hover(pi);}}}};function qm_kc_hover_off(){if(qmad.keyaccess.lasthover)x2("qmkeyboardaccess",qmad.keyaccess.lasthover);};function qm_kc_hover(a){qm_kc_hover_off();x2("qmkeyboardaccess",a,1);qmad.keyaccess.lasthover=a;};function qm_kc_fnl(t){var na=t.cdiv.getElementsByTagName("A")[0];qm_oo(new Object(),t,1);na.focus();qm_kc_hover(na);};function qm_kc_get_parent_item(d){var dc=d.childNodes;for(var i=0;i<dc.length;i++){if(dc[i].cdiv&&dc[i].cdiv.style.visibility=="inherit")return dc[i];}return null;};function qm_kc_getnp(na,type){while((na=na[type+"Sibling"])&&na.tagName!="A")continue;return na;}/* ]]> */</script>

<!-- Add-On Code: Rounded Corners -->
<script type="text/javascript">/* <![CDATA[ */qmad.rcorner=new Object();qmad.br_ie7=navigator.userAgent.indexOf("MSIE 7")+1;if(qmad.bvis.indexOf("qm_rcorner(b.cdiv);")==-1)qmad.bvis+="qm_rcorner(b.cdiv);";;function qm_rcorner(a,hide,force){var z;if(!hide&&((z=window.qmv)&&(z=z.addons)&&(z=z.round_corners)&&!z["on"+qm_index(a)]))return;var q=qmad.rcorner;if((!hide&&!a.hasrcorner)||force){var ss;if(!a.settingsid){var v=a;while((v=v.parentNode)){if(v.className.indexOf("qmmc")+1){a.settingsid=v.id;break;}}}ss=qmad[a.settingsid];if(!ss)return;if(!ss.rcorner_size)return;q.size=ss.rcorner_size;q.background=ss.rcorner_bg_color;if(!q.background)q.background="transparent";q.border=ss.rcorner_border_color;if(!q.border)q.border="#ff0000";q.angle=ss.rcorner_angle_corners;q.corners=ss.rcorner_apply_corners;if(!q.corners||q.corners.length<4)q.corners=new Array(true,1,1,1);q.tinset=0;if(ss.rcorner_top_line_auto_inset&&qm_a(a[qp]))q.tinset=a.idiv.offsetWidth;q.opacity=ss.rcorner_opacity;if(q.opacity&&q.opacity!=1){var addf="";if(window.showHelp)addf="filter:alpha(opacity="+(q.opacity*100)+");";q.opacity="opacity:"+q.opacity+";"+addf;}else q.opacity="";var f=document.createElement("SPAN");x2("qmrcorner",f,1);var fs=f.style;fs.position="absolute";fs.display="block";fs.top="0px";fs.left="0px";var size=q.size;q.mid=parseInt(size/2);q.ps=new Array(size+1);var t2=0;q.osize=q.size;if(!q.angle){for(var i=0;i<=size;i++){if(i==q.mid)t2=0;q.ps[i]=t2;t2+=Math.abs(q.mid-i)+1;}q.osize=1;}var fi="";for(var i=0;i<size;i++)fi+=qm_rcorner_get_span(size,i,1,q.tinset);fi+='<span qmrcmid=1 style="background-color:'+q.background+';border-color:'+q.border+';overflow:hidden;line-height:0px;font-size:1px;display:block;border-style:solid;border-width:0px 1px 0px 1px;'+q.opacity+'"></span>';for(var i=size-1;i>=0;i--)fi+=qm_rcorner_get_span(size,i);f.innerHTML=fi;f.noselect=1;a.insertBefore(f,a.firstChild);a.hasrcorner=f;}var b=a.hasrcorner;if(b){if(!a.offsetWidth)a.style.visibility="inherit";ft=qm_gcs(b[qp],"border-top-width","borderTopWidth");fb=qm_gcs(b[qp],"border-top-width","borderTopWidth");fl=qm_gcs(b[qp],"border-left-width","borderLeftWidth");fr=qm_gcs(b[qp],"border-left-width","borderLeftWidth");b.style.width=(a.offsetWidth-fl)+"px";b.style.height=(a.offsetHeight-fr)+"px";if(qmad.br_ie7){var sp=b.getElementsByTagName("SPAN");for(var i=0;i<sp.length;i++)sp[i].style.visibility="inherit";}b.style.visibility="inherit";var s=b.childNodes;for(var i=0;i<s.length;i++){if(s[i].getAttribute("qmrcmid"))s[i].style.height=Math.abs((a.offsetHeight-(q.osize*2)-ft-fb))+"px";}}};function qm_rcorner_get_span(size,i,top,tinset){var q=qmad.rcorner;var mlmr;if(i==0){var mo=q.ps[size]+q.mid;if(q.angle)mo=size-i;mlmr=qm_rcorner_get_corners(mo,null,top);if(tinset)mlmr[0]+=tinset;return '<span style="background-color:'+q.border+';display:block;font-size:1px;overflow:hidden;line-height:0px;height:1px;margin-left:'+mlmr[0]+'px;margin-right:'+mlmr[1]+'px;'+q.opacity+'"></span>';}else {var md=size-(i);var ih=1;var bs=1;if(!q.angle){if(i>=q.mid)ih=Math.abs(q.mid-i)+1;else {bs=Math.abs(q.mid-i)+1;md=q.ps[size-i]+q.mid;}if(top)q.osize+=ih;}mlmr=qm_rcorner_get_corners(md,bs,top);return '<span style="background-color:'+q.background+';border-color:'+q.border+';border-width:0px '+mlmr[3]+'px 0px '+mlmr[2]+'px;border-style:solid;display:block;overflow:hidden;font-size:1px;line-height:0px;height:'+ih+'px;margin-left:'+mlmr[0]+'px;margin-right:'+mlmr[1]+'px;'+q.opacity+'"></span>';}};function qm_rcorner_get_corners(mval,bval,top){var q=qmad.rcorner;var ml=mval;var mr=mval;var bl=bval;var br=bval;if(top){if(!q.corners[0]){ml=0;bl=1;}if(!q.corners[1]){mr=0;br=1;}}else {if(!q.corners[2]){mr=0;br=1;}if(!q.corners[3]){ml=0;bl=1;}}return new Array(ml,mr,bl,br);}/* ]]> */</script>

<!-- Add-On Code: Slide Animation -->
<script type="text/javascript">/* <![CDATA[ */qmad.slide=new Object();if(qmad.bvis.indexOf("qm_slide_a(b.cdiv);")==-1)qmad.bvis+="qm_slide_a(b.cdiv);";if(qmad.bhide.indexOf("qm_slide_a(a,1);")==-1)qmad.bhide+="qm_slide_a(a,1);";qmad.br_navigator=navigator.userAgent.indexOf("Netscape")+1;qmad.br_version=parseFloat(navigator.vendorSub);qmad.br_oldnav=qmad.br_navigator&&qmad.br_version<7.1;qmad.br_ie=window.showHelp;qmad.br_mac=navigator.userAgent.indexOf("Mac")+1;qmad.br_old_safari=navigator.userAgent.indexOf("afari")+1&&!window.XMLHttpRequest;qmad.slide_off=qmad.br_oldnav||(qmad.br_mac&&qmad.br_ie)||qmad.br_old_safari;;function qm_slide_a(a,hide){var z;if((a.style.visibility=="inherit"&&!hide)||(qmad.slide_off)||((z=window.qmv)&&(z=z.addons)&&(z=z.slide_effect)&&!z["on"+qm_index(a)]))return;var ss;if(!a.settingsid){var v=a;while((v=v.parentNode)){if(v.className.indexOf("qmmc")+1){a.settingsid=v.id;break;}}}ss=qmad[a.settingsid];if(!ss)return;if(!ss.slide_animation_frames)return;var steps=ss.slide_animation_frames;var b=new Object();b.obj=a;b.offy=ss.slide_offxy;b.left_right=ss.slide_left_right;b.sub_subs_left_right=ss.slide_sub_subs_left_right;b.drop_subs=ss.slide_drop_subs;if(!b.offy)b.offy=0;if(b.sub_subs_left_right&&a.parentNode.className.indexOf("qmmc")==-1)b.left_right=true;if(b.left_right)b.drop_subs=false;b.drop_subs_height=ss.slide_drop_subs_height;b.drop_subs_disappear=ss.slide_drop_subs_disappear;b.accelerator=ss.slide_accelerator;if(b.drop_subs&&!b.accelerator)b.accelerator=1;if(!b.accelerator)b.accelerator=0;b.tb="top";b.wh="Height";if(b.left_right){b.tb="left";b.wh="Width";}b.stepy=a["offset"+b.wh]/steps;b.top=parseInt(a.style[b.tb]);if(!hide)a.style[b.tb]=(b.top - a["offset"+b.wh])+"px";else {b.stepy=-b.stepy;x2("qmfv",a,1);}a.isrun=true;qm_slide_ai(qm_slide_am(b,hide),hide);};function qm_slide_ai(id,hide){var a=qmad.slide["_"+id];if(!a)return;var cy=parseInt(a.obj.style[a.tb]);if(a.drop_subs)a.stepy+=a.accelerator;else {if(hide)a.stepy -=a.accelerator;else a.stepy+=a.accelerator;}if((!hide&&cy+a.stepy<a.top)||(hide&&!a.drop_subs&&cy+a.stepy>a.top-a.obj["offset"+a.wh])||(hide&&a.drop_subs&&cy<a.drop_subs_height)){var bc=2000;if(hide&&a.drop_subs&&!a.drop_subs_disappear&&cy+a.stepy+a.obj["offset"+a.wh]>a.drop_subs_height)bc=a.drop_subs_height-cy+a.stepy;var tc=Math.round(a.top-(cy+a.stepy)+a.offy);if(a.left_right)a.obj.style.clip="rect(auto 2000px 2000px "+tc+"px)";else a.obj.style.clip="rect("+tc+"px 2000px "+bc+"px auto)";a.obj.style[a.tb]=Math.round(cy+a.stepy)+"px";a.timer=setTimeout("qm_slide_ai("+id+","+hide+")",10);}else {a.obj.style[a.tb]=a.top+"px";a.obj.style.clip="rect(0 auto auto auto)";if(a.obj.style.removeAttribute)a.obj.style.removeAttribute("clip");else a.obj.style.clip="auto";if(!window.showHelp)a.obj.style.clip="";if(hide){x2("qmfv",a.obj);if(qmad.br_ie&&!a.obj.style.visibility){a.obj.style.visibility="hidden";a.obj.style.visibility="";}}else {var ah;if(ah=a.obj.hasselectfix){ah.style.top=a.obj.style.top;ah.style.left=a.obj.style.left;}}qmad.slide["_"+id]=null;a.obj.isrun=false;}};function qm_slide_am(obj,hide){var k;for(k in qmad.slide){if(qmad.slide[k]&&obj.obj==qmad.slide[k].obj){if(qmad.slide[k].timer){clearTimeout(qmad.slide[k].timer);qmad.slide[k].timer=null;}obj.top=qmad.slide[k].top;qmad.slide[k].obj.isrun=false;qmad.slide[k]=null;}}var i=0;while(qmad.slide["_"+i])i++;qmad.slide["_"+i]=obj;return i;}/* ]]> */</script>

<!-- Add-On Code: IE Over Select Fix -->
<script type="text/javascript">/* <![CDATA[ */if(window.showHelp&&!window.XMLHttpRequest){if(qmad.bvis.indexOf("qm_over_select(b.cdiv);")==-1){qmad.bvis+="qm_over_select(b.cdiv);";qmad.bhide+="qm_over_select(a,1);";}};function qm_over_select(a,hide){var z;if((z=window.qmv)&&(z=z.addons)&&(z=z.over_select)&&!z["on"+qm_index(a)])return;if(!a.settingsid){var v=a;while(!qm_a(v))v=v[qp];a.settingsid=v.id;}var ss=qmad[a.settingsid];if(!ss)return;if(!ss.overselects_active)return;if(!hide&&!a.hasselectfix){var f=document.createElement("IFRAME");f.style.position="absolute";f.style.filter="alpha(opacity=0)";f.src="javascript:false;";f=a.parentNode.appendChild(f);f.frameborder=0;a.hasselectfix=f;}var b=a.hasselectfix;if(b){if(hide)b.style.display="none";else {var oxy=0;if(a.hasshadow&&a.hasshadow.style.visibility=="inherit")oxy=parseInt(ss.shadow_offset);if(!oxy)oxy=0;b.style.width=a.offsetWidth+oxy;b.style.height=a.offsetHeight+oxy;b.style.top=a.style.top;b.style.left=a.style.left;b.style.margin=a.currentStyle.margin;b.style.display="block";}}}/* ]]> */</script>

<!-- Add-On Code: Follow Pointer -->
<script type="text/javascript">/* <![CDATA[ */qmad.br_safari=navigator.userAgent.indexOf("afari")+1;qmad.br_navigator=navigator.userAgent.indexOf("Netscape")+1;qmad.br_version=parseFloat(navigator.vendorSub);qmad.br_oldnav=qmad.br_navigator&&qmad.br_version<7.1;if(!qmad.pointer&&!qmad.br_oldnav){qmad.pointer=new Object();if(window.attachEvent)window.attachEvent("onload",qm_pointer_init);else  if(window.addEventListener)window.addEventListener("load",qm_pointer_init,1);if(window.attachEvent)document.attachEvent("onmouseover",qm_pointer_hide);else  if(window.addEventListener)document.addEventListener("mouseover",qm_pointer_hide,false);};function qm_pointer_init(e,spec){var q=qmad.pointer;var a;for(i=0;i<10;i++){if(!(a=document.getElementById("qm"+i))||(spec&&spec!=i))continue;var ss=qmad[a.id];if(ss&&(ss.pointer_main_image||ss.pointer_sub_image)){q.mimg=ss.pointer_main_image;q.mimgw=ss.pointer_main_image_width;if(!q.mimgw)q.mimgw=0;q.mimgh=ss.pointer_main_image_height;if(!q.mimgh)q.mimgh=0;q.malign=ss.pointer_main_align;if(!q.malign)q.malign="top-or-left";q.mox=ss.pointer_main_off_x;if(!q.mox)q.mox=0;q.moy=ss.pointer_main_off_y;if(!q.moy)q.moy=0;q.simg=ss.pointer_sub_image;q.simgw=ss.pointer_sub_image_width;if(!q.mimgw)q.simgw=0;q.simgh=ss.pointer_sub_image_height;if(!q.mimgh)q.mimgh=0;q.salign=ss.pointer_sub_align;if(!q.salign)q.salign="top-or-left";q.sox=ss.pointer_sub_off_x;if(!q.sox)q.sox=0;q.soy=ss.pointer_sub_off_y;if(!q.soy)q.soy=0;qm_pointer_add(a,"m");var at=a.getElementsByTagName("DIV");for(var i=0;i<at.length;i++)qm_pointer_add(at[i],"s");}i++;}};function qm_pointer_add(a,type){var q=qmad.pointer;var img=q[type+"img"];if(a.attachEvent)a.attachEvent("onmousemove",qm_pointer_move);else  if(a.addEventListener)a.addEventListener("mousemove",qm_pointer_move,1);if(!img)return;var sp=document.createElement("SPAN");sp.style.position="absolute";sp.style.visibility="hidden";sp.style.zIndex=9;if(a.ch)sp.style.top=(-q[type+"imgh"]+q[type+"oy"])+"px";else sp.style.left=(-q[type+"imgw"]+q[type+"ox"])+"px";if(q[type+"align"]=="bottom-or-right")sp.pointerbr=1;sp.pointerox=q[type+"ox"];sp.pointeroy=q[type+"oy"];sp.innerHTML='<img style="position:absolute;" src="'+img+'"  width='+q[type+"imgw"]+' height='+q[type+"imgh"]+'>';sp=a.appendChild(sp);a.haspointer=sp;};function qm_pointer_hide(){var q=qmad.pointer;if(q.lastm&&a!=q.lastm){q.lastm.style.visibility="hidden";q.lastm=null;}};function qm_pointer_move(e){var q=qmad.pointer;e=e||window.event;targ=e.srcElement||e.target;while(targ.tagName!="DIV")targ=targ[qp];if(q.lastm&&a!=q.lastm){q.lastm.style.visibility="hidden";q.lastm=null;}var a;if(a=targ.haspointer){if(a.style.visibility!="inherit")a.style.visibility="inherit";var x=e.clientX;var y=e.clientY;var oxy=qm_pointer_get_offsets(targ);var sxy=qm_get_doc_scrollxy();if(targ.ch){a.style.left=(x-oxy[0]+sxy[0]+a.pointerox)+"px";if(a.pointerbr)a.style.top=(targ.offsetHeight+a.pointeroy)+"px";}else {a.style.top=(y-oxy[1]+sxy[1]+a.pointeroy)+"px";if(a.pointerbr)a.style.left=(targ.offsetWidth+a.pointerox)+"px";}q.lastm=a;}};function qm_get_doc_scrollxy(){var sy=0;var sx=0;if((sd=document.documentElement)&&(sd=sd.scrollTop))sy=sd;else  if(sd=document.body.scrollTop)sy=sd;if((sd=document.documentElement)&&(sd=sd.scrollLeft))sx=sd;else  if(sd=document.body.scrollLeft)sx=sd;return new Array(sx,sy);};function qm_pointer_get_offsets(a){var x=0;var y=0;while(a){x+=a.offsetLeft;y+=a.offsetTop;a=a.offsetParent;}return new Array(x,y);}/* ]]> */</script>

</head>

<body style="margin:40px;background-color:rgb(0, 0, 0);"><noscript><span style="font-size:13px;font-family:arial;"><span style="color:#dd3300">Warning!</span>&nbsp&nbsp; QuickMenu may have been blocked by IE-SP2's active content option. This browser feature blocks JavaScript from running locally on your computer.<br><br>This warning will not display once the menu is on-line.  To enable the menu locally, click the yellow bar above, and select <span style="color:#0033dd;">"Allow Blocked Content"</span>.<br><br>To permanently enable active content locally...<div style="padding:0px 0px 30px 10px;color:#0033dd;"><br>1: Select 'Tools' --> 'Internet Options' from the IE menu.<br>2: Click the 'Advanced' tab.<br>3: Check the 2nd option under 'Security' in the tree (Allow active content to run in files on my computer.)</div></span></noscript>

<!--Open Visual Interface Button-->
<a style="font-size:13px;color:#444444;font-family:arial;text-decoration:none;display:block;margin-bottom:25px;" id="qmv_open_visual_interface" href="javascript:if (qm_s3){window.name='qm_open';window.location = window.location.href;}else{var qmnw = window.open(window.location.href,'qm_open','scrollbars=no,location=no,status=yes,menu=no,toolbar=no,resizable=yes');if (window.focus) {qmnw.focus()}}"><span style="color:#dd3300;">[+]</span> Open Visual Interface</a>


<!-- QuickMenu Structure [Menu 0] -->
<ul id="qm0" class="qmmc">

    <li><a href="javascript:void(0)" title="Retour vers la page principale">Accueil</a></li>
    <li><a class="qmparent" href="javascript:void(0)" title="Sous-menu de présentation de la société">Societe</a>

        <ul>
        <li><a href="javascript:void(0)" title="Salons, passages télévisés, revue de presse ...">Actualités</a></li>
        <li><a href="javascript:void(0)" title="Historique de la société, Chiffres d'affaire, personnels ...">Historique</a></li>
        <li><a href="javascript:void(0)">Organigramme VRP</a></li>
        <li><a href="javascript:void(0)" title="Les différentes implantations de nos usines et les plans d'accès">Implantations &amp; plans</a></li>
        <li><a href="javascript:void(0)" title="Présentation de notre réseau">Réseau de distributions</a></li>
        <li><a href="javascript:void(0)" title="Listes des marques principales">Nos principales marques</a></li>
        </ul></li>

    <li><a class="qmparent" href="javascript:void(0);">Concepts</a>

        <ul>
        <li><a href="javascript:void(0);">Atelier du peintre</a></li>
        <li><a href="javascript:void(0);">Atelier du plaquiste</a></li>
        </ul></li>

    <li><a class="qmparent" href="javascript:void(0)" title="Présentation de notre actualité et de nos prestations externes">Marketing</a>

        <ul>
        <li><a href="javascript:void(0)">Linéaires</a></li>
        <li><a href="javascript:void(0)">Valisettes DECO, displays</a></li>
        <li><a href="javascript:void(0)">Catalogues, nuanciers, CD</a></li>
        <li><a href="javascript:void(0)">Présentatoirs de comptoir</a></li>
        <li><a href="javascript:void(0)">ILV DECOPORTE, vraie porte</a></li>
        <li><a href="javascript:void(0);">Box palette isolation, masques ...</a></li>
        <li><a href="javascript:void(0)">Echantillonneurs isolation, classeur, panneau</a></li>
        </ul></li>

    <li><a class="qmparent" href="javascript:void(0)" title="Zone de téléchargement des FDS, spécificités produits ...">Telechargement</a>

        <ul>
        <li><a href="javascript:void(0);">Catalogues</a></li>
        <li><a href="javascript:void(0)">Fiches techniques</a></li>
        <li><a href="javascript:void(0)">Fiches de sécurité</a></li>
        <li><a href="javascript:void(0);">Modes d'emploi</a></li>
        <li><a href="javascript:void(0);">Notices de montage</a></li>
        <li><a href="javascript:void(0);">Pièces détachées</a></li>
        </ul></li>

    <li><a href="javascript:void(0);" title="Voici quelques vidéos produits">Videos produits</a></li>
    <li><a href="javascript:void(0);" title="Zone de contact">Nous contacter</a></li>
<li class="qmclear">&nbsp;</li></ul>

<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click ('all', 'main' or 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,false,0,500,'lev2',false,false,false,true);</script>

</body>
</html>


Cette discussion est classée dans : menu, title, accueil, opacity, marketing


Répondre à ce message

Sujets en rapport avec ce message

clik sur onglet??? [ par kanabinch ] Bonjour,mon pb. cette fois ci est  que : imaginons que j'ai un menu sur la gauche (fait en javascript) et que dans un des onglets il y en a un qui s'a Probleme de compatibilité avec IE (jquery) [ par jarlaath ] Bonjour,Voila je developpe mon site et j'y ai integrer du javascript. Tout marche bien sous firefox et google chrome mais sous IE, deux de mes codes e Menu [ par Acidkepler ] Boujour, je débute en html et j'aimerais savoir comment je pourrais faire ceci:1.Accueil(cliquable vers la page accueil)2.Jeux(Quand je clique dessus Afficher un texte ou menu depuis un menu DHTML [ par 1ouf ] Bonjour,Je sais que mon titre de sujet n'est pas clair mais je sais pas comment le dire, ni où chercher.Voilà alors en faite je souhaite créer un menu aide pour menu [ par piou88 ] Bonjour les gens! je ne savais pas trop ou mettre cette question donc j'essaye ici, enfin bref... Je voulai savoir comment faut-il fai Menu déroulant avec opacité... [ par girondex ] J' ai une belle image en fond sur ma page et je désire avoir un menu qui déroule en vertical mais qui soit un peu transparent...How can i do ?Une pers menu déroulant avec photo exemple... [ par girondex ] lorsque la souris arrive sur "menu" le calque transparent déroule...How can i d problème mineur de menu javascript [ par ShadoWkou ] En effet j'ai un problèem avec ce menu que je n'arrive pas à faire qu'il s'ouvre au click et qu'il se ferme automatiquement. Bon bien sûr Recherche script sinple ( pour vous lol ) [ par dededede4 ] Bon, je echerche un script que je met sur tt mes page pour faire un menu (  www.serviceadede.be ) qui ne se vois pas...Je veux pas de barre propose de Menu Et frame compatible??? [ par Marcita ] voila j'ai choisi pour mon site ce menu (http://www.javascriptfr.com/code.aspx?ID=33216) mais je l'ai mis dans une frame ? Est t'il possible de parame


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,874 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales