Sous-menu sans javasript : comment ?

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 !

Modérateur : Asumbaa

Ricardo
Lézard vert
Messages : 164
Enregistré le : 25 sept. 2003, 00:15

Sous-menu sans javasript : comment ?

Message par Ricardo » 09 avr. 2004, 16:18

Tt est ds le titre.
Comment ouvrir un sous menu au passage de la souris ?
Avec hover, je suppose mais comment écrire ça ?
S'il y a une page qui en traite, je suis preneur.
Merci à ts
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.

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 09 avr. 2004, 16:29

En CSS ? En jouant sur le z-index ? Il serait petit par défaut (genre 1), le reste de la page plus grand (2), et quand tu passe la souris dessus, le bloc passe en z-index:3 et du coup ce qui était caché par le contenu apparaît :?

Ça me semble un peu artisanal, je pense que c'est justement le but de Javascript de faire ce genre de choses :?

Xanthor
Lézard à collerette
Messages : 280
Enregistré le : 29 juil. 2003, 18:36

Message par Xanthor » 09 avr. 2004, 16:36

Regarde ici :wink:
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a1) Gecko/20061204 SeaMonkey/1.5a

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 09 avr. 2004, 16:41

C'est en effet un peu plus simple que ce que je proposais ;-) Et plus propre aussi :D

EDIT : il ne faut tout de même pas perdre de vue que la majorité des navigateurs n'afficheront pas ce menu :?
Je viens même de tester sous Opera, et c'est pas parfait, loin de là :lol:

Donc à utiliser raisonnablement :wink:

Kropotkine
Iguane
Messages : 693
Enregistré le : 20 févr. 2004, 20:46

Message par Kropotkine » 10 avr. 2004, 01:24

Aucun problème sous Safari !
Xpower ! Image
Vive les Mac, MacOS X Panther et Safari, les logiciels libres et les mises à jour !

Thomas
Varan
Messages : 1907
Enregistré le : 07 janv. 2004, 17:29

Message par Thomas » 10 avr. 2004, 09:05

http://standblog.org/blog/2004/02/11/93 ... ccessibles

Si ça marche pas (a cause de sa page sur la LEN), une fois sur l'index, va dans le menu de droite et cherche "février 2004" ret sur la page qui s'fafiche cherche le titre "Des menus déroulants accessibles" ;)
Anciennement Toto.

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 10 avr. 2004, 11:54

C'est surtout du javascript ce que tu nous cites Toto :wink:

J'ai essayé de faire un menu en CSS pur, et malheureusement il y a pas mal de bugs d'affichage :?
Regardez à droite de la page http://cui.unige.ch/~robin0/mod%E8le.html, passez votre souris sur le menu et admirez les espaces qui apparaissent, les puces qui dansent et se déplacent :?

Pour le dernier je soupçonne un bug d'affichage de Moz, par contre le premier ça doit être moi, mais je ne vois pas trop :?

Thomas
Varan
Messages : 1907
Enregistré le : 07 janv. 2004, 17:29

Message par Thomas » 10 avr. 2004, 11:57

Désolé

Sinon le blog de Bobe n'utilise pas de JS il me semble (puis je sais pas si il ets pas réticent à ce qu'on le lui prennent, je vous le donne à titre d'exemple) : http://webnaute.net
Anciennement Toto.

Ricardo
Lézard vert
Messages : 164
Enregistré le : 25 sept. 2003, 00:15

Message par Ricardo » 10 avr. 2004, 15:55

calimo a écrit : J'ai essayé de faire un menu en CSS pur, et malheureusement il y a pas mal de bugs d'affichage :?
En effet, c'est vraiment du menu "clignotant" :wink:
En fait, ça fait un certain effet.
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.

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 10 avr. 2004, 16:47

Ricardo a écrit :En effet, c'est vraiment du menu "clignotant" :wink:
En fait, ça fait un certain effet.
Mais un effet non désiré (et non désirable :? ) Du coup je me demande si je ne vais pas revenir en arrière :?

Ricardo
Lézard vert
Messages : 164
Enregistré le : 25 sept. 2003, 00:15

Message par Ricardo » 12 avr. 2004, 12:20

Le titre n'est plus valable car là, il s'agit d'un menu déroulant avec une tte petite dose de JS.
Pompé à droite et à gauche et légèrement modifié, il reste qq chose que je ne sais pas maîtriser :
Quand on sort du sous-menu par la droite, ce dernier reste affiché et il y a chevauchement si on ouvre un second sous-menu.
Est-ce qu'il faudrait placer le tout ds un cadre :?:
Est-ce qu'il existe une commande qui indique qu'en dehors de tel cadre la fonction doit changer :?:
L'affichage est loin d'être parfait sous IE mais ça colle sous MFF.
Pour l'habillage, il n'en est pas question ici, ça je sais faire :wink:
Merci de votre aide.
Je vs joins tt le code avec CSS et JS :

<!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>

<title>menuderoulant</title>

<style>
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 {
/*clear: both;*//* pour obliger le retour à la ligne des menus */
position:relative;
/*margin-top: 10em; *//*ecartement entre les menus*/
width: 15%; /*taille des boutons menus*/
height: 10%; /* pas d'incidence */
top:5%; /* """" */
left:1%; /*position par rapport à la gauche*/
border: 3px solid #FF0000;
text-align: center;
font-size: 12px;
font-weight: bold;
color:#6600FF; /*violet*/
}
#smenu1, #smenu2, #smenu3 {
position:absolute;
left:21%;
display: none; /* par défaut sous-menus pas affichés */
width: 20%;
height: 45%;
border:3px solid #FF9900;
font-size: 8px;
}
#smenu1 {
top:4%;
}
#smenu2{
top:13%;
}
#smenu3 {
top:22%;
}
</style>

<script>
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";
} }
</script>

</head>

<body>

<ul>
<li class="menu" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</li>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('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 class="menu" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</li>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('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 class="menu" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</li>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="">SousMenu 1 de 3</a></li>
<li><a href="">SousMenu 2 de 3</a></li>
</ul>

</ul>

</body>
</html>
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.

SIBELIUS
Lézard vert
Messages : 146
Enregistré le : 09 sept. 2003, 23:21

Message par SIBELIUS » 12 avr. 2004, 17:05

Tiens Ricardo, j'ai déjà vu ce menu quelque part ! ;)

http://www.alsacreations.com/articles/deroulant/
Est-ce qu'il faudrait placer le tout ds un cadre
Pourquoi le placer dans un cadre (frame) ? :?
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com

Ricardo
Lézard vert
Messages : 164
Enregistré le : 25 sept. 2003, 00:15

Message par Ricardo » 12 avr. 2004, 17:18

Oui, je ne l'ai pas caché et j'ai bien précisé que j'ai pompé.
Toutefois, le résultat ne me plait pas tot à fait et c'est pour ça que je demande conseil, humblement.
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.

SIBELIUS
Lézard vert
Messages : 146
Enregistré le : 09 sept. 2003, 23:21

Message par SIBELIUS » 12 avr. 2004, 17:25

Y'a pas de mal pour le pompage ... bien que tu aurais pu laisser le commentaire (/* CSS issu des tutoriels www.alsacreations.com/articles */). M'enfin, j'ai pas déposé de copyright sur les CSS non-plus ! :)

Pour ton problème de survol, c'est un problème inhérent à mozilla semble-t-il car le code est standard et je n'ai toujours pas trouvé de solution.

Sinon, chez moi le résultat est identique sur tous les navigateurs : http://www.alsacreations.com/articles/d ... smenu2.htm
Qu'est-ce qui cloche chez toi ?
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com

Ricardo
Lézard vert
Messages : 164
Enregistré le : 25 sept. 2003, 00:15

Message par Ricardo » 12 avr. 2004, 17:36

Je n'en suis qu'aux essais et de ttes façons, il est question que je mette en bonne place ts les liens qui m'ont servis avec les remerciements accolés .
J'ai un minimum de savoir-vivre et je n'oublie jamais les aides :)
Pour la suite, je vais étudier ça ce soir ou demain et je vais recharger entièrement ton code.
Je te dirai demain ce qui ne colle pas chez moi.
Bonnes Pâques :wink:
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.

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 3 invités