11548 sujets

JavaScript, DOM et API Web HTML5

Boite déroulante: image survolée comme un lien + affichage du contenu

Bonjour,

je voulais réaliser un div qui s'affiche/se masque via une image cliquable.

voici le code:


HTML:

<div id="reals">
<h2 onclick="toggle('reals')">Menu</h2>
<ul>
    <li><a href="" >sous-menu1</a></li>
    <li><a href="" >sous-menu2</a></li>
</ul>
</div>


avec en option:


<div id="archives" class="minimized">
<h2 onclick="toggle('archives')">Archives</h2>
[...]
</div>


pour masquer automatiquement



Le Javascript:


function toggle(id) {
   if (document.getElementById) {
       var cdiv = document.getElementById(id);
       if (cdiv) {
           if (cdiv.className != 'minimized') cdiv.className = 'minimized';
           else cdiv.className = '';
       }
   }
}




CSS:


#sidebar h2 {
background: #ddd url(/images/min.png) top right no-repeat;
}
#sidebar .minimized h2 {
background: #ddd url(/images/max.png) top right no-repeat;
}
#sidebar .minimized p, #sidebar .minimized ul {
display: none;
}




J'ai deux choses que j'aimerais faire:

1. que l'image se comporte comme une véritable image cliquable, actuellement quand on passe le curseur sur les images, le curseur ne change pas. C'est un détail certes, mais ca montrerais bien la fonction de l'image.

2. que le contenu ne s'affiche pas "d'un coup" quand le div est déroulé? Bref, que le déroulement se fasse de manière fluide, un peu comme les boites déroulantes "hot fuzz" du site http://www.fuzz.fr/ (voir à gauche, en bas de la colonne).


amicalement,
@+
Javatwister a écrit :
ce n'est qu'une idée, mais est-ce que ça correspond en gros à ce que tu recherches?

http://javatwist.imingo.net/menutimer.htm

[code à voir, bien sûr]



ouip, tout à fait^^
par contre, le "retour", quand on replie les sous-menus, ca le fait de manière directe, pas comme à "l'aller" lol.

@+
oui, c'est exprès, histoire de ne pas multiplier les timers;
dis si t'as besoin de précisions, d'une adapt, etc.
[je suis un piètre designer] :mrgreen:
Sujet clos
Aller à