[resolu (merci)] probleme sur un clam shell menu

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [resolu (merci)] probleme sur un clam shell menu

niroto

Salut tous!

J'ai changé le type de menu javascript que j'avais fait et j'ai maintenant un menu de type Clam shell menu.

J'ai deux questions à poser aux javascripteurs professionnels que sont certains ici!

En effet je me retrouve avec des titres de menu dont les bordures ne sont pas alignés sur la droite, ceci est le premier problème, uniquement visuel, je l'accorde.

Mais le deuxieme probleme est plus important: Je voudrais que mon menu se déroule entièrement au chargement de la page chez les utilisateurs n'autorisant pas le javascript. Je l'avais fait sur mon ancien menu (avec javascript=montre() etc.) mais là, je ne vois pas trop...

Pouvez vous m'aider sur ces deux problèmes s'il vous plait?

Merci

Je joint le code html:

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Association SEA, l'assoc' des étudiants en AES à Rennes 2...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="css2.css" />
<div id="menu">

 <img class="logo" src="images/logo.gif" alt="logo uhb"/> 

<a href="index.html" target="content">Accueil</a> 
<a class="menuHead" href="javascript:toggleClamShellMenu('menu1')">> L'equipe</a> 

<a class="menuOption" href="#">Le bureau</a> 
<a class="menuOption" href="#" >Les chargés de mission</a> 
<a class="menuOption" href="#" >L'équipe web</a> 
<a class="menuOption" href="#" >Statut de l'asso</a> 


<a class="menuHead" href="javascript:toggleClamShellMenu('menu2')">> La fac</a> 

<a class="menuOption" href="#" >Les cours</a> 
<a class="menuOption" href="#" >Les professeurs</a> 
<a class="menuOption" href="#" >L'administration</a> 
<a class="menuOption" href="#" >Visite guidée</a> 



<a class="menuHead" href="javascript:toggleClamShellMenu('menu3')">> Articles</a> 

<a class="menuOption" href="#" >Les interviews</a> 
<a class="menuOption" href="#" >L'actualité commentée</a> 
<a class="menuOption" href="#" >Vos publications</a> 
<a class="menuOption" href="#" >Les archives News</a> 

<a class="menuHead" href="javascript:toggleClamShellMenu('menu4')">> Projets</a> 

<a class="menuOption" href="#" >Nos ambitions</a> 
<a class="menuOption" href="#" >Les soirées</a> 
<a class="menuOption" href="#" >Les sorties</a> 
<a class="menuOption" href="#" >Les conférences</a> 
<a class="menuOption" href="#" >1er avril</a> 
<a class="menuOption" href="#" >Vos propositions</a> 


<a class="menuHead" href="javascript:toggleClamShellMenu('menu5')">> Photos</a> 

<a class="menuOption" href="#" >Gallerie</a> 
<a class="menuOption" href="#" >Trombinoscope</a> 


</div>

et le code css à nommer css2.css

Citation :

#menu {
display:block;
float: left;
width: 100px; height:100%;
cursor:default;
border-right:1px black solid;
padding-right:5px; padding-left:5px;
border-bottom:1px black solid;
border-top:1px black solid;
background-color:#fec85c;
font-size:12px;
padding-bottom:15px;
}

.menuHead {
color: black;
font-size: 12px;
font-family: verdana;
font-weight: bold;
text-decoration: none;
border: 1px solid black;
padding:5px;
margin:5px;
margin-right:5px;
line-height:30px;
background:#feedcf;
width:100px;
text-align:right;
}

.menuOption {
color: black;
font-size: 10px;
font-family: verdana;
margin-left: 10px;
margin-bottom:5px;

}

#menu1 {
display: none
}
#menu2 {
display: none
}
#menu3 {
display: none
}
#menu4 {
display: none;}
#menu5 {
display: none;}

voila!

Message édité par niroto le 17-07-2005 à 23:01:25

Publicité

plainsofpain

Pingouino's lover

C't'a dire qu'on est pas le forum de soutien de ce type de menu, et que sans le js bah ...

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

niroto

d'accord, je comprends...
Mais je ne demande pas mieux que de n'utiliser que du CSS...
Mais comment faire alors un menu tout en CSS comme cela:

Menu1
sous menu1
sous menu1
Menu2
sous menu2
sous menu2
Menu3
sous menu3
sous menu3

(bon, ça tout simple)
mais qui fait ça:

quand on clique sur un des "MenuX" cela fait apparaitre les sous menu correspondants, et pour les fermer il faut recliquer sur le MenuX? parce que au départ j'avais suivi le menu alsacréations: http://css.alsacreations.com/modelesmenus/vd1.htm

debarquement

You lose

Quand tu parles de Clam Shell Menu c'est bien ces trucs là?

Si oui, pas vraiment faisable sans JS (très peu utilisable en CSS:hover)

---------------
I Was Here

Lund

Bah à la limite si tu veux les afficher pour ceux qui n'ont pas le javascript d'activé, tu les affiche tous par défaut, et ensuite au chargement de la page, tu masque ceux que tu veux avec javascript.

niroto

Oui merci Lund, c'est exactement ce que je veux faire...

Comment est-ce posible alors: je pense que je dois enlever dans le css: display:none... et mettre dans la balise head un truc javascript mais je ne sais pas quoi exactement...

niroto

pour debarquement: d'accord merci de ta confirmation. Donc je suis bien obligé de faire ça avec javascript, n'en déplaise à beaucoup de gens!!

Lund

<body onLoad="fonctionjavascript()">
et puis ta fonctionjavascript() les masquera (document.getElementById('...').style.display = 'none').

Et oui, il faut que tu enlève ton attribut css display:none;.

niroto

Alors...
j'ai remplacé <body> par <body onLoad="fonctionjavascript()"> et retiré display:none dans le Css.

Mais je suis désolé je n'ai pas trop compris ta phrase ensuite... parce que là ça ne les cache pas, ce qui prouve bien que j'ai oublié quelquechose!!!

Lund

Ton code c'est toujours le même ? Si oui,

Code :

<script type="text/javascript">
function fonctionjavascript() {
document.getElementById('menu1').style.display = 'none';
}
</script>

Bien sûr, il s'agit d'un exemple et tu dois la modifier pour masquer tous les menus.

Message édité par Lund le 17-07-2005 à 22:30:41

Publicité

niroto

tu vas me prendre pour un idiot mais c'est la première fois que je manipule un script javascript. Je suis désolé de mon ignorance, qui sera amoindrie grâce à toi!

Mais y a t'il un raccourci qui dirait "tous les menu x" au lieu de 'menu1' seulement? ou peut etre dois-je mettre à la suite 'menu1' 'menu2' etc. ?

niroto

parce que là ça marche bien, mais que pour le menu1, normal quoi... !

Lund

Tu peux faire une boucle javascript. Exemple:

Code :

function fonctionjavascript() {
for(i=1;i<=5;i++) {
document.getElementById('menu'+i).style.display = 'none';
}
}

Cette boucle for va commencer par attribuer la valeur 1 à i.

Code :

Ensuite, elle va tenter de masquer le menu qui s'apellera menu1.

Code :

document.getElementById('menu'+i).style.display = 'none'; (où i vaut 1)

Ensuite, elle incrémentera de 1 la variable i.

Code :

Et telle une boucle, elle tentera de masquer le menu2 (1+1).

Code :

document.getElementById('menu'+i).style.display = 'none'; (où i vaut 2)

Ainsi de suite tant que i sera inférieur ou égal à 5 (Le nombre de menus que tu as).

Code :

i<=5

niroto

génial!!
merci Lund, t'es l'meilleur!!

Je copie colle ça dans mes papiers importants!

Lund

Tu peux même l'améliorer pour l'utiliser pour ton menu.
Par exemple si tu as

Code :

<a href="javascript:menu(1)">Menu 1</a>
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
<a href="#">Lien 3</a>
<a href="javascript:menu(2)">Menu 2</a>
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
<a href="#">Lien 3</a>

Tu peux utiliser la fonction précédente en rajoutant une petite ligne ça te permettra d'afficher le menu en question, tout en masquant les autres. (Attention, si tu veux les garder ouverts, ce n'est pas ça qu'il faut faire !)

Code :

function menu(id) {
for(i=1;i<=5;i++) {
document.getElementById('menu'+i).style.display = 'none';
}
document.getElementById('menu'+id).style.display = 'block';
}

(Le 'block' est à voir, ça dépend comme tu veux l'afficher).

Message édité par Lund le 17-07-2005 à 23:06:09

niroto

ouais justement Lund, je ne voulais pas les refermer en ouvrant un autre menu, c'est pourquoi j'ai fait un clamshellmenu. avant j'avais ce type de menu: http://css.alsacreations.com/modelesmenus/vd1.htm

qui revient à ce que tu dis...

FORUM HardWare.fr

Programmation

HTML/CSS

[resolu (merci)] probleme sur un clam shell menu

Sujets relatifs
Afficher une image dans une fiche tout simplement. [Resolu]	problème de validation d'un formulaire
probleme d'affichage furtif	Probleme de proportion height en CSS
Problème de compatibilité IE (pour changer) avec ma feuille CSS	Probleme base access avec vb.net
Problème pour validation w3c validator	Problème d'affichage apostrophes
[résolu] vbs, html et insertion d'image	[VBA] [RESOLU] Selection de données par variables
Plus de sujets relatifs à : [resolu (merci)] probleme sur un clam shell menu

Page générée en 0.071 secondes