Sous-menu sans javasript : comment ?

Ricardo · 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

calimo · 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 · Message par **Xanthor** » 09 avr. 2004, 16:36

Regarde ici

calimo · 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

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à

Donc à utiliser raisonnablement

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

Aucun problème sous Safari !

Thomas · 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"

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

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

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

Ricardo · 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"

En fait, ça fait un certain effet.

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

Ricardo a écrit :En effet, c'est vraiment du menu "clignotant"
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 · 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

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>

SIBELIUS · 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) ?

Ricardo · 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.

SIBELIUS · 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 ?

Ricardo · 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

Geckozone

Sous-menu sans javasript : comment ?

Sous-menu sans javasript : comment ?

Qui est en ligne ?