[Résolu]Un menu déroulant en CSS et XHTM (vertical) : position

Bonjour,

J'ai un over-blog, et je viens d'y mettre un menu défilant, grâce à ce tuto.
J'y ai mis la partie html, et le javascript pour l'instant.

Mais je n'ai pas mis le css, car ça déformait un peu tout (ma couleur de fond disparaissait par exemple), et que je n'arrivais pas bien à régler.

Là, j'aimerais :
- aligner le contenu des menus à gauche, pour l'instant, c'est centré..
- réhausser un peu le menu, pour qu'il touche l'entête.
- et si c'est possible , lorsqu'on clique sur un menu ouvert, que celui se referme. J'ai déjà vu ça sur d'autres sites.

Merci d'avance,
Helioss.

>> Helioss Art
Modifié par Helioss (25 Jul 2007 - 17:37)

Bonjour,

Je pense qu'il faut que tu fasses les modifications sur le menu dans ta feuille de style que tu as deja pour ton site.

quand tu as rajouté celui du tableau il y a du avoir un conflit entre les deux.

Pour que quand tu cliques le menu se referme, il faut rajouter une variable dans ton javascript

pour le javascript je pense que tu as utilisé le code du tuto donc :

<script type="text/javascript">
<!--
window.onload=montre;
var menu=0;
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) {
		if(menu==id){
			d.style.display='none';
		}
		else{
			d.style.display='block';
		}
		menu=id;
	}
}
//-->
</script>

Merci Halindel pour le script!
Ca marche .

Bon pour le CSS, je vais voir ça alors .

oups il bug change cela

if(menu==id){
			d.style.display='none';
			menu=0;
		}
		else{
			d.style.display='block';
			menu=id;
		}

Sinon tu pourras plus reouvrire le menu que tu viens de fermer sans en ouvrire un autre ces qui est leger mais on sait jamais

edit : pour ton menu essai de modifier le css sur <dl id="menu"> donc essai peut etre

dl#menu{
float: left
}

Modifié par Halindel (25 Jul 2007 - 16:28)

Pour le code javascript, je viens de changer, mais le menu déroulant a disparu.

Ce que j'ai rentré:

<script type="text/javascript">
<!--
window.onload=montre;
var menu=0;
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) {
                if(menu==id){
                        d.style.display='none';
                        menu=0;
                }
                else{
                        d.style.display='block';
                        menu=id;
                }
}
//-->
</script>

Pour le css, je n'ai pas de changement

il manque une } pour fermer un if

<script type="text/javascript">

<!--
window.onload=montre;
var menu=0;
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) {
               if(menu==id){
                        d.style.display='none';
                       menu=0;
                }
                else{
                        d.style.display='block';
                        menu=id;
                }
}
}
//-->
</script>

Modifié par Halindel (25 Jul 2007 - 16:46)

ah ^^!
Pour le javascript, c'est bon alors
Merci encore.

Après, je comprends toujours pas pourquoi le contenu est décalé.

la balise <dd> semble avoir une marge à gauche par défaut, il faut donc que tu l'enlève via le css.
Par exemple:

#menu dd {
   margin:0;
}

EDIT: dans ton code tu as aussi plein de <li> vides dans ton menu je sais pas à quoi ils servent mais ils provoquent un espacement vertical.
Modifié par Necromantik (25 Jul 2007 - 17:21)

Merci Necromantik!

Pour les espaces verticaux, normalement là c'est bon. J'ai fait plusieurs essais juste avant, et ça déformait mon menu à souhait .

Ah et pour le margin-top, c'est bon j'ai trouvé, merci !
Piouf, résolu.