begin process at 2012 02 05 04:06:02
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

ASP.Net

 > MENU HORIZONTAL EN ASP.NET COMPATIBLE XHTML ET CSS2

MENU HORIZONTAL EN ASP.NET COMPATIBLE XHTML ET CSS2


 Information sur la source

Note :
9,5 / 10 - par 2 personnes
9,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :ASP.Net Source .NET ( DotNet ) Classé sous :menu, xhtml, html, css, horizontal Niveau :Débutant Date de création :29/05/2004 Date de mise à jour :23/11/2005 11:18:05 Vu / téléchargé :28 776 / 1 951

Auteur : jesusonline

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (7)
Ajouter un commentaire et/ou une note


 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

  • 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>
    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 ...

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

23 novembre 2005 11:18:06 :
mots clés

 Sources du même auteur

Source avec Zip Source .NET (Dotnet) UTILISATION DE LA MÉTHODE SORT ET SORTDIRECTION AVEC UN GRID...
Source .NET (Dotnet) RESPONSE.FILTER : MANIPULATION DU STREAM DE SORTIE ASP.NET
Source avec Zip Source .NET (Dotnet) OPTIMISATION DE LA SERIALISATION JSON POUR LES LIST<T>
Source avec Zip Source .NET (Dotnet) CRAWLABLELINKBUTTON : UPDATEPANEL ET RÉFÉRENCEMENT
Source .NET (Dotnet) POSTBACKCONTROL - COMMUNICATION CLIENT/SERVEUR AVEC LES UPDA...

 Sources de la même categorie

Source avec Zip Source .NET (Dotnet) GUESTBOOK AVEC GRIDVIEW par DanMor498
Source avec Zip CHECKED DROPDOWNLIST par fredzool
Source avec Zip Source avec une capture Source .NET (Dotnet) GRIDVIEW WITH TREEVIEW AND CALLBACK par fredzool
Source avec Zip APPELLER UN WEBSERVICE DEPUIS JAVASCRIPT par fredzool
Source avec Zip Source .NET (Dotnet) MONEY TEXTBOX WITH EMBEDED JAVASCRIPT par fredzool

 Sources en rapport avec celle ci

Source avec Zip GESTION DES SKIN par youdream
Source avec Zip Source .NET (Dotnet) L'INTERFACE IHIERARCHICALENUMERABLE - BINDEZ VOS MENU/TREEVI... par jesusonline
Source avec Zip Source .NET (Dotnet) NAVIGATION PAR ONGLET ENTIEREMENT PARAMETRABLE par mael94420
Source avec Zip Source .NET (Dotnet) TRANSFORMATION XSLT POUR OBTENIR DU CODE XTML VALIDE À INTÉG... par saizonou
Source avec une capture Source .NET (Dotnet) COMPACTEZ VOS CSS par poppyto

Commentaires et avis

Commentaire de fred2003 le 31/05/2004 23:19:59

c pas mal, dommage que cela prenne autant de place.

un peut triste quand même le design.

mais bon, c chacun ces goûts.

bien jouer quand même

Commentaire de herveD le 01/06/2004 12:32:36

Bonjour,

Oui les goûts et les couleurs celà se discute, en tous les cas moi je trouve celà super (et l'article de pompage.net aussi).

D'abords félicitations,celà m'évitera de te le dire à chaque fois :-) , pour les idées contenus dans tous les codes que tu as postés,même si la plupart je les ai stockés pour étude ... quand j'aurai le temps :-( .

D'autant plus intéressant que généré du code XHTML avec VS.NET n'est pas si courant parmi les développeurs  Micorosoft , ni aussi simple que celà (la solution la plus répendue serait d'overrider les webcontrols !). En plus si le code "s'adapte" selon le navigateur il le fait beaucoup mieux avec la dernière version de IE.

Malheureusement  j'ai voulu tester cette solution et celà ne veut pas compiler. Une erreur apparait:
D:\_communs\_devWeb\test\menu_horizontal\Menu.ascx.vb(47): Type 'ImageAleatoireXmlLocationException' non défini.

qui correspond à :
            If New FileInfo(Server.MapPath(ConfigurationSettings.AppSettings("ImageAleatoireXmlLocation"))).Exists = True Then ImageAleatoire.AdvertisementFile = ConfigurationSettings.AppSettings("ImageAleatoireXmlLocation") Else Throw New ImageAleatoireXmlLocationException

Et la même erreur apparait 2 autres fois.

Autres petites questions:
je n'ai pas regardé  mais les balises dd, dl, dt existent dans la norme XHTML ?

Enfin je suis curieux de voir celà fonctionné  notamment  comment tu gères le contenu du milieu vu que tu as une ascx qui regroupes tout?

A+
herve

Commentaire de jesusonline le 01/06/2004 19:11:17 administrateur CS

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 :
&lt;dt id="ImageAleatoiredt" runat="server"&gt;
&lt;span&gt;Images Aleatoire&lt;/span&gt;
&lt;/dt&gt;
&lt;dd id="ImageAleatoiredd" runat="server"&gt;
&lt;ul id="Image_Aleatoire"&gt;
&lt;li&gt;
&lt;p&gt;&lt;asp:adrotator id="ImageAleatoire" runat="server" /&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;asp:literal id="LblDescriptionImageAleatoire" runat="server" /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/dd&gt;

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 :
&lt;body&gt;
&lt;form id="Form1" method="post" runat="server"&gt;
&lt;div class="Milieu"&gt;
Accueil
&lt;/div&gt;
&lt;uc1:menu id="Menu1" runat="server" category="1" /&gt;
&lt;/form&gt;
&lt;/body&gt;

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 :)

Commentaire de herveD le 11/06/2004 16:09:36

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/
-&gt; 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é

Commentaire de jesusonline le 11/06/2004 17:49:05 administrateur CS

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 &lt;uc1:menu id="Menu1" runat="server" category="5" /&gt; je ne pense pas que toi tu puisses facilement ecrire dans la balise &lt;body&gt; avec asp.net.
mais encore la n'est pas le problème, on pourrait tres bien imaginer un div qui entoure le &lt;ul&gt; 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

Commentaire de Sylvain_C le 07/02/2007 16:18:29

Excellent !!!

Il est même possible d'ajouter une image dans l'onglet avec la commande suivante:
<li><A href="test_onglets.aspx"><IMG src="web.gif" border="0" /> test_onglets</A></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...

Commentaire de _ste2a le 02/03/2008 16:40:04

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

merci

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Donner des propriétés à un ASCX ? [ par smoitry ] Bonjour !J'ai un gros soucis, en codant un user control en ASCX et C#.Je m'explique, pour faire, simple, et d&#233;j&#224; tester avant de faire plus [Menu : ASP.NET 2] probleme CSS sous-menu [ par yanne1985 ] SalutJ'utilise un control menu d'asp.net 2j'ai donner à la propriétée DynamicMenuItemStyle une valeur (class css) Problème affichage menu Flash/ou HTML via ASP et Javascript! HELP PLEASE! [ par lataupe78 ] Bonjour! Je suis novice en ASP je me prend la tête depuis 2 jours(ou plutôt 2 nuits sur un problème: Je bosse sur le site Web d'un client: Les pages chargement de menu css au niveau de cache pour serai plu rapide a accecible [ par bouzakher ] sltj'ai une tache urgent a faire, proposer par mon directeur elle consiste a développer un script me permettre de charger le menu de site dans la mémo Problème visuel avec un menu asp.net et un div html [ par clementhindie ] Bonjour à tout le monde,J'ai un soucis de cohabitation entre un menu asp et un div html.Quand je positionne mon curseur sur menu, j'ai bien l'affiche Orientation d'un menu utilisant le Css adapter [ par Fildomen ] Bonjour J'utilise le css friendly adapter pour mon menu asp.net , j'ai mis orientation horizontale , jusque là tout marche très bien , le menu s'affic vb.net - Visual studio 2005 : Menu horizontal et vertical [ par bngvbnet ] Bonjour,J'utilise vs 2005 et vb.netJe veux créer un site qui ressmble à l'image ci-dessous:- un menu horizontal- lorsqu'on clique sur le menu horizont cv en XHTML 1.0 strict + CSS [ par sinthu ] bonjour est ce quelqu'un peut me donner un exemple de cv de cet format car je voudrais creer mon propre cv et je suis debutant dans ce domaine merci lien html dans c# asp.net [ par zekotch ] Salut j'ai mon menu en html. Je développe asp.net Ce que je veux c'est pourvoir avoir accès aux boutons de mon menu en code behind c#. de sorte a y as [html/css] impression de tableau page web avec fichier.css [ par simbabou ] Bonjour Voila, j'ai un fichier .jsp avec un tableau definit dedans en html. Ce tableau est sur deux colonne. Le souci qui ce pose c'est que lors de l


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,858 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales