Créer un sous menu déroulant

Résolu
tatouf11 Messages postés 4 Statut Membre -  
tatouf11 Messages postés 4 Statut Membre -
Bonjour,

Je souhaiterais créer un sous-menu déroulant à partir de plusieurs rubriques à l'horizontal. Lorsqu'on passe le curseur sur l'une de ces rubriques, il faudrait qu'une liste se déroule verticalement avec plusieurs choix. Ceci est une partie de mon projet que je n'arrive pas à gérer, voilà pourquoi je fais appel à votre aide.

Voici le code que j'ai commencé :

<!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.0//EN">
<html>
<head>
<title>Menu</title>

<script language="Javascript" type="text/javascript">
<!-
function showmenu(menu) {
if (menu.style.display == 'none')
menu.style.display = 'block';
else menu.style.display = 'none';
}
//->
</script>

<style type="text/css">
#menu{
list-style-type:none;
margin: 0;
padding:0;
float: left
width: 20%;
border : solid 1px #a3c0d5;
border-bottom: none;
}

#menu li{
margin: 0;
padding: 0;
border-bottom: 1px solid #a3c0d5;
}

#menu a{
text-decoration:none;
color:#5d90b5;
display:block;
padding-left:1.5em;
}

#menu a:hover{
background-color:#e9eefb;
color:#294f79;
}

</style>
</head>
<body><ul><li><a onmouseover="javascript: showmenu(document.getElementById('sousmenu1'));"
style="cursor: pointer;">Menu Principal</a>
<ul id="sousmenu1" style="display: none";>
<li>
<a href="#">Accueil</a>
</li>
<li>
<a href="#">Rubriques</a>
</li>
<li>
<a href="#">Se connecter</a>
</li>
<li>
<a href="#">S'inscrire</a>
</li>
<li>
<a href="#">Nous contacter</a>
</li>
</ul>
</li>
</ul>
</body></html>


A voir également:

3 réponses

Réponse 1 / 3
Aeyrin Messages postés 76 Statut Membre 2
 
salut

regarde sur le site du zero, je crois que c'est ce que tu recherches http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html
0
Réponse 2 / 3
bg62 Messages postés 26231 Date d'inscription   Statut Modérateur Dernière intervention   2 418
 
on fait quoi de tout ce code ... ?
0
tatouf11 Messages postés 4 Statut Membre
 
salut,
je pense que le problème vient de l'utilisation de ma fonction dans le body ou alors des différentes rubriques que j'essaye d'ajouter. Merci
0
Réponse 3 / 3
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
Salut

moi j aurais fais comme ca pour la fonction js !
ca permet de la reutiliser a plusieurs endroits ! 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>
      Menu
    </title>
    <script language="Javascript" type="text/javascript">

    function toggle(element) {
    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
    }

    </script>
    <style type="text/css">
#menu{
    list-style-type:none;
    margin: 0;
    padding:0;
    float: left
    width: 20%;
    border : solid 1px #a3c0d5;
    border-bottom: none;
    }

    #menu li{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #a3c0d5;
    }

    #menu a{
    text-decoration:none;
    color:#5d90b5;
    display:block;
    padding-left:1.5em;
    }

    #menu a:hover{
    background-color:#e9eefb;
    color:#294f79;
    }

    </style>
  </head>
  <body>
    <ul>
      <li>
        <a onmouseover="javascript:toggle('sousmenu1')">Menu Principal</a>
        <ul id="sousmenu1"  style="display: none">
          <li>
            <a href="#">Accueil</a>
          </li>
          <li>
            <a href="#">Rubriques</a>
          </li>
          <li>
            <a href="#">Se connecter</a>
          </li>
          <li>
            <a href="#">S'inscrire</a>
          </li>
          <li>
            <a href="#">Nous contacter</a>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>


a+
0
bg62 Messages postés 26231 Date d'inscription   Statut Modérateur Dernière intervention   2 418
 
:)
0
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
Salut bg ;-)
0
bg62 Messages postés 26231 Date d'inscription   Statut Modérateur Dernière intervention   2 418
 
salut ;)
de retour ???
0
tatouf11 Messages postés 4 Statut Membre
 
je te remercie pour ta réponse. Est ce que tu pourrais néanmoins me préciser le point dans la fonction : (document.getElementById(element).style.display == "none") ? "" : "none";
0
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
le point ???

je ne vois pas ce que tu veux dire ?
0