Comment améliorer mon menu

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Comment améliorer mon menu

backdafuckup

Back to da old skool

(Re)Bonjour,

Je cherche à améliorer le menu déjà existant sur le site que je développe.
En fait, je suis arrivé en cours de dev (la maquette était déjà faite) donc le design convient très bien.

Evidemment, c'est hors standard comme dev, donc peu de css, et surtout, que des tableaux

Bref, si je peux changer ça facilement, je suis preneur, c'est pourquoi j'aurais besoin de quelques conseils (des conseils seulement hein...)

Je suis mauvais en css (je vais m'y mettre bientôt), mais je pense que ça pourrait m'aider pour mon problème.

Le menu existant, dont un screenshot se trouve un peu plus bas, a quelques bugs d'affichage (je précise que le site n'est destiné qu'à IE > 5 (6 compris donc)).

En fin de session ASP, il a des légers soucis. Le fond devient blanc par exemple sur l'event ouMouseOver. Ou encore il clignote lorsqu'on passe la souris dessus (meme event, mais pas en fin de session). Bref, il faut que je corrige ça.

(EDIT: Le deuxième élément du menu est actuellement avec la souris sur lui, on MouseOver donc...)

Voici des bouts du code qui génère le menu :

La fonction principale :

Sub AfficheMenu(PageEnCours)
'*******************************************************************************************
'** **
'** Cette procédure permet l'affichage du menu, avec personnalisation du menu en fonction de la page courante **
'** **
'*******************************************************************************************
Dim Langue
Dim MaxDroits
Langue = Request.QueryString("lng" )
MaxDroits = GetMaxDroits()
If Langue = "" Then
Langue = "fr"
End If

'Affichage du début du tableau, avec l'espace vide...
%>
<table bgcolor="#FFFFFF" height="100%" cellspacing="0" cellpadding="0" align="left" border="0">
<tr style=line-height:2 px;" height="2">
<td width="20" background="images/fond_menu.gif"><img src="images/spacer.gif"></td>
<%
reDim ContenuMenu(10,3)
Dim i

'Libellés
ContenuMenu(0,0) = Session(Langue & "_Menu_Accueil" )
ContenuMenu(1,0) = Session(Langue & "_Menu_Authoring" )
ContenuMenu(2,0) = Session(Langue & "_Menu_Contenu" )
ContenuMenu(3,0) = Session(Langue & "_Menu_Validation" )
ContenuMenu(4,0) = Session(Langue & "_Menu_ValidationPAO" )
ContenuMenu(5,0) = Session(Langue & "_Menu_Commandes" )
ContenuMenu(6,0) = Session(Langue & "_Menu_Consultation" )
ContenuMenu(7,0) = Session(Langue & "_Menu_Qualite" )
ContenuMenu(8,0) = Session(Langue & "_Menu_Administration" )
ContenuMenu(9,0) = Session(Langue & "_Menu_Forum" )
ContenuMenu(10,0) = Session(Langue & "_Menu_Déconnexion" )

'Lien
ContenuMenu(0,1) = "default.asp"
ContenuMenu(1,1) = "authoring.asp"
ContenuMenu(2,1) = "contenu.asp"
ContenuMenu(3,1) = "validation.asp"
ContenuMenu(4,1) = "pao.asp"
ContenuMenu(5,1) = "commandes.asp"
ContenuMenu(6,1) = "consultation.asp"
ContenuMenu(7,1) = "qualite.asp"
ContenuMenu(8,1) = "administration.asp"
ContenuMenu(9,1) = "forum.asp"
ContenuMenu(10,1) = "deconnexion.asp"

'Droits
ContenuMenu(0,2) = 1
ContenuMenu(1,2) = 2
ContenuMenu(2,2) = 4
ContenuMenu(3,2) = 8
ContenuMenu(4,2) = 512
ContenuMenu(5,2) = 16
ContenuMenu(6,2) = 32
ContenuMenu(7,2) = 64
ContenuMenu(8,2) = 128
ContenuMenu(9,2) = 256
ContenuMenu(10,2) = 1

For i = 0 To (Ubound(ContenuMenu))
If EstAutorise(Session("user_droits" ), ContenuMenu(i,2), MaxDroits) Then
Response.Write SeparateurMenu()
If ContenuMenu(i,0) = PageEnCours Then
Response.Write AfficheItemMenu(ContenuMenu(i,0))
Else
Response.Write AfficheItemLienMenu(ContenuMenu(i,0), ContenuMenu(i,1))
End If
End If
Next
%>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif"></td>
</tr>
</table>
<%
End Sub

Voici maintenant les 3 fonctions utilisées :

Function SeparateurMenu()
'********************************************************************************************************************************
'** **
'** Cette fonction permet d'afficher un séparateur entre chaque élément du menu **
'** **
'********************************************************************************************************************************

SeparateurMenu = "<td bgcolor=""#353686"" width=""1"" style=""padding:0 px;""><img src=""images/spacer.gif"" width=""1""></td>"
End Function

Function AfficheItemLienMenu(Texte, Lien)
'********************************************************************************************************************************
'** **
'** Cette fonction permet d'afficher un élément du menu avec son lien **
'** **
'********************************************************************************************************************************

Dim Target
Dim Fenetre

Fenetre = "location.href='" & Lien & "'"
Target = ""
%>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.<%=Fenetre%>;" onmouseOver="this.style.color='#<%=Application("SecondColor" )%>';" " onmouseOut="this.style.color='#<%=Application("CouleurMenuLien" )%>';" style="color='#<%=Application("CouleurMenuLien" )%>';">
<b><%=Texte%></b>
</td>
<%
End Function

Function AfficheItemMenu(Texte)
'********************************************************************************************************************************
'** **
'** Cette fonction permet d'afficher un élément du menu sans lien, lorsque l'élément correspond à la page courante **
'** **
'********************************************************************************************************************************

%>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px;filter:gray();">
<b><%=Texte%></b>
</td>
<%
End Function

%>

Des idées pour améliorer ça ?

edit: Oui, gatsusat, je sais, ya des tableaux et des propriétés style= dans les balises

Message édité par backdafuckup le 26-10-2005 à 15:40:46

Publicité

gatsusat

heu comment t'expliquer :

-Virer les tableaux de merde qui compose le menu et passer en UL LI A
-Revoir le code ASP (VBScript ici) qui est pourri jusqu'à l'OS
-Nous montrer le code HTML qui st généré
-Ici c'est HTML/CSS/JS pas ASP/VBscript

---------------
Les CSS c'est bon mangez-en

backdafuckup

Back to da old skool

Pour les tableaux, je sais... Le truc avantageux c'est ce design style tableau, après j'imagine bien qu'on peut faire même chose avec les balises de listes, mais moi je ne sais pas le faire pour l'instant.

Voici le code HTML généré :

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="topmenu">

<tr bgcolor="#314474" style="line-height:1 px;" height="1"><td width="100%"><img src="images/spacer.gif"></td></tr>
<tr style="line-height:30 px;" height="30">
<td bgcolor="#FFFFFF" align="left" width="100%" background="images/fond_menu.gif">

<table bgcolor="#FFFFFF" height="100%" cellspacing="0" cellpadding="0" align="left" border="0">
<tr style=line-height:2 px;" height="2">
<td width="20" background="images/fond_menu.gif"><img src="images/spacer.gif"></td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='default.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Accueil</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='authoring.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Authoring</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px;filter:gray();">
<b>Gestion de Contenu</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='validation.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Validation</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='pao.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Validation PAO</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='commandes.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Commandes</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='consultation.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Consultation</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='qualite.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Qualité</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='administration.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Administration</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='forum.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Forum</b>
</td>
<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif" width="1"></td>
<td background="images/fond_menu.gif" width="15" align="center" style="font-size:10 px;padding-left:12px; padding-right:12px; cursor:hand; cursor: pointer;" onClick="window.location.href='deconnexion.asp';" onmouseOver="this.style.color='#8C96B1';" " onmouseOut="this.style.color='#5E5E7C';" style="color='#5E5E7C';">
<b>Déconnexion</b>
</td>

<td bgcolor="#353686" width="1" style="padding:0 px;"><img src="images/spacer.gif"></td>
</tr>
</table>

</td>
</tr>
<tr bgcolor="#314474" style="line-height:1 px;" height="1"><td width="100%"><img src="images/spacer.gif"></td></tr>
</table>

gatsusat> Et si j'ai posté dans cette cat, c'est pas pour rien. Ce qui m'interesse ici, c'est le code HTML (après j'aurais ptet du poster aussi le généré, mea culpa, mais bon, yavait le principe), pas comment je vais le générer, ça je me débrouille.

Message édité par backdafuckup le 26-10-2005 à 16:11:02

omega2

Si par menu sous forme de tableau tu veux dire menu avec les cases à côté les unes des autres, alors en css, tu indiques "float:left" pour les <li> contenu par le <ul> du menu.
pour les images des boutons, t'utiliseras la même pour tous en la définissant grace au "background-image" (toujours en css) et pour les linellé des boutons, tu mets le texte tout simplement.
Les espace à coup d'images, tu laisse tomber et tu définis à l'aide des margin et/ou padding en indiquant une coleur pour une des marges droite ou gauche.
Egalement, vire les onclick et met des vrais liens (balise <A> ) par ce que côté accéssibilité, c'est 0 pour 10% des visiteurs potentiels (javascript désactivé)

Evidement, tout ça, ca donne un menu propre en ul li a et non plus du bricolage à coup de table (bricolage car il n'y a pas de lien mais des cases de tableaux se comportant comme un lien grace à du javascript)

Message cité 1 fois

backdafuckup

Back to da old skool

omega2 a écrit :

Si tu veux c'est pas un site grand public en fait, c'est pour ça que j'ai dit que c'était hors standards web actuels. Le site est conçu pour IE et ne sera jamais utilisé par autre chose (sauf si, éventuellement, Microsoft déposait le bilan et IE était effacé de la planète). Donc le javascript sera toujours activé, c'est une certitude.

Ce que je veux, c'est juste ne pas avoir ces bugs d'affichage. Les css, ça enleverai ce problème de bug en fin de session ?

Message cité 1 fois

omega2

backdafuckup a écrit :

Les css, ça enleverai ce problème de bug en fin de session ?

Je vois pas ce que t'apelle une "fin de session", mais une chôse est sure, c'est que les css fonctionnent même s'il manque la fin de la page. Le javascript par contre risque de se bloquer si on le fait réagir avant qu'il ai récupéré tout le code qu'il a besoin (et donc parfois avant la fin de la récupération de la page)

Quand au site, à par s'il n'est pas sur le net, évite de dire que t'es certain que tout le monde aura javascript d'activé par ce qu'il est conçu pour IE. Déjà, même avec IE on peut désactiver le javascript et en plus ceux qui passeront sur ton site (aussi petit sdoit il) ne le feront pas forcément avec IE.
Mais bon, je veux bien croire que c'est un site qui sortira jamais de l'ordi de ta formation ou de ton ordi à toi.

CNeo

Je n'ai jamais fait de VBScript mais ce que je sais faire c'est du code propre et léger... Un menu en CSS ne fait pas plus de 100 lignes et fonctionne parfaitement... Pour les menus en CSS c'est http://css.alsacreations.com/Galeries-de-menus-en-CSS.

[:ab614] même si cela fait trois fois que je le répète en trois jours.

FORUM HardWare.fr

Programmation

HTML/CSS

Comment améliorer mon menu

Sujets relatifs
améliorer mon menu dynamique	Aidez moi à créer un menu
[XHTML, CSS] Menu avec des balises li et ul	menu deroulant choix multiples
menu en css	mon menu javascript passe "en dessous" de mon anim flash
Menu sous conditions	[CSS] a:hover - menu - overflow - imbrication - div - dl - dd - dt
Pb javascript pour un menu (Map)
Plus de sujets relatifs à : Comment améliorer mon menu

Page générée en 0.070 secondes