Sujet Précédent Sujet Suivant

Créer un sous menu déroulant

Résolu/Fermé
tatouf11 Messages postés 4 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 17 octobre 2012 - 15 oct. 2012 à 22:21
tatouf11 Messages postés 4 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 17 octobre 2012 - 17 oct. 2012 à 23:54
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 70 Date d'inscription vendredi 11 avril 2008 Statut Membre Dernière intervention 27 mai 2014 2
17 oct. 2012 à 10:03
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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
17 oct. 2012 à 12:02
on fait quoi de tout ce code ... ?
0
tatouf11 Messages postés 4 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 17 octobre 2012
Modifié par tatouf11 le 17/10/2012 à 18:30
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 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
17 oct. 2012 à 20:59
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 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
17 oct. 2012 à 21:02
:)
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
17 oct. 2012 à 21:03
Salut bg ;-)
0
bg62 Messages postés 23652 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 29 octobre 2024 2 384
17 oct. 2012 à 21:47
salut ;)
de retour ???
0
tatouf11 Messages postés 4 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 17 octobre 2012
17 oct. 2012 à 22:00
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 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
17 oct. 2012 à 22:33
le point ???

je ne vois pas ce que tu veux dire ?
0

Discussions similaires

Comment créer un compte torrent ?
Gotdann2003 -
Redbart -

1 réponse
créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses