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

probleme sur un clam shell menu [resolu (merci)] - HTML/CSS - Programmation

Marsh Posté le 17-07-2005 à 20:36:39    

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">
 
 <p> <img class="logo" src="images/logo.gif" alt="logo uhb"/> </p>
 
 
        <a href="index.html" target="content"><b>Accueil</b></a><br /><br />
  <a class="menuHead" href="javascript:toggleClamShellMenu('menu1')">&gt; L'equipe</a><br />
  <span id="menu1">
   <a class="menuOption" href="#">Le bureau</a><br />
   <a class="menuOption" href="#" >Les chargés de mission</a><br />
   <a class="menuOption" href="#" >L'équipe web</a><br />  
   <a class="menuOption" href="#" >Statut de l'asso</a><br /><br />
  </span>
   
  <a class="menuHead" href="javascript:toggleClamShellMenu('menu2')">&gt; La fac</a><br />
  <span id="menu2">
   <a class="menuOption" href="#" >Les cours</a><br />  
   <a class="menuOption" href="#" >Les professeurs</a><br />  
   <a class="menuOption" href="#" >L'administration</a><br />  
   <a class="menuOption" href="#" >Visite guidée</a><br /><br />
 
  </span>
     
  <a class="menuHead" href="javascript:toggleClamShellMenu('menu3')">&gt; Articles</a><br />  
  <span id="menu3">
   <a class="menuOption" href="#" >Les interviews</a><br />  
   <a class="menuOption" href="#" >L'actualité commentée</a><br />  
   <a class="menuOption" href="#" >Vos publications</a><br />  
   <a class="menuOption" href="#" >Les archives News</a><br />
  </span>
  <a class="menuHead" href="javascript:toggleClamShellMenu('menu4')">&gt; Projets</a><br />  
  <span id="menu4">
   <a class="menuOption" href="#" >Nos ambitions</a><br />  
   <a class="menuOption" href="#" >Les soirées</a><br />  
   <a class="menuOption" href="#" >Les sorties</a><br />  
   <a class="menuOption" href="#" >Les conférences</a><br />
   <a class="menuOption" href="#" >1er avril</a><br />
   <a class="menuOption" href="#" >Vos propositions</a><br />
  </span>
         
  <a class="menuHead" href="javascript:toggleClamShellMenu('menu5')">&gt; Photos</a><br />
  <span id="menu5">
   <a class="menuOption" href="#" >Gallerie</a><br />  
   <a class="menuOption" href="#" >Trombinoscope</a><br />  
   
  </span>
</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
Reply

Marsh Posté le 17-07-2005 à 20:36:39   

Reply

Marsh Posté le 17-07-2005 à 20:41:17    

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


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

Marsh Posté le 17-07-2005 à 20:50:10    

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

Reply

Marsh Posté le 17-07-2005 à 20:53:05    

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
Reply

Marsh Posté le 17-07-2005 à 20:53:24    

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.

Reply

Marsh Posté le 17-07-2005 à 22:09:28    

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

Reply

Marsh Posté le 17-07-2005 à 22:10:59    

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

Reply

Marsh Posté le 17-07-2005 à 22:15:54    

<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;.

Reply

Marsh Posté le 17-07-2005 à 22:23:42    

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

Reply

Marsh Posté le 17-07-2005 à 22:30:19    

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

Code :
  1. <script type="text/javascript">
  2. function fonctionjavascript() {
  3.  document.getElementById('menu1').style.display = 'none';
  4. }
  5. </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
Reply

Marsh Posté le 17-07-2005 à 22:30:19   

Reply

Marsh Posté le 17-07-2005 à 22:41:32    

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. ?

Reply

Marsh Posté le 17-07-2005 à 22:43:16    

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

Reply

Marsh Posté le 17-07-2005 à 22:50:11    

Tu peux faire une boucle javascript. Exemple:

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

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

Code :
  1. i=1

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

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


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

Code :
  1. i++


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

Code :
  1. 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 :
  1. i<=5

Reply

Marsh Posté le 17-07-2005 à 22:57:53    

génial!!
merci Lund, t'es l'meilleur!!
 
Je copie colle ça dans mes papiers importants!

Reply

Marsh Posté le 17-07-2005 à 23:05:12    

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

Code :
  1. <a href="javascript:menu(1)">Menu 1</a>
  2. <span id="menu1">
  3. <a href="#">Lien 1</a>
  4. <a href="#">Lien 2</a>
  5. <a href="#">Lien 3</a>
  6. </span>
  7. <a href="javascript:menu(2)">Menu 2</a>
  8. <span id="menu2">
  9. <a href="#">Lien 1</a>
  10. <a href="#">Lien 2</a>
  11. <a href="#">Lien 3</a>
  12. </span>


 
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 :
  1. function menu(id) {
  2. for(i=1;i<=5;i++) {
  3.  document.getElementById('menu'+i).style.display = 'none';
  4. }
  5. document.getElementById('menu'+id).style.display = 'block';
  6. }


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


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

Marsh Posté le 18-07-2005 à 11:18:56    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed