Menu horizontal en asp.net compatible xhtml et css2

Télécharger le projet
Commenter

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.

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 ...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (jesusonline)