Menu horizontal en asp.net compatible xhtml et css2

Soyez le premier à donner votre avis sur cette source.

Vue 40 620 fois - Téléchargée 2 295 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.

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

Ajouter un commentaire Commentaires
Messages postés
4
Date d'inscription
lundi 11 juillet 2005
Statut
Membre
Dernière intervention
14 mai 2008

Super script
excellent
Est-il possible de faire des sous catégories ?

merci
Messages postés
1
Date d'inscription
jeudi 2 novembre 2006
Statut
Membre
Dernière intervention
7 février 2007

Excellent !!!

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...
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
28
oui ta technique est pas mal, elle est plutot original mais je prefere la mienne car je ne vois pas comment tu ferais pour implementer aussi facilement le menu dans une page aspx moi pour changer l'onglet j'ai juste a changer category dans je ne pense pas que toi tu puisses facilement ecrire dans la balise avec asp.net.
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
Messages postés
5
Date d'inscription
mardi 24 décembre 2002
Statut
Membre
Dernière intervention
30 septembre 2004

Bonjour,
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é
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
28
l'erreur provient du fait que j'ai mis un petit truc pour les images aleatoires , et j'ai pas pensé qu'il aurait pu faire bugger le truc, donc pour resoudre ce problème tu supprimes tout ca dans le .ascx :
<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 :)
Afficher les 7 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.