améliorer mon menu dynamique

améliorer mon menu dynamique - HTML/CSS - Programmation

Marsh Posté le 26-10-2005 à 10:02:03    

Bonjour à tous
Je suis débutant dans ce monde qui est la programmation web et je suis en train de réaliser un site internet (personnel donc sans but commercial) et j'ai quelques petits problèmes que j'aimerais bien résoudre.
 
J'ai fait un menu (en fait, je n'ai fait que l'adapter car je n'ai pas encore les capacités d'en créer un par moi même pour l'instant, je ne desespere pas !!) mais il y a quelques détails que je voudrais arranger :  
 
 - j'aimerais que lorsque on clic à coté, le "sous menu" se referme, or ce n'est pas le cas ici, le seul moyen est de passer la souris sur une autre categorie qui elle-meme reste "bloquée" si on ne passe pas sur un autre lien.
 
 - j'aimerais aussi que la barre de menu reste "bloquée", que les categories ne puisse pas se séparer : pour comprendre, réduisez la largeur de votre navigateur jusqu'à ce que la categorie "communiquez" se place sous la categorie "accueil".
 
 - ce menu en javascript et utilisant des calques, je suis obligé de répéter le code dans chacunes de mes pages. or si je veux changer un sous-titre, je dois modifier chaque page, une par une. Quelqu'un aurait il une solution à me proposer (avec un .JS ou .css externe, mais je ne sais pas faire dans ce cas précis.
 
merci d'avance pour votre aide :hello:  
ps : je crois que ce menu est basé sur un exemple de alsacreation

Message cité 1 fois
Message édité par kl14582 le 26-10-2005 à 16:37:59
Reply

Marsh Posté le 26-10-2005 à 10:02:03   

Reply

Marsh Posté le 26-10-2005 à 10:03:40    

j'oubliais : mon menu se trouve ici : http://klsnet.free.fr

Reply

Marsh Posté le 26-10-2005 à 10:14:11    

Bon le code de ton menu est pas trop mal, mais pas vraiment accessible.
 
Sinon essaie d'ajouter un onmouseout="javascript:montre('smenu0');"
 
Normalement ca devrait le cacher. Mais bon c'est plus que pas terrible.
 
sur http://css.alsacreations.com il y a une galerie de menus css+js mieux réalisée.
 
Pour l'histoire de recopier le menu a chaque fois, tu es de toute facon obligé de le faire avec tous les menus existants. la solution serait de faire des inclusions en php, pour plus de renseignements : http://www.asp-php.net/tutorial/asp-php/structure.php
 
Cette page te montrera un exemple de simulation de frames, mais coté serveur (en gros ton menu est dans un fichier, le haut de page dans un autre, le bas dans un autre, et tu t'arranges pour assembler avec php les bouts de fichier, de telle sorte que cela donne une page entière.  
 
Le client aura la même page qu'avant, sauf que de ton coté t'auras à réécrire le menu le haut et le bas de page une seule fois.


---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be
Reply

Marsh Posté le 26-10-2005 à 10:35:56    

jte remerci beaucoup d'avoir consacré quelques minutes pour m'aider !!
 
J'ai regardé dans la galeire d'alsacreation et j'ai retrouvé le menu qui ma servi de base, et il a les memes "petits problemes" que le mien et les autres ne correspondent pas à ce que je veux faire.
 
Je vais me pencher sur ce site (http://www.asp-php.net/tutorial/asp-php/structure.php ) pour essyer de comprendre le fonctionnement, mais a premiere vue, je dois utiliser des pages en .asp ?! Je ne connait pas du tout ce genre de page, donc je vais decouvrir ça, mais ne peut on pas utiliser simplement du php et css pour imbriquer des fichier facon "frame" ??
 
si quelqu'un a une idée pour le probleme d'affichage du menu quand la largeur du navigateur eet trop réduite...

Reply

Marsh Posté le 26-10-2005 à 10:37:16    

asp ou php, je te conseille php pour un site perso, car par exemple un hébergement free ne connait pas asp :)


---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be
Reply

Marsh Posté le 26-10-2005 à 10:43:22    

ok merci, mais j'avais pas encore bien lu le site et en fait, je viens de me rendre compte qu'on était pas obligé d'utiliser de l'asp, juste du php fera l'affaire !!!
autant pour moi...

Reply

Marsh Posté le 26-10-2005 à 14:58:00    

merci Roane, j'ai réussit à régler un de mes probleme avec le onmouseout="javascript:montre('smenu0');"  
Pour le php, je vais m'y pencher ce soir car il va falloir plusieurs heures pour que j'yy arrive je pense !! lol  
Personne d'autres n'a une idée pour mon menu qui se comporte mal quand la fenetre du navigateur est trop étroite ?????

Reply

Marsh Posté le 26-10-2005 à 17:44:07    

kl14582 a écrit :

Bonjour à tous
Je suis débutant dans ce monde qui est la programmation web et je suis en train de réaliser un site internet (personnel donc sans but commercial) et j'ai quelques petits problèmes que j'aimerais bien résoudre.
 
J'ai fait un menu (en fait, je n'ai fait que l'adapter car je n'ai pas encore les capacités d'en créer un par moi même pour l'instant, je ne desespere pas !!) mais il y a quelques détails que je voudrais arranger :  
 
 - j'aimerais que lorsque on clic à coté, le "sous menu" se referme, or ce n'est pas le cas ici, le seul moyen est de passer la souris sur une autre categorie qui elle-meme reste "bloquée" si on ne passe pas sur un autre lien.
 
 - j'aimerais aussi que la barre de menu reste "bloquée", que les categories ne puisse pas se séparer : pour comprendre, réduisez la largeur de votre navigateur jusqu'à ce que la categorie "communiquez" se place sous la categorie "accueil".
 
 - ce menu en javascript et utilisant des calques, je suis obligé de répéter le code dans chacunes de mes pages. or si je veux changer un sous-titre, je dois modifier chaque page, une par une. Quelqu'un aurait il une solution à me proposer (avec un .JS ou .css externe, mais je ne sais pas faire dans ce cas précis.
 
merci d'avance pour votre aide :hello:  
ps : je crois que ce menu est basé sur un exemple de alsacreation


 
 
Ton menu est bien structuré mais tu n'as pas besoin de Javascipt ni de onMouseOver...
Passe à du CSS
 

ul, li {list-style-type: none; margin: 0; padding: 0 15px 0 0;}
#nav {font: 1em "Times"; margin: 1px 0 0 0;}
#nav ul {float: left; width: 1020px; background: #90EE90; border: 1px solid green; padding: 0;}
#nav li {display: inline;}
#nav a {text-decoration: none;}
#nav ul ul {font-size: 1em; border-top: 1px solid green; display: none; border: none;}
#nav ul.l1 li.submenu:hover ul.l2,
#nav ul.l2 li.submenu:hover ul.l3 {display: block;}
#nav ul.l1 li.submenu:hover #body {top: 1.5em;}
#nav li.submenu {background: url(Images/dropmenu.gif) 95% 50% no-repeat;}
 
 
 
<div id="nav">
<ul class="l1">
 <li><a href="#body">blabla</a></li>
 <li class="submenu"><a href="#body">blabla</a>
  <ul class="l2">
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
  </ul>
 </li>
 <li><a href="#body">blabla</a></li>
 <li class="submenu"><a href="#body">blabla</a>
  <ul class="l2">
   <li><a href="#body">blabla</a></li>
   <li class="submenu"><a href="#body">blabla</a>
    <ul class="l3">
     <li><a href="#body">blabla</a></li>
     <li><a href="#body">blabla</a></li>
     <li><a href="#body">blabla</a></li>
     <li><a href="#body">blabla</a></li>
    </ul>
   </li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
  </ul>
 </li>
 <li><a href="#body">blabla</a></li>
</ul>
</div>


 
 
Code CSS presque validé et XHTML Strict.
Les liens de ce menu te permettent d'envoyer ton contenu dans un div dont l'id est body et que tu places en dessous de ton menu.
 
 [:ab614]

Reply

Marsh Posté le 27-10-2005 à 11:04:23    

Merci CNeo, je vais étudier ton code. a premiere vue, l'histoire du "body" serait tres interessante, cela eviterais de répéter mon menu sur chaque page.
Je vais peut être paraître un peu "bête", mais je suis toujours agréablement surpris que des personnes consacrent quelques minutes pour aider des novices dans ce domaine !!! bien les gars, ça fait plaisir...

Reply

Marsh Posté le 27-10-2005 à 11:49:50    

kl14582 > Jsute pour info, ton menu, il faut quand même qu'il soit présent dans les différentes pages de ton site. Quand au #body, il a mis ça pour constituer un menu valide mais qui ne change pas de page. C'est donc un menu de test et non pas un menu de site complet. ;)

Message cité 1 fois
Message édité par omega2 le 27-10-2005 à 11:51:08
Reply

Marsh Posté le 27-10-2005 à 11:49:50   

Reply

Marsh Posté le 27-10-2005 à 12:20:03    

kl14582 a écrit :

Merci CNeo, je vais étudier ton code. a premiere vue, l'histoire du "body" serait tres interessante, cela eviterais de répéter mon menu sur chaque page.
Je vais peut être paraître un peu "bête", mais je suis toujours agréablement surpris que des personnes consacrent quelques minutes pour aider des novices dans ce domaine !!! bien les gars, ça fait plaisir...


 
Il y a quelques mois j'étais novice aussi et après 4 livres et des dizaines de sites et de topik parcourus je suis devenu un pro. Je suis même en train d'écrire des cours XHTML/CSS (PHP/MySQL les bases).  
 
Tu sais il n'y a pas que des égoïstes égocentriques sur cette planête. ;)

Reply

Marsh Posté le 27-10-2005 à 12:20:56    

CNeo > T'as mis tes cours sur un site ou pas encore?

Reply

Marsh Posté le 27-10-2005 à 12:22:36    

omega2 a écrit :

kl14582 > Jsute pour info, ton menu, il faut quand même qu'il soit présent dans les différentes pages de ton site. Quand au #body, il a mis ça pour constituer un menu valide mais qui ne change pas de page. C'est donc un menu de test et non pas un menu de site complet. ;)


 
 :??: Je comprends pas où tu vois un problème... Chaque "page" appelée sera affichée dans le div principal.

Reply

Marsh Posté le 27-10-2005 à 12:22:59    

omega2 a écrit :

CNeo > T'as mis tes cours sur un site ou pas encore?


 
Pas encore fini de rédiger... Ils sont basés sur des chapitres principaux et des chapitres exemples, le tout pour créer un forum, le mien que je vais terminer en même temps que les cours.


Message édité par CNeo le 27-10-2005 à 12:25:47
Reply

Marsh Posté le 27-10-2005 à 13:12:20    

CNeo a écrit :

:??: Je comprends pas où tu vois un problème... Chaque "page" appelée sera affichée dans le div principal.

En fait, j'ai confondus avec une autre discution sur un menu.
Mais de toute maniére, au vu du menu actuel de son site, il change de page en cliquant sur les liens de son menu donc il lui faut le menu dans chaque page html. En plus, je vois rien dans ton menu qui change le contenu du "div principal". ;) A premiére vue, ca ne fait que recadrer la zone visible de l'affichage sur la partie de la page contenant l'élément d'id "body".

Reply

Marsh Posté le 27-10-2005 à 13:30:18    

omega2 a écrit :

En fait, j'ai confondus avec une autre discution sur un menu.
Mais de toute maniére, au vu du menu actuel de son site, il change de page en cliquant sur les liens de son menu donc il lui faut le menu dans chaque page html. En plus, je vois rien dans ton menu qui change le contenu du "div principal". ;) A premiére vue, ca ne fait que recadrer la zone visible de l'affichage sur la partie de la page contenant l'élément d'id "body".


 
 
Exact  :pfff:  :(  
Il faut donc ajouter du JS en s'aidant de cela http://css.alsacreations.com/Tutor [...] javascript.

Reply

Marsh Posté le 27-10-2005 à 14:04:23    

oulala j'ai décroché là !! je ne sais même plus si je dois mettre du javascript, ou alors rester que en css et si le probleme de remettre le menu sur chaque page peut être résolu !!  
 
je vais peut être m'accorder une sieste et relire le topic après car là, je suis pommé !!

Reply

Marsh Posté le 27-10-2005 à 14:13:44    

En fait, soit tu remets le menu sur chaque page et tu peux utiliser tes liens habituels, soit tu le met que sur la page principale et il faut du javascript pour changer le contenu de la page par celui d'un autre fichier html en fonction du lien sur lequel on clique.
 
La seconde solution empéchera quasiment à coup sur le référencement des autres pages, quand on voudra en mettre une dans les favoris, ca sera le bordel par ce quand on reviendra sur le site, ca sera toujours la page contenant le menu qui s'affichera et pas celle qu'on pensait avois mis dans les favoris et si on a javascript désactivé (10% des surfeur environ), on aura jamais accés aux autres pages.
 
Mais c'est vrai que la premiére nécéssite la mise à jour de toutes les pages contenant le menu et ce dés qu'on rajoute/enléve/modifie une rubrique ou une sous rubrique. (ca devient vite fastidieux)

Reply

Marsh Posté le 27-10-2005 à 14:17:10    

merci pour l'explication, c clair au moins !!
j'etais pas au courant pour l'accessibilité du javascript, je pensais que c'était devenu comme flash...

Reply

Marsh Posté le 27-10-2005 à 14:23:21    

CNeo a écrit :

Ton menu est bien structuré mais tu n'as pas besoin de Javascipt ni de onMouseOver...
Passe à du CSS
 

ul, li {list-style-type: none; margin: 0; padding: 0 15px 0 0;}
#nav {font: 1em "Times"; margin: 1px 0 0 0;}
#nav ul {float: left; width: 1020px; background: #90EE90; border: 1px solid green; padding: 0;}
#nav li {display: inline;}
#nav a {text-decoration: none;}
#nav ul ul {font-size: 1em; border-top: 1px solid green; display: none; border: none;}
#nav ul.l1 li.submenu:hover ul.l2,
#nav ul.l2 li.submenu:hover ul.l3 {display: block;}
#nav ul.l1 li.submenu:hover #body {top: 1.5em;}
#nav li.submenu {background: url(Images/dropmenu.gif) 95% 50% no-repeat;}
 
 
 
<div id="nav">
<ul class="l1">
 <li><a href="#body">blabla</a></li>
 <li class="submenu"><a href="#body">blabla</a>
  <ul class="l2">
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
  </ul>
 </li>
 <li><a href="#body">blabla</a></li>
 <li class="submenu"><a href="#body">blabla</a>
  <ul class="l2">
   <li><a href="#body">blabla</a></li>
   <li class="submenu"><a href="#body">blabla</a>
    <ul class="l3">
     <li><a href="#body">blabla</a></li>
     <li><a href="#body">blabla</a></li>
     <li><a href="#body">blabla</a></li>
     <li><a href="#body">blabla</a></li>
    </ul>
   </li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
   <li><a href="#body">blabla</a></li>
  </ul>
 </li>
 <li><a href="#body">blabla</a></li>
</ul>
</div>


 
 
Code CSS presque validé et XHTML Strict.
Les liens de ce menu te permettent d'envoyer ton contenu dans un div dont l'id est body et que tu places en dessous de ton menu.
 
 [:ab614]


 
Code de debutant
 trop de class=""
un id suffit largement et avec les selecteurs de profondeur c'est dans la poche

Reply

Marsh Posté le 27-10-2005 à 14:23:34    

Ben le flash, c'est pire, tout ce qu'est dans une animation flash est 100% invisible pour des moteurs de recherche comme google. ;)

Reply

Marsh Posté le 27-10-2005 à 14:27:21    

oui je c, ms je parlai en terme d'accessibilité pour les internaute, 97% ont le plug-in flash ms c'est vrai pour le referencement
 
Dans mon cas, je n'est pas besoin que toutes mes pages soient referencees dans les moteur, la premiere pourquoi pas, ce n'est qu'un site personnel, je ne cherche pas à rentabiliser mon site avec le nombre de visiteurs. mais c'est bon à savoir...

Reply

Marsh Posté le 27-10-2005 à 14:37:15    

gatsusat a écrit :

Code de debutant
 trop de class=""
un id suffit largement et avec les selecteurs de profondeur c'est dans la poche


 
C'est pas de moi mais si tu as mieux cela m'interesse et cela interessera aussi Eric Meyer qui a écrit ce code (même s'il est un peu modifié).
 
Ce n'est pas dans la poche pour IE.


Message édité par CNeo le 27-10-2005 à 14:38:25
Reply

Marsh Posté le 27-10-2005 à 14:38:38    

kl14582 > 97% Tant que ça?
 
ok, moi, je l'ai chez moi quand je suis sous windows et je l'ai au boulot. Mais quand je suis sous Beos, je l'ai pas, quand on est sous linux, c'est pas installé en standard et même en l'installant, on a pas toutes les extensions installé d'office sous windows en même temps que le flash, du coup, tous les sites en flash ne passent pas.
Sous freebsd, j'ai pas installé d'interface graphique (c'est un serveur web et par conséquent, je considére que le maximum de puissance doit être disponible pour les services réseaux) alors pour le flash, c'est pas demain la veille que je l'y installerais.
 
Pour moi, le flash est disponible moins souvent que le javascript. (par disponible, j'entends que la navigateur est capable de traiter cette technologie dés son installation ou aprés le rajout d'un plugin.
Mais finalement, il y a peut être moins de monde qui désactivent le flash que le javascipt. En fait, j'ai pas vu de stats sur la disponibilité du flash. :lol:


Message édité par omega2 le 27-10-2005 à 14:39:07
Reply

Marsh Posté le 27-10-2005 à 14:50:32    

je c pas si c'est des stats officiel, mais c'est ce qu'on m'as dit en cours (IUT) mais je pense que ca concerne que windows

Reply

Marsh Posté le 03-11-2005 à 13:46:53    

personne ne s'aurait comment je pourrais faire pour eviter de mettre mon menu dans un calque vu que lorsque la fenetre du navigateur est trop etroite, mon menu ne reagit pas correctement avec les rubriques de droites qui se mettent à gauche.  
 
alors ???

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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