Menu déroulant

Fermé
espace diamant.net Messages postés 14 Date d'inscription samedi 16 juin 2007 Statut Membre Dernière intervention 15 octobre 2008 - 24 juin 2007 à 15:56
espace diamant.net Messages postés 14 Date d'inscription samedi 16 juin 2007 Statut Membre Dernière intervention 15 octobre 2008 - 2 juil. 2008 à 16:19
Bonjour,

Comment créer un menu déroulant horizontal avec Nvu ?
J'ai très peu de connaissances en html/css...

Merci de votre aide ! :)
A voir également:

10 réponses

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
24 juin 2007 à 16:37
SALUT pour un menu deroulant il faut du js
Code html du menu avec js a inserer dans le head de ta page
  <head><script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
  </head>
    <div id="menu">
      <dl>
        <dt onmouseover="javascript:montre();">
          <a href="#" title="Retour à l'accueil">Accueil</a>
        </dt>
      </dl> 
      <dl>
        <dt onmouseover="javascript:montre('smenu1');">

          Menu 1
        </dt>
        <dd id="smenu1">
          <ul>
            <li>
            <a href="#">Sous-Menu 1.1</a></li>
            <li>
            <a href="#">Sous-Menu 1.2</a></li>

            <li>
            <a href="#">Sous-Menu 1.3</a></li>
            <li>
            <a href="#">Sous-Menu 1.4</a></li>
            <li>
            <a href="#">Sous-Menu 1.5</a></li>
            <li>

            <a href="#">Sous-Menu 1.6</a></li>
          </ul>
        </dd>
      </dl>  
      <dl>
        <dt onmouseover="javascript:montre('smenu2');">
          Menu 2
        </dt>
        <dd id="smenu2">

          <ul>
            <li>
            <a href="#">Sous-Menu 2.1</a></li>
            <li>
            <a href="#">Sous-Menu 2.2</a></li>
            <li>
            <a href="#">Sous-Menu 2.3</a></li>

            <li>
            <a href="#">Sous-Menu 2.4</a></li>
          </ul>
        </dd>
      </dl> 
      <dl>
        <dt onmouseover="javascript:montre('smenu3');">
          Menu 3
        </dt>

        <dd id="smenu3">
          <ul>
            <li>
            <a href="#">Sous-Menu 3.1</a></li>
            <li>
            <a href="#">Sous-Menu 3.2</a></li>
            <li>
            <a href="#">Sous-Menu 3.3</a></li>

            <li>
            <a href="#">Sous-Menu 3.4</a></li>
            <li>
            <a href="#">Sous-Menu 3.5</a></li>
          </ul>
        </dd>
      </dl> 
      <dl>

        <dt onmouseover="javascript:montre('smenu4');">
          Menu 4
        </dt>
        <dd id="smenu4">
          <ul>
            <li>
            <a href="#">Sous-Menu 4.1</a></li>
            <li>
            <a href="#">Sous-Menu 4.2</a></li>

            <li>
            <a href="#">Sous-Menu 4.3</a></li>
          </ul>
        </dd>
      </dl> 
    </div>

Css du menu
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
}
#menu dl {
	float: left;
	width: 12em;
	margin: 0 1px;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #ccc;
	border: 1px solid gray;
}
#menu dd {
	border: 1px solid gray;
}
#menu li {
	text-align: center;
	background: #fff;
}
#menu li a, #menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
	background: #eee;
}

a {
	text-decoration: none;
	color: black;
	color: #222;
}
      -

RAD
0
espace diamant.net Messages postés 14 Date d'inscription samedi 16 juin 2007 Statut Membre Dernière intervention 15 octobre 2008
24 juin 2007 à 18:09
Merci beaucoup ! :)
0
espace diamant.net Messages postés 14 Date d'inscription samedi 16 juin 2007 Statut Membre Dernière intervention 15 octobre 2008
24 juin 2007 à 18:10
Et pour faire un menu déroulant horizontal ?
comment fais-t-on ?
0
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 332
24 juin 2007 à 18:18
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
24 juin 2007 à 18:26
Et pour faire un menu déroulant horizontal ?
heuuuu mais il est horizontal!!!!!!!!! :-))

RAD
0
espace diamant.net Messages postés 14 Date d'inscription samedi 16 juin 2007 Statut Membre Dernière intervention 15 octobre 2008
24 juin 2007 à 19:34
Non, la, le menu est à gauche, puis les sous menus se mettent a qauche.
Comment les mettres en haut, à l'horizontal ?
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
24 juin 2007 à 19:57
salut,

je sais pas ce que tu fumes mais je veux la même chose !!!

non sans rire, si tu n'as pas le menu en haut et à l'horizontal c'est que tu as mal copié le code.
regarde là. j'ai juste mis 2 lignes des css en commentaire pour ne pas avoir le menu collé tout en haut de la page.
0
espace diamant.net Messages postés 14 Date d'inscription samedi 16 juin 2007 Statut Membre Dernière intervention 15 octobre 2008
24 juin 2007 à 20:12
Ben moi ca la mets à gauche.
Je vais reregarder.
0
helpus Messages postés 10 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 25 juin 2008 1
20 janv. 2008 à 18:58
bonjour,

Jai placé un menu déroulant horizontal dans une cellue de tableau (une ligne)
mais lorsqu'il se déroule il augmente la hauteur de la ligne et repète l'image de fond de la cellule.

comment faire pour que les sous menus s'affichent en débordant de la cellule et non en augmentant sa hauteur ?

merci de votre aide
0
espace diamant.net Messages postés 14 Date d'inscription samedi 16 juin 2007 Statut Membre Dernière intervention 15 octobre 2008
2 juil. 2008 à 16:19
Lorsque l'on passe la souris sur le menu, il se déroule et il reste déroulé quand on retire la souris.
Ce qui prend de la place sur la page et ne pas très joli.

Comment faire ?
0