Titre: Question bête sur les menus
Posté par: Nikolai39 le le 05-03-2015 a 22:13:17
Bonjour,
Je suis webmaster d'un site web de taille assez conséquente (6000 pages HTML), et je le re-designe complètement car sa navigation est très peu intuitive.
Je voudrais faire un ou plusieurs menus (horizontaux, verticaux, peu importe pour l'instant) afin de faciliter la navigation.
Sur internet, je trouve de nombreux tutoriels qui expliquent comment DESSINER un menu, et comment le rendre joli.
Mais ce que je ne comprends pas, c'est comment fait-on pour que le menu "sache où on est" dans le site ?
En clair : je suis sur la page index.html. Je clique sur l'item "toto" du menu, qui m'emmène sur la page "toto.html". Là, il faudrait que l'item "toto" change de couleur, pour que le lecteur sache qu'il est sur la page "Toto".
Merci de votre aide ! |
Titre: Re:Question bête sur les menus
Posté par: burtgummer le le 05-03-2015 a 23:11:27
bonsoir,
Grace au CSS vous pourrez vous en sortir
http://www.alsacreations.com/astuce/lire/43-comment-dfinir-lapparence-de-ses-liens.html |
Titre: Re:Question bête sur les menus
Posté par: tof73 le le 06-03-2015 a 00:31:51
| les 6000 pages sont générées manuellement ou dynamiquement ? |
Titre: Re:Question bête sur les menus
Posté par: burtgummer le le 06-03-2015 a 00:39:54
avec current ça sera dynamique
nav li a.current {
color: black;
font-weight: bold;
border: 1px solid #9cbd17;
border-radius: 5px 5px 5px 5px;
background-color: #777;}
qui provient de la page
http://openclassrooms.com/forum/sujet/css3-garder-la-couleur-au-clique-65732 |
Titre: Re:Question bête sur les menus
Posté par: Nikolai39 le le 06-03-2015 a 09:09:29
les 6000 pages sont générées manuellement ou dynamiquement ?
|
|
Elles sont toutes faites 100% manuellement !
C'est justement le problème : sur chaque page, je dois modifier manuellement chaque lien pour prendre en compte l'endroit où on se trouve dans le site (il y a des centaines de sous-sous-sous dossiers).
Merci burtgummer pour votre réponse, mais ces liens ne permettent que de dessiner des menus. Moi, ce que je cherche à faire, c'est les rendre intelligents. Par exemple, au-dessus de cette page il y a un menu :
Forum-webmaster
Technique - programmation
HTML / CSS / XHTML
Écrire une réponse ( Re:Question bête sur les menus )
J'imagine qu'il n'y a pas un gentil admin qui écrit manuellement cette arborescence sur chacune des pages du forum... Donc c'est que la page que vous êtes en train de lire "sait où elle est"... Ma question est : comment le sait-elle ?
Merci ! |
Titre: Re:Question bête sur les menus
Posté par: tof73 le le 06-03-2015 a 18:29:41
je ferais une refonte complète du site, et pas seulement des menus, en utilisant un cms.
avec un titre qui change pour chaque page, les résultats dans google seraient bien meilleurs. |
Titre: Re:Question bête sur les menus
Posté par: Nikolai39 le le 06-03-2015 a 19:03:34
je ferais une refonte complète du site, et pas seulement des menus, en utilisant un cms.
avec un titre qui change pour chaque page, les résultats dans google seraient bien meilleurs.
|
|
Moui... Je n'aime pas trop les CMS... J'aime me sentir libre !! :) |
Titre: Re:Question bête sur les menus
Posté par: Nikolai39 le le 06-03-2015 a 20:27:20
| Si je faisais une base de données SQL, aurais-je une chance de résoudre mon problème, selon vous ? |
Titre: Re:Question bête sur les menus
Posté par: pppplus le le 07-03-2015 a 00:51:52
Moui... Je n'aime pas trop les CMS... J'aime me sentir libre !! :)
|
|
Disons que pour 5 à 10 pages, on peut se payer le luxe d'être libre...
6000 pages faites manuellement :
- j'imagine que vous avez une maquette, avec le header et le footer de chaque page.
=> si vous changez un lien dans le footer, vous devez le faire sur les 6000 pages ??
Imaginons, que vous preniez un CMS :
- vous avez votre maquette : dès que vous changez un lien, c'est automatique sur toutes les pages qui ont cette maquette
- vous écrivez une nouvelle page : un lien est automatiquement mis, classé dans une arborescence de catégories, archives...
- vous effacez une page, elle disparait de tous les menus automatiquement.
Mais vous pouvez aussi le faire à la main. Mais vous n'êtes pas si libre que ça, car chaque changement vous demande des heures de modifs au lieu de quelques minutes voire secondes sur un CMS.
Si vous avez assez de connaissance en PHP/MySql, vous pouvez aussi vous faire votre propre script qui vous fera tout ça (ou au moins en partie). Mais mine de rien, c'est pas mal de boulot, pour des résultats parfois décevants. |
Titre: Re:Question bête sur les menus
Posté par: Nikolai39 le le 09-03-2015 a 17:03:23
J'ai une nouvelle question : je suis en train de faire ma barre de menu horizontale, dont voici le code :
<div id="toto">
<ul>
<li><a href="#"><font color="#000080">ACCUEIL</font></a></li>
<li><a href="vaisseaux/vaisseaux.html">VAISSEAUX</a>
<ul>
<li><a href="vaisseaux/vostok/vostok.html">Vostok</a></li>
<li><a href="vaisseaux/voskhod/voskhod.html">Voskhod</a></li>
<li><a href="vaisseaux/soyouz/soyouz.html">Soyouz</a></li>
</ul>
</li>
<li><a href="#">LANCEURS</a></li>
<li><a href="#">BIOGRAPHIES</a></li>
<li><a href="#">BASES & ORGANISATIONS</a></li>
<li><a href="#">SATELLITES</a></li>
<li><a href="#">LANCEMENTS</a></li>
</ul>
</div> |
|
Les styles sont dans une CSS, que chacune des 6000 pages appelle.
Mais comment faire pour que le contenu soit lui aussi appelé ?
Je m'explique : j'ai quelques rubriques (VAISSEAUX, LANCEURS, etc.). Dans la rubrique VAISSEAUX, j'ai trois sous-rubriques (VOSTOK, VOSKHOD, SOYOUZ). Si, un jour, je rajoute une quatrième sous-rubrique, il faudra que je mette à jour le menu manuellement sur les 6000 pages... Je cherche à éviter cela ! C'est à dire, à avoir une liste de sous-rubriques que les pages HTML viendraient chercher...
Quelqu'un a une idée de comment faire ?
Merci beaucoup !! |
Titre: Re:Question bête sur les menus
Posté par: KB le le 10-03-2015 a 10:19:52
salut,
créer ton menu dans un fichier à part et inclut le dans tes pages avec un "include" php.
Ainsi, chaque modification sur ton menu sera répercuté sur toutes tes pages. |
Titre: Re:Question bête sur les menus
Posté par: Nikolai39 le le 10-03-2015 a 20:30:38
salut,
créer ton menu dans un fichier à part et inclut le dans tes pages avec un "include" php.
Ainsi, chaque modification sur ton menu sera répercuté sur toutes tes pages.
|
|
En fait, je suis arrivé à faire ça avec un petit JS :
document.getElementById("nav01").innerHTML =
"<ul id='toto'>" +
"<li><a href='http://www.kosmonavtika.com/index.html'>ACCUEIL</a></li>"+
"<li><a href='http://www.kosmonavtika.com/vaisseaux/vaisseaux.html'>VAISSEAUX</a></li>"+
"<li><a href='http://www.kosmonavtika.com/lanceurs/lanceurs.html'>LANCEURS</a></li>"+
"<li><a href='http://www.kosmonavtika.com/cosmoperso/cosmoperso.html'>BIOGRAPHIES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/basesorga/basesorga.html'>BASES & ORGANISATIONS</a></li>"+
"<li><a href='http://www.kosmonavtika.com/satellites/satellites.html'>SATELLITES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/lancements/lancements.html'>LANCEMENTS</a></li>"+
"</ul>"; |
|
Mon nouveau problème, c'est de faire des sous-menus... Quand je rajoute du code dans ce JS, ça ne marche pas... ??? |
Titre: Re:Question bête sur les menus
Posté par: KB le le 11-03-2015 a 09:59:42
| Quand je rajoute du code dans ce JS, ça ne marche pas |
|
qu'est ce qui ne marche pas?
montre ,nous le code que tu as ajouté. |
Titre: Re:Question bête sur les menus
Posté par: Nikolai39 le le 11-03-2015 a 19:16:31
document.getElementById("nav01").innerHTML =
"<ul id='toto'>" +
"<li><a href='http://www.kosmonavtika.com/index.html'>ACCUEIL</a></li>"+
"<li><a href='http://www.kosmonavtika.com/vaisseaux/vaisseaux.html'>VAISSEAUX</a>"+
"<ul>"+
"<li><a href="vaisseaux/vostok/vostok.html">Vostok</a></li>"+
"<li><a href="vaisseaux/voskhod/voskhod.html">Voskhod</a></li>"+
"<li><a href="vaisseaux/soyouz/soyouz.html">Soyouz</a></li>"+
"</ul>"+
"</li>"+
"<li><a href='http://www.kosmonavtika.com/lanceurs/lanceurs.html'>LANCEURS</a></li>"+
"<li><a href='http://www.kosmonavtika.com/cosmoperso/cosmoperso.html'>BIOGRAPHIES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/basesorga/basesorga.html'>BASES & ORGANISATIONS</a></li>"+
"<li><a href='http://www.kosmonavtika.com/satellites/satellites.html'>SATELLITES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/lancements/lancements.html'>LANCEMENTS</a></li>"+
"</ul>"; |
|
Voilà la code qui ne marche pas. C'est le même que plus haut, sauf que j'ai rajouté un <ul> dans un <li>. Quand je le fais directement dans le code HTML, ça marche. Mais quand je l'intègre dans le JS, ça ne marche pas...
Merci ! |
Titre: Re:Question bête sur les menus
Posté par: KB le le 11-03-2015 a 20:09:57
"<li><a href="vaisseaux/vostok/vostok.html">Vostok</a></li>"+
"<li><a href="vaisseaux/voskhod/voskhod.html">Voskhod</a></li>"+
"<li><a href="vaisseaux/soyouz/soyouz.html">Soyouz</a></li>"+
"</ul>"+ |
|
Probleme de double quote. remplace " par ' dans tes href |
Titre: Re:Question bête sur les menus
Posté par: Nikolai39 le le 11-03-2015 a 20:14:57
Probleme de double quote. remplace " par ' dans tes href
|
|
Ca marche !! MERCIIII !!!!!!! |
Titre: Re:Question bête sur les menus
Posté par: Nikolai39 le le 07-06-2015 a 21:30:40
Bonjour,
Depuis que Firefox est passé à la version 36.0.1, mon menu horizontal déroulant ne s'affiche plus de la même façon. Il y a un espace entre chaque ligne, au lieu d'avoir un seul bloc qui s'affiche au passage du curseur...
Voyez par vous-même : http://www.kosmonavtika.com/
Voici mon code CSS :
#toto ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
margin-top:119px;
display:inline-block;
z-index:4;
}
#toto li {
float:left;
font-family: Arial;
font-size: 11px;
display: inline;
list-style: none;
margin:0 15px;
}
#toto li a {
display:block;
background-color:#E3E1E1;
color:000000;
text-decoration:none;
padding:10px 5px 10px 5px;
text-align:left;
}
#toto li a:hover {
color:#000080;
}
#toto ul li ul {
display:none;
}
#toto ul li:hover ul {
display:block;
margin-top:0px;
}
#toto li:hover ul li {
float:none;
}
#toto li ul {
position:absolute;
} |
|
Et voici le petit JS qui appelle la CSS :
document.getElementById("nav01").innerHTML =
"<ul id='toto'>" +
"<li><a href='http://www.kosmonavtika.com/index.html'>ACCUEIL</a></li>"+
"<li><a href='http://www.kosmonavtika.com/vaisseaux/vaisseaux.html'>VAISSEAUX</a>"+
"<ul>"+
"<li><a href='http://www.kosmonavtika.com/vaisseaux/vaisseaux-vaisseaux.html'>VAISSEAUX SPATIAUX</a></li>"+
"<li><a href='http://www.kosmonavtika.com/vaisseaux/vaisseaux-stations.html'>STATIONS ORBITALES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/vaisseaux/vaisseaux-equip.html'>EQUIPEMENTS</a></li>"+
"</ul>"+
"</li>"+
"<li><a href='http://www.kosmonavtika.com/lanceurs/lanceurs.html'>LANCEURS</a>"+
"<ul>"+
"<li><a href='http://www.kosmonavtika.com/lanceurs/lanceurs_fusees.html'>FUSEES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/lanceurs/lanceurs_lanceurs.html'>LANCEURS SPATIAUX</a></li>"+
"<li><a href='http://www.kosmonavtika.com/lanceurs/lanceurs_etages.html'>ETAGES SUPERIEURS</a></li>"+
"</ul>"+
"</li>"+
"<li><a href='http://www.kosmonavtika.com/cosmoperso/cosmoperso.html'>BIOGRAPHIES</a>"+
"<ul>"+
"<li><a href='http://www.kosmonavtika.com/cosmoperso/biographies.html'>LISTE ALPHABETIQUE</a></li>"+
"<li><a href='http://www.kosmonavtika.com/cosmoperso/cosmonautes/cosmonautes.html'>COSMONAUTES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/cosmoperso/personnalites/personnalites.html'>PERSONNALITES</a></li>"+
"</ul>"+
"</li>"+
"<li><a href='http://www.kosmonavtika.com/basesorga/basesorga.html'>BASES & ORGANISATIONS</a>"+
"<ul>"+
"<li><a href='http://www.kosmonavtika.com/basesorga/cosmo.html'>COSMODROMES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/basesorga/infra_mili.html'>INFRASTRUCTURES MILITAIRES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/basesorga/infra_civ.html'>INFRASTRUCTURES CIVILES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/basesorga/villes/villes.html'>VILLES SPATIALES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/basesorga/orga.html'>ORGANISATIONS</a></li>"+
"</ul>"+
"</li>"+
"<li><a href='http://www.kosmonavtika.com/satellites/satellites.html'>SATELLITES</a>"+
"<ul>"+
"<li><a href='http://www.kosmonavtika.com/satellites/sat_mili.html'>SATELLITES MILITAIRES</a></li>"+
"<li><a href='http://www.kosmonavtika.com/satellites/sat_civils.html'>SATELLITES CIVILS</a></li>"+
"<li><a href='http://www.kosmonavtika.com/satellites/sat_etrangers.html'>SATELLITES ETRANGERS</a></li>"+
"<li><a href='http://www.kosmonavtika.com/satellites/venus/venus.html'>L'EXPLORATION DE VENUS</a></li>"+
"<li><a href='http://www.kosmonavtika.com/satellites/lune/lune.html'>L'EXPLORATION DE LA LUNE</a></li>"+
"</ul>"+
"</li>"+
"<li><a href='http://www.kosmonavtika.com/lancements/lancements.html'>LANCEMENTS</a></li>"+
"</ul>"; |
|
Si quelqu'un a déjà rencontré ce problème et a une idée pour le résoudre, je suis preneur !
Merci beaucoup ! |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|