Menu horizontal en asp.net compatible xhtml et css2
4/5 (7 avis)
Vue 41 274 fois - Téléchargée 2 342 fois
Description
Pour mon futur site, je voulais qu'il soit en XHTML et CSS2, j'ai donc essayé de trouver un menu qui me faisait ca.
J'ai en trouvé un ici : http://pompage.net/pompe/portescoulissantes2/
il suffisait d'avoir un fichier XHTML ayant cette structure :
<div id="header">
<ul id="MenuHorizontal" runat="server">
<li><a href="default.aspx">Accueil</a></li>
<li><a href="chambres.aspx">Chambres d'Hotes</a></li>
<li><a href="vins.aspx">Vins</a></li>
<li><a href="#">Phototèque</a></li>
<li><a href="contacts.aspx">Contacts</a></li>
</ul>
</div>
et une simple liaison à fichier de style, est le tour été joué
pour cela j'ai voulu créer un controle utilisateur nommé menu.ascx, et il suffirait de rajouter ce controle dans chacune de mes pages, choses que j'ai faites ca marchait tres bien sauf que cq page est un tout petit peu differente puisqu'il faut lui assigner une categorie qui mettre id=current sur le bon onglet.
pour resoudre ce problème j'ai rajouté une propriété, ainsi lorsque j'insere mon controle j'ai juste à mettre :
<uc1:menu id="Menu1" runat="server" category="5" />
ainsi ce sera l'onglet N°5 qui sera actif
mais comment faire cela avec du code ?
pour ca rien de plus simple XHTML et du HTML mais compatible XML, et tout le monde sait que .net et xml sont amis. J'ai donc cherché à recuperer le code XHTML pour faire le menu et pour faire ceci, j'ai fait :
Dim doc As New XmlDocument
doc.LoadXml("<ul>" & MenuHorizontal.InnerText & "</ul>")
c'est pour ca que j'ai rajouté un runat=server sur la balise ul
maintenant qu'on a notre fichier xml, rien de plus simple il nous suffit de rajouter l'attribut id=current, ou l'on a envie puis de tout reecrire, c'est ce que permet de faire ce code :
Dim mNodeList As XmlNodeList = doc.SelectNodes("//li")
Dim i As Integer
For Each mNode As XmlNode In mNodeList
If (i + 1) = _Category Then
Dim mAttrib As XmlAttribute = doc.CreateAttribute("id")
mNode.Attributes.Append(mAttrib).Value = "current"
Exit For
End If
i += 1
Next
MenuHorizontal.InnerHtml = Replace(Replace(doc.InnerXml, "<ul>", ""), "</ul>", "")
Vous trouverez dans le zip, le fichier de style utilisé, il y a bien sur bcp d'autre chose dedans, puisqu'il comporte tout les autres styles de mon site.
vous aurez aussi dans le menu.ascx une partie pour des images aleatoires, je vous laisse decouvrir ca, si ca marche pas c'est peut etre car j'ai pas tout mis ce qui est necessaire, donc supprimer le. Je pense bientot le mettre en source.
PS: puisque le site est 100% compatible XHTML 1.0 transitional (pas plus à cause du viewstate ... le site marche mieux sous firefox & co que sous IE car IE n'aime pas pas beaucoup les standards ...
J'attend vos commentaires ...
J'ai en trouvé un ici : http://pompage.net/pompe/portescoulissantes2/
il suffisait d'avoir un fichier XHTML ayant cette structure :
<div id="header">
<ul id="MenuHorizontal" runat="server">
<li><a href="default.aspx">Accueil</a></li>
<li><a href="chambres.aspx">Chambres d'Hotes</a></li>
<li><a href="vins.aspx">Vins</a></li>
<li><a href="#">Phototèque</a></li>
<li><a href="contacts.aspx">Contacts</a></li>
</ul>
</div>
et une simple liaison à fichier de style, est le tour été joué
pour cela j'ai voulu créer un controle utilisateur nommé menu.ascx, et il suffirait de rajouter ce controle dans chacune de mes pages, choses que j'ai faites ca marchait tres bien sauf que cq page est un tout petit peu differente puisqu'il faut lui assigner une categorie qui mettre id=current sur le bon onglet.
pour resoudre ce problème j'ai rajouté une propriété, ainsi lorsque j'insere mon controle j'ai juste à mettre :
<uc1:menu id="Menu1" runat="server" category="5" />
ainsi ce sera l'onglet N°5 qui sera actif
mais comment faire cela avec du code ?
pour ca rien de plus simple XHTML et du HTML mais compatible XML, et tout le monde sait que .net et xml sont amis. J'ai donc cherché à recuperer le code XHTML pour faire le menu et pour faire ceci, j'ai fait :
Dim doc As New XmlDocument
doc.LoadXml("<ul>" & MenuHorizontal.InnerText & "</ul>")
c'est pour ca que j'ai rajouté un runat=server sur la balise ul
maintenant qu'on a notre fichier xml, rien de plus simple il nous suffit de rajouter l'attribut id=current, ou l'on a envie puis de tout reecrire, c'est ce que permet de faire ce code :
Dim mNodeList As XmlNodeList = doc.SelectNodes("//li")
Dim i As Integer
For Each mNode As XmlNode In mNodeList
If (i + 1) = _Category Then
Dim mAttrib As XmlAttribute = doc.CreateAttribute("id")
mNode.Attributes.Append(mAttrib).Value = "current"
Exit For
End If
i += 1
Next
MenuHorizontal.InnerHtml = Replace(Replace(doc.InnerXml, "<ul>", ""), "</ul>", "")
Vous trouverez dans le zip, le fichier de style utilisé, il y a bien sur bcp d'autre chose dedans, puisqu'il comporte tout les autres styles de mon site.
vous aurez aussi dans le menu.ascx une partie pour des images aleatoires, je vous laisse decouvrir ca, si ca marche pas c'est peut etre car j'ai pas tout mis ce qui est necessaire, donc supprimer le. Je pense bientot le mettre en source.
Source / Exemple :
Protected WithEvents MenuHorizontal As System.Web.UI.HtmlControls.HtmlGenericControl
#Region "MenuHorizontal"
Private _Category As Integer
Public Property Category() As Integer
Get
Return _Category
End Get
Set(ByVal Value As Integer)
_Category = Value
End Set
End Property
Private Sub MenuHorizontal_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MenuHorizontal.Load
Dim doc As New XmlDocument
doc.LoadXml("<ul>" & MenuHorizontal.InnerText & "</ul>")
Dim mNodeList As XmlNodeList = doc.SelectNodes("//li")
Dim i As Integer
For Each mNode As XmlNode In mNodeList
If (i + 1) = _Category Then
Dim mAttrib As XmlAttribute = doc.CreateAttribute("id")
mNode.Attributes.Append(mAttrib).Value = "current"
Exit For
End If
i += 1
Next
MenuHorizontal.InnerHtml = Replace(Replace(doc.InnerXml, "<ul>", ""), "</ul>", "")
End Sub
#End Region
dans l'aspx :
<div id="header">
<ul id="MenuHorizontal" runat="server">
<li><a href="default.aspx">Accueil</a></li>
<li><a href="chambres.aspx">Chambres d'Hotes</a></li>
<li><a href="vins.aspx">Vins</a></li>
<li><a href="#">Phototèque</a></li>
<li><a href="contacts.aspx">Contacts</a></li>
</ul>
</div>
Conclusion :
PS: puisque le site est 100% compatible XHTML 1.0 transitional (pas plus à cause du viewstate ... le site marche mieux sous firefox & co que sous IE car IE n'aime pas pas beaucoup les standards ...
J'attend vos commentaires ...
Codes Sources
A voir également
- Menu horizontal en asp.net compatible xhtml et css2
- Menu en c - Forum C
- Menu php ✓ - Forum PHP
- Créer un menu principal - Forum PHP
- Retour au menu principal - Forum C
- Javascript horizontal menu ✓ - Forum Javascript / DHTML
Du même auteur (jesusonline)
-
Entity framework - avoir un include typé
-
Utilisation de la méthode sort et sortdirection avec un gridview et ajout des flèches haut/bas
-
Webtestplugin - ignorer des urls lors d'un test web visual studio
-
Mecanisme de synchronisation de thread - monitor, mutex, semaphore, resetevent
-
Response.filter : manipulation du stream de sortie asp.net
2 mars 2008 à 16:40
excellent
Est-il possible de faire des sous catégories ?
merci
7 févr. 2007 à 16:18
Il est même possible d'ajouter une image dans l'onglet avec la commande suivante:
<li>[test_onglets.aspx test_onglets]</li>
Il ne faut juste pas oublier le slash de fin dans la balise IMG.
C'était peut-être évident pour vous, mais je débute alors soyez indulgent...
11 juin 2004 à 17:49
mais encore la n'est pas le problème, on pourrait tres bien imaginer un div qui entoure le mais pour pouvoir ecrire l'attribut id avec asp.net il va falloir ruser, et je pense que finalement ta méthode sera beaucoup plus complexe que la mienne :)
mais une chose est sur les standards c'est comme .net que du bonheur :p
11 juin 2004 à 16:09
Je suis reparti dans ton exemple et je pense qu'il y a plus simple. Il suffit en effet en effet de mettre l'id correspondant à la rubrique dans la balise body.
Tout est expliqué dans http://pompage.net/pompe/portescoulissantes2/
-> paragragraphe: cibler des onglets et ça marche :-)
Simple à implémenter, un peu plus complexe à comprendre: utilisation des selecteurs descendants.
Les standards c'est vraiment génial
a+
hervé
1 juin 2004 à 19:11
<dt id="ImageAleatoiredt" runat="server">
Images Aleatoire
</dt>
<dd id="ImageAleatoiredd" runat="server">
<li>
</li>
<li></li>
</dd>
et dans le code .vb il faut supprimer tout ce qui est dans la region nommé "AdRotator ImageAleatoire" je reposterais une source dessus plus tard
Je pense que le problème vient de là.
sinon pour le design il est xhtml compatible, j'ai testé avec : http://validator.w3.org/check?uri=http://www.google.fr
pour ce qui est du code XHTML compliant généré par asp, je crois que mono le fait, et d'apres les build de asp.net 2 ce sera aussi pris en charge (bonne nouvelle)
le contenu du milieu c'est rien de compliqué j'ai une simple div class=milieu et j'ecris la dedans. Ca ressemble à ca :
<form id="Form1" method="post" runat="server">
Accueil
</form>
comme ca tout est géré par les CSS
pour ce qui est du design: couleur forme etc...
j'ai mis le fichier de style dans
Style/basic/styles.css et dans le dossier basic les images ainsi, je pourrais tres bien avoir un dossier Style/rose/ et mettre un autre Design, j'inclus dans la page les deux, et avec Firefox, j'ai la possibilité de choisir le style que je veux ...
Merci à vous deux pour vos commentaires :)
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.