> Tous les forums > Forum des Webmasters
 Menu Déroulant Html + Javascript
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
nuloscemoi
  Posté le 27/08/2008 @ 21:22 
Aller en bas de la page 
Petit astucien

Bonsoir,

encore moi!!!

cette fois c'est un soucis avec un menu déroulant quand on clic dessus.

le soucis j'arrive pas à agrandir le block du menu en largeur, et aussi le fait que lorsque la description dans le menu est plus grande que le block(en hauteur) le block s'agrandise automatiquement sans motre sour le menu de dessous.

Voila, je vous joint le code, si quelqu'un peut m'aider!!!

code 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';}
}
//-->

Code CSS:que j'ai eu sur alsacreations

/* padding 20=écartement entre les menus */
dl, dt, dd, ul, li {
margin: 0;
padding: 20;
list-style-type: none;
height: auto;
width: 200px;
}
/* left= écartement du sous menu par rapport à la bordure */
#menu {
/* placement du menu, à modifier selon vos besoins */
margin-right:auto;
top: 0;
left: 5;
height: auto;
width: 200px;
}
dl#menu {
width: 15em;
height: auto;
width: 160px;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;
;
height: 20px;
line-height: 20px;
text-align: left;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
width: 160px;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: left;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

code html:


<td width="189" valign="top" bgcolor="#FFFFFF">
<table border="0" cellspacing="0" cellpadding="0" width="189" id="navigation">

<dl id="menu">

<dt onclick="javascript:montre();"><a href="#">Menujennaz jzkrka kjmhg akr 1</a></dt>

<dt onclick="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>
</ul>
</dd>

<dt onclick="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.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>

<dt onclick="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.1</a></li>
</ul>
</dd>
</dl>


</table>

Merci

Publicité
Malcolm
 Posté le 27/08/2008 à 23:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

regarde dans les styles CSS les #menu dt, #menu dl : width:160px; etc.

Je ne comprends pas ton bout de phrase :

s'agrandise automatiquement sans motre sour le menu de dessous.

qu'est-ce qu'un motre ?

nuloscemoi
 Posté le 28/08/2008 à 13:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour malcolm,

merci pour ta réponse.

je voulez dire sans monter sur le menu de dessous!!

il faut plus que j'écrive le soir aprés 21h00!!lol

Ok je vais essayer ce que tu m'as dit pour le CSS

Merci

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
Hub USB C 6 en 1 UGREEN (1xHDMI 4K, 2xUSB 3.0, 2xUSB C 3.2 10 Gbps, 1xUSB C PD 100W) à 15,39 €
15,39 € 25,99 € -41%
@Amazon
Clavier sans fil Logitech Wireless Desktop K400 Plus avec pavé tactile à 29,99 €
29,99 € 54,99 € -45%
@Amazon
SSD interne M.2 2230 NVMe Western Digital SN770M 2 To (PCIe 4, compatible Steam Deck, Rog Ally) à 146,73 €
146,73 € 180 € -18%
@Amazon Allemagne
Routeur TP-Link Archer AX18 WiFi 6 à 39,99 €
39,99 € 59 € -32%
@Amazon
Adaptateur WiFi 6 USB TP-Link Archer TX20U (1800 Mbps) à 21,99 €
21,99 € 29,90 € -26%
@Amazon
Lot de 3 x Mastic acrylique haute performance SIKA SikaSeal 184 (maçonnerie blanc, 3x300 ml) à 11,19 €
11,19 € 16 € -30%
@Amazon

Sujets relatifs
Target dans menu déroulant "option value=...." html
centrer un menu deroulant horizontal / CSS-HTML
Menu HTML & Javascript fonctionne mal, aide SvP
menu deroulant javascript
Menu déroulant devenu inactif
Menu en Javascript
Association html, css et javascript
menu deroulant vertical
Problème avec menu en javascript à éditer
centrer mon menu deroulant
Plus de sujets relatifs à Menu Déroulant Html + Javascript
 > Tous les forums > Forum Forum des Webmasters