Un menu comme sur tabou.be
Gont
Conseil & Astucier
Scout Web Portail
Voila, je voudrais pour plus de clarté dans le menu, faire un menu déroulant pour l'unité et les branches comme dans tabou.be
ChMat, je suppose que tu dois savoir faire ca, tu as des contacts sur tabou, me trompe-je?

Posté le 18/09/2007 à 15:55:32
Re : Un menu comme sur tabou.be
ChMat
Webmaster
Salut Gont,
Comme membre de l'équipe de 3 webmasters de Tabou, j'ai effectivement de bons contacts
Ceci dit, d'autres ont déjà eu ton idée avant toi :
créer un menu déroulant sur SWP

Posté le 18/09/2007 à 17:22:10
Re : Un menu comme sur tabou.be
Gont
Conseil & Astucier
Scout Web Portail
je m'en suis basé et j'ai fait plus simple:
j'ai ajouté a complet.css ceci:
Code :#menu ul li ul {
position: relative;
top: 0;
left: 90%;
display: none;
}
#menu ul li ul li {background-color: #930;}
/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
#menu ul li:hover ul{
display:block;
}
Mais j'avais un problème, car il n'y avait pas de </ul> pour fermer la liste des sous menu unité et des sous menu de section quand je n'était pas connecté
j'ai donc supprimer une condition comme ceci: a la ligne 160 et 203
j'ai remplacer
Code :echo ($site['show_menu_vide'] or $user['niveau']['numniveau'] > 2)) ? '</ul>'."n" : '';
par
Code :echo '</ul>'."n";
EST CE UN PROBLEME POUR LA SECURITE???
autre chose, j'ai mis un retrait a 90% pour voir ce que ca donne, en fait, cela ne donne rien, ce que je voudrait c'est que le sous-menu s'affiche juste acollé a droite du menu principal, au dessus de la page de corps, et qu'il ne prenne pas de place en hauteur.
Une solution?
pour voir ce que ca donne :
c'est ici

Posté le 20/09/2007 à 03:30:08
Re : Un menu comme sur tabou.be
ChMat
Webmaster
Salut Gont,
Alors, ton idée est excellente aussi

Voici une version corrigée qui résout ton problème je pense. J'ai commenté les paramètres pour l'explication.
Code :#menu ul li ul {
position:absolute; /* en relative, les menus en-dessous se décalent pour laisser la place à la liste masquée */
margin-top:-12px; /* pour mimer la position relative verticale sans le décalage des autres éléments */
left:140px; /* le sous-menu doit chevaucher son parent déclencheur (sinon il disparaît quand on quitte la zone du déclencheur) */
z-index:2; /* on place ce menu par dessus la couche de contenu du site */
display:none;
/* un peu de maquillage pour faire joli */
background-color:#E9D3C8;
border:1px solid #930;
}
/*
Lors du survol ,avec la souris, les sous-menus apparaissent grace a display:block
On active le display:block au survol du déclencheur mais aussi au survol du sous-menu
(quand on met le sous-menu en absolu, il est détaché de son parent et donc quitte son influence CSS)
*/
#menu ul li:hover ul, #menu ul li ul:hover{
display:block;
}
Ca marche sous Firefox, je l'ai pas testé sous IE. (testé via l'extension WebDeveloper de Firefox)
Juste un détail : avec absolute, au survol du sous-menu de la section, on quitte la zone d'influence du parent (le nom de la section), il perd donc sa mise en surbrillance. Pour régler ça, on ne peut que repasser en relative mais alors on revient au même problème...

Posté le 20/09/2007 à 10:41:53
Re : Un menu comme sur tabou.be
ChMat
Webmaster
Ah et en ce qui concerne la suppression de la ligne de code, ce n'est pas un souci pour la sécurité non. Merci pour l'info, je vais vérifier que la correction a bien été faite pour la version 1.2.

Posté le 20/09/2007 à 10:45:06
Re : Un menu comme sur tabou.be
gzarmati
Visiteur
J'ai fait ce genre de chose aussi.
Je voudrais juste signaler à Gont, qu'avec mon navigateur et ma résolution d'écran, je ne vois pas les sous menus,... En fait ils sont tellement décalés vers la droite que je ne vois que la première lettre.
Pour que ce soit vraiment bien, il faut que le menu reste ouvert une fois qu'on a cliqué dessus. Pour cela, j'ai du modifier le php et ajouter une classe "actif" au menu sélectionné.
Mon code CSS :
Code :
#menu ul li ul
{
display:none;
color:#039;
position:relative;
z-index:1;
background:#CCF;
padding-top:1px;
padding-bottom:1px;
top:-1px;
margin-top:0px;
margin-left:7px;
margin-right:7px;
margin-bottom:10px;
border:1px #039 solid;
}
#menu ul li:hover ul
{
display:block;
}
#menu .actif
{
display:block;
}
Pour voir le résultat, c'est par
ici.

Posté le 20/09/2007 à 14:47:27
Re : Un menu comme sur tabou.be
gzarmati
Visiteur
Comme bizarrement, je ne peux plus modifier mon message, j'en fait un autre pour attirer l'attention sur un élément dans la requête SQL, par rapport à la version originale, j'ai ajouté
Code : OR section='1'
qui permet de faire apparaitre les activité d'unité dans chaque section. Ce n'est pas tres propre car s'il y a plus qu'une unité ce n'est pas valable, mais j'avais fais ça pour moi

Posté le 20/09/2007 à 16:24:55
Re : Un menu comme sur tabou.be
Gont
Conseil & Astucier
Scout Web Portail
Je me demandait, la propriété :hover, il me semble qu'elle n'est pas reconnue par ie6 et inférieur (ie6 est encore fort utilisé)
J'ai cru voir une fonction onmouseover qqpart, mais je ne sais plus trop ou, ne serait il pas mieux de l'utiliser?
et pour le problème de menu, est ce que tu pourrait faire un screen gzarmati?
PS: c'est parce que je ne trouve vraiment pas pratique de faire apparaitre les sous-menu en dessous du menu que je cherche qqch de plus mieux. En effet sur ton site gzarmati, si on parcours un menu de section avec 3 sous-menus, on arrive au 2ème menu de section, le premier se ferme, donc, tout se décale et on se retrouve dans le menu de la 5eme section, et ca déstabilise. Il faut donc que je trouve une fonction viable, et visible par tous

Posté le 21/09/2007 à 12:48:14
Re : Un menu comme sur tabou.be
ChMat
Webmaster
Hello,
La propriété CSS :hover est reconnue différemment selon les navigateurs :
- IE avant la 7 : uniquement sur les balises <a>
- IE 7 et Firefox : toutes les balises
onmouseover est un attribut html permettant d'exécuter un script au survol de n'importe quel élément.
Tout est question de choix de technologie donc.

Posté le 21/09/2007 à 15:32:45
Re : Un menu comme sur tabou.be
gzarmati
Visiteur
Plus besoin de screen, puisqu'en retournant sur ton site j'ai vu que tu as réglé le problème.
En effet quand on parcours le menu auto-déroulant de haut en bas, on a des problèmes comme tu le décris, mais on le fait de bas en haut, c'est parfait. (Evidement, c'est difficile d'obliger les gens à le faire dans ce sens

)
Le désavantage de ton menu c'est qu'une fois qu'on a choisi un élément, le sous-menu disparait et on ne sait plus exactement où on est, et il faut le faire réapparaitre à chaque fois. Si tu le force à rester ouvert, alors les autre s'ouvrent par dessus et ce n'est plus très lisible.
Je viens de penser à un modèle mixtes, va voir sur mon site ce que tu en penses...

Posté le 21/09/2007 à 15:34:20
Re : Un menu comme sur tabou.be
gzarmati
Visiteur
Dans le menu, j'ai mis une classe "actif" pour le sous-menu de la section sélectionnée. Je crois que ce serait intéressant d'inclure cet élément dans la version 1.2.
En utilisant les display:none et .actif{display:block}, on obtient exactement le même résultat que ce qui est fait actuellement par des if... dans le php pour afficher ou non tous les sous-menus. Faire cela en CSS plutot qu'en PHP :
1- simplifie le code PHP
2- permet de modifier le design plus facilement (On ne touche qu'au CSS, il ne faut plus passer par la configuration du site)
3- permet de mettre en évidence la section choisie dans le cas où tout est toujours déroulé.

Posté le 24/09/2007 à 09:55:36
Re : Un menu comme sur tabou.be
Gont
Conseil & Astucier
Scout Web Portail
gzarmati, ton menu est un modèle de clarté, merci beaucoup. Je ferai bientot les modifs de mon coté
PS: j'ai testé sous Firefox 2 et sous IE7, il y a une différence d'affichage (pas la même position verticale du sous-menu) mais c'est très lisible

Posté le 29/09/2007 à 19:44:12