Besoin d'un nouveau menu pour le site

[Fredo_L]

Bonjour,

Je prévois dans les 10 semaines qui viennent, d'ajouter un nombre important de nouveaux magazines. Actuellement, le site comporte 260 magazines et je pense que l'on va d'ici peu atteindre les 300.

Le problème, c'est que le menu du site que j'utilise est commence à être assez saturé.
C'est un menu CSS avec la configuration ici :
http://www.abandonware-magazines.org/lib/default.css
http://www.abandonware-magazines.org/lib/menu2.css

Est-ce que quelqu'un maîtrisant bien le CSS pourrait m'aider à le modifier.

Je souhaite faire les 2 choses suivantes :
1) Actuellement, le 3e niveau du menu s'ouvre en face de la ligne sélectionnée dans le 2e niveau. Je souhaiterais que le 3e niveau s'ouvre toujours au niveau de la ligne la plus haute du 2e menu.
L'objectif étant d'éviter de perdre de la hauteur de ligne. Par exemple, si je sélectionne dans le 2e niveau, la ligne "T--> Z", je perds 6 lignes de haut.

2) Actuellement, le 3e niveau du menu est sur 2 colonnes. J'aimerais le mettre sur 3 colonnes.

Merci d'avance à ceux qui pourront m'aider.

Je précise que si quelqu'un connaît un super menu que je pourrais facilement mettre sur le site, cela pourrait également m'intéresser.

[Vinvin]

Bonne idée, il y a quelques jours, je me disais que le menu avait un style "ancien"
Il faudrait peut-être rééquilibrer les tailles (pour le menu par ordre alphabétique).
Aurais-tu un comptage par la première lettre du magazine (le sous-menu "N->O" est beaucoup plus court que les autres) ?

[Vinvin]

Je ne suis malheureusement pas un expert CSS mais je viens de trouver une page remplie de menus ( http://www.noupe.com/css/100-great-css- ... rials.html ).
Celui-ci ressemble déjà beaucoup à celui d'abandonware : http://sperling.com/examples/menuh/

à+

[Fredo_L]

Merci pour tes réponses.

C'est exact, le menu http://sperling.com/examples/menuh/ est très proche de ce que j'ai.
Je préfère néanmoins mon menu du fait que le niveau 3 est chez moi sur 2 colonnes, alors qu'il est seulement sur 1 colonne sur l'autre menu.

Pour les autres menus, ils sont bien mais je ne pense pas qu'ils soient adaptés pour proposer 300 liens.

Je pense que le mieux serait que je conserve mon actuel forum mais en y apportant les modifications nécessaires.
1) Passer le 3e niveau sur 3 colonnes.
2) Faire que le 3e niveau démarre tout en haut et non pas au même niveau que la ligne sélectionnée du 2e niveau.

[Data]

Bonne nouvelle, je pense avoir résolu tes 2 questions (en tout cas sur mon ordi en récupérant le code source et le css de ta page d’accueil et en y apportant des modifications en local)

Comment je fais pour t'indiquer proprement ce qu'il faut modifier ?
Il y a une ligne dans le menu2.css pour répondre à la question 2, une ligne à modifier dynamiquement par le php au niveau des balises ul pour répondre à la question 1, et au minimum une ligne dans le php pour gérer en conséquence le nombre de li vides de mise en forme au niveau 3 selon le nombre de rubriques utiles (vu que tu passerais de 2 à 3 colonnes, le nombre de li vides est égal à 3-(le reste de la division par 3 du nombre de rubriques utiles)*3)

Dis-moi si ça déjà ça t'aide, et si tu as besoin de moi pour cette modification.

[Fredo_L]

Oui, oui, c'est utile.
Tu peux donner les infos détaillées ici, car il n'y a rien de secret.

Est-ce que pour commencer, tu pourrais être plus précis concernant ma question 2) ?
Je vais d'abord corriger cet aspect là.
Je te remercie par avance.

[Data]

Les questions 1) et 2) sont inversées entre ton premier et ton avant dernier post. J'y réponds par rapport au premier

1) Actuellement, le 3e niveau du menu s'ouvre en face de la ligne sélectionnée dans le 2e niveau. Je souhaiterais que le 3e niveau s'ouvre toujours au niveau de la ligne la plus haute du 2e menu.
L'objectif étant d'éviter de perdre de la hauteur de ligne. Par exemple, si je sélectionne dans le 2e niveau, la ligne "T--> Z", je perds 6 lignes de haut.

Dans le code source (et je suppose dans le php) et pour chaque niveau 2, le niveau 3 commence avec une balise <ul>. Par exemple pour Amstrad :

<li><a class="drop" href="">Amstrad</a>
<ul>

Il suffit de modifier ainsi :

<li><a class="drop" href="">Amstrad</a>
<ul style="top:-110px;">

Pour donner :


Le nombre de pixels à mentionner dépend du rang pour chaque niveau 2 dans le menu. Amstrad est le 6ème, il y a donc 5 décalages vers le haut à faire. Un décalage correspond pour ton site à -22px (je l'ai trouvé par tâtonnement, -21 et -23 ne sont pas alignés, un pas de -22 marche pour toutes les rubriques). Donc pour Amstrad, il faut décaler vers le haut de -22*5 soit -110px.

Cette question ne pouvait pas se résoudre dans le css tel quel car il s'applique de la même manière à toutes les balises <ul>. Il faut donc préciser un style dans chacune des balises concernées, qui devient prioritaire sur le style général.

2) Actuellement, le 3e niveau du menu est sur 2 colonnes. J'aimerais le mettre sur 3 colonnes.

Dans menu2.css, tu as cette partie

/* position du 3e level qui apparait a droite */
.menu ul ul ul
{
left:170px;
top:-0px;
width:509px;
}

Je ne sais pas comment tu as choisi la largeur à 509 pixels, car le 3e niveau du menu étant actuellement sur 2 colonnes, je pensais que chaque colonne faisait 509/2 soit 254,5 pixels (ou 255 pour arrondir). En modifiant width à 764px (254,5*3 arrondi), le menu passe en fait à 4 colonnes. Du coup j'ai tâtonné, et en mettant width à 609px par exemple, le 3e niveau du menu passe bien à 3 colonnes :

/* position du 3e level qui apparait a droite */
.menu ul ul ul
{
left:170px;
top:-0px;
width:609px;
}

ce qui donne en test chez moi :


Tu peux voir ensuite que le nombre actuel de rubriques à vide sur le site (il y a 3

<li><a></a></li>

pour le niveau 3 de Amstrad : 1 pour compléter la ligne RUNSTRAD et 2 pour faire une ligne vide en dessous des 2 colonnes actuelles) provoque un décalage quand on passe sur 3 colonnes.

Il faut donc modifier dans le php le calcul par niveau 2 du nombre de

<li><a></a></li>

soit : 3-(le reste de la division par 3 du nombre de rubriques utiles de niveau 3 dans le niveau 2 en question)*3)

J'ai essayé d'être le plus clair possible dans mes explications, n'hésite pas à me demander des précisions.

[Fredo_L]

Merci !
Je vais essayer de mettre ça en pratique le plus rapidement possible.

[Fredo_L]

Par manque de temps, je crois que ce ne sera que la semaine prochaine que je pourrai réorganiser le menu.
Je te remercie vivement en tout cas !

[Data]

Content si j'ai pu te faire gagner du temps

[Fredo_L]

Encore merci !
Finalement, je vais rester sur 2 colonnes pour le moment.
Ce n'est que si je n'ai vraiment pas le choix que je passerai sur 3 colonnes.

[Vinvin]

Très bonne modif !!
à+

[Fredo_L]

Je suis également content du résultat. Encore merci à Data !

Je suis également que certains sont mécontents de la disparition du classement de revues par catégories (consoles, PC, mobile, pocket, programmation, etc.) mais je pense que c'était nécessaire. Surtout que cela me posait des problèmes car pour de nombreuses revues, je ne savais pas où les ranger, et donc, je les mettais au final dans "Autres" et cette rubrique contenait au final plus de 100 revues, ce qui est trop.

Avec la mise à jour du menu, j'ai pu reprendre l'ajout de nouveaux magazines et avant la fin novembre, nous devrions dépasser les 300 magazines.

Je précise que je reste ouvert à des solutions permettant d'avoir un classement des magazines par ordre alphabétique, ainsi que par catégorie. Dans cette hypothèse, je ne veux pas avoir des propositions vagues (par exemple, quelqu'un a dit dans les commentaires qu'une solution serait un menu en Ajax) mais je veux quelque chose de très concret. Par exemple, il faudrait me montrer un site disposant d'un menu proposant plus 300 liens et qui serait mieux que le menu que j'utilise actuellement.

Il semble qu'il y ait des problèmes avec certains navigateurs mais j'en reparlerai dans un autre sujet.

[Storm1981]

Fredo_L, je peux éventuellement te pondre le code et faire une page de test hébergée autre part afin de te montrer le résultat.

[Fredo_L]

Fredo_L, je peux éventuellement te pondre le code et faire une page de test hébergée autre part afin de te montrer le résultat.

Ok, pas de problème.
Merci d'avance.

[Storm1981]

Bon... j'ai plus ou moins finis le code mais je ne sais pas comment tu procèdes pour générer le menu de gauche (ordre alphabétique). Je suppose que c'est du php - mysql?

Je peux t'envoyer tout à l'heure les modifications à faire mais il faudra sûrement modifier des choses de ton côté au nivau php/mysql pour le faire fonctionner.

[Fredo_L]

C'est fait à la main.
Le fait de faire cela à la main me laisse plus de liberté. Par exemple, si j'ai appelé un magazine "L ordinateur Individuel", je peux le renommer en "L'Ordinateur Individuel" (avec le ' supplémentaire).
Cela peut éventuellement me permettre de réduire la longueur du titre du magazine.

[Storm1981]

Fredo_L , aurais-tu encore le classement par genre des magazines? Je t'enverrai tout à l'heure les modifications.

[Fredo_L]

Non, désolé, je n'ai plus. J'ai effacé l'ancien fichier.
Mais de toute façon, ma liste était un peu bidon car bien souvent, je ne savais pas comment classer les magazines.
A la limite, tu peux te contenter d'une classement bidon (en mettant par exemple n'importe quel magazine dans la catégorie consoles ou PC).

Si ta technique est bonne, on pourra à se moment voir pour faire un classement beaucoup plus optimal.

[Fredo_L]

Merci, je trouve ça pas mal !
Je vais cependant attendre encore un mois, le temps de mettre sur le site tous les nouveaux magazines que j'ai en retard (il m'en reste encore 30 à ajouter sur le site).