Toujours un sous-menu

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Ricardo
Lézard vert
Messages : 164
Inscription : 25 sept. 2003, 00:15

Toujours un sous-menu

Message par Ricardo »

Je recommence un autre fil pour une question simple :
Ds le menu déroulant suivant :

http://ricardo.free.fr/menu/menu.html

On ouvre un sous-menu mais quand on sort du cadre par ailleurs qu’un menu, le premier sous-menu reste affiché.
De ce fait, on peut ouvrir un second sous-menu qui vient se calquer sur le premier.
Comment faire pour que tt sous-menu s’efface sitôt que le curseur sort de son cadre, y-compris par la droite.
Ex. j'ouvre le menu 1, je sors par la droite, je fais le tour du cadre et je viens ouvrir le menu 3. Les deux sont affichés :cry:
Ce programme n’est pas « propre » mais là n’est pas la question.
L’intérêt que je lui trouve c’est sa simplicité avec seulement les deux petites fonctions js suivantes de chez Alsacreation (t'as vu, je l'ai précisé :wink: :

function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} }

function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
http://ricardo.free.fr
PC - P4 2533MHz- CM : Asus P4s8x
Linux Débian ETCH & SID - FireFox 1.5 & Iceweasel 2.0 - KMail

Amitiés ! Ricardo.
Bobe
Iguane
Messages : 742
Inscription : 28 juil. 2003, 21:29

Message par Bobe »

chez moi, le sous menu apparait à coté, mais je ne peux pas déplacer mon curseur dessus avant qu'il disparaisse.

firefox 0.8+
« La vie d’un geek est un combat perpétuel contre l’imperfection »
Ricardo
Lézard vert
Messages : 164
Inscription : 25 sept. 2003, 00:15

Message par Ricardo »

Ok, j'ai compris, tu dois être en résolution 1024. Mets -toi en 800x600 mais je vais rectifier.
http://ricardo.free.fr
PC - P4 2533MHz- CM : Asus P4s8x
Linux Débian ETCH & SID - FireFox 1.5 & Iceweasel 2.0 - KMail

Amitiés ! Ricardo.
Invité

Message par Invité »

La solution la plus simple, c'est encore de se débarrasser du javascript.

Code : Tout sélectionner

<!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" xml:lang="fr"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>menu</title> 
<style type="text/css">
html,body {
background-color:#FF9900;	
}
ul, li {
margin: 1em;	/*ecartement entre les menus*/
padding: 0.5em;	/*hauteur des boutons*/
list-style-type: none;
font-size: 12px;	/*grosseur police sous-menus*/
font-family: verdana, arial, sans-serif;
font-weight:bold;
}
.menu {
position:relative;
width: 15%;		/*taille des boutons menus*/
height: 10%;	/* pas d'incidence */
top:5%;			/* """" */
left:1%;		
border: 3px solid #FF0000;
text-align: center;
font-size: 12px;
font-weight: bold;
color:#6600FF;	/*violet*/
}
.smenu1, .smenu2, .smenu3 {
position:absolute;			
left:19%; 
display: none; /*par d�faut sous-menus pas affich�s */
width: 25%;	
border:3px solid #000000;
font-size: 8px;
}
li:hover>.smenu1, li:hover>.smenu2, li:hover>.smenu3 { display:block; width:200px; left:140px; top:5px }
.smenu1 li, .smenu2 li, .smenu3 li { margin:0; padding:1.5em }
</style>  
</head>

<body>

<ul>
<li class="menu">Menu 1
	<ul class="smenu1">
	<li><a href="">SousMenu 1 de 1</a></li>
	<li><a href="">SousMenu 2 de 1</a></li>
	<li><a href="">SousMenu 3 de 1</a></li>
	</ul></li>

<li class="menu">Menu 2
	<ul class="smenu2">
	<li><a href="">SousMenu 1 de 2</a></li>
	<li><a href="">SousMenu 2 de 2</a></li>
	<li><a href="">SousMenu 3 de 2</a></li>
	<li><a href="">SousMenu 4 de 2</a></li>
	<li><a href="">SousMenu 5 de 2</a></li>
	</ul></li>

<li class="menu">Menu 3
	<ul class="smenu3">
	<li><a href="">SousMenu 1 de 3</a></li>
	<li><a href="">SousMenu 2 de 3</a></li>
	</ul></li>

</ul>
</body></html>
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

Par contre je butte moi-même sur un autre problème. J'essaie de faire un menu en ligne qui contiendrait un sous-menu en colonne. Or il semble que ce ne soit pas possible. Dès que j'introduis un sous-menu, la fin de mon menu en ligne passe en colonne.
Quelqu'un a des idées ?
Invité

Message par Invité »

Oui, t'as tout bon et c'est le plus simple :lol:
Malheureusement, tu as oublié une chose qui a quand m^ son importance :
tout le monde ne "pratique" pas MFF :cry:
Essaie ton code sous IE et tu verras que ce dernier ne reconnait pas 'hover' :x
On ne peut décemment pas oublier 80 % des Internautes (ceux qui ne voient que par IE :P
Dommage, c'était simple mais ça, tt le monde le savait ici :wink:
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

Exact, ça m'est totalement sorti de l'esprit. :)
L'habitude de FF.
Malheureusement en javascript je ne peut pas aider grand monde, je me contente de les copier sur des sites fait pour. Je suppose que sur l'un d'eux on trouvera bien ce menu.
Sinon quelqu'un a essayé d'imbriquer une liste en ligne et une en colonne en CSS ?
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

Je relance le sujet des listes imbriquées parce que je vais réessayer demain, sauf si avec un peu de chance quelqu'un a déjà une solution.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité