I know how to create a normal menu and change them the way i want using css, but I dont know how to use images instead of text.

I want to make it look cooler using images so in order to do that, I haven't got any ideas at all :(

I have seen many websites on internet like this and I dont think its a difficult thing to do for some of you here.

Could you please guide me or show me the way forward ?

Thanks.

 

 This is what I have been trying to do so far but the code simply doest show those images :(

Could you please help with this ? Thank you

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/Default.aspx" title="Home" imageName="buttons_01.jpg" description="">
      <siteMapNode url="~/Auction.aspx" title="Food Auction!"  description="Food Auction! (number one in the world)" imageName="buttons_02.jpg"/>
        <siteMapNode url="~/Start.aspx" title="Find and Order"  description="Find and order your food." imageName="buttons_03.gif">
            <siteMapNode url="~/Search.aspx" title="Find Restaurant"  description="Find your food." imageName="buttons_03.gif"/>
        </siteMapNode>
    </siteMapNode>
</siteMap>

and the code to achieve that :

          <asp:SiteMapDataSource ID="srcBuckets" runat="server" ShowStartingNode="False" />


   <ul>
        <li><asp:HyperLink runat="server" ID="lnkHome" ImageUrl='./images/buttons_01.jpg' NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>

 <asp:Repeater runat="server" ID="menu" DataSourceID="srcBuckets" EnableViewState="false">
    <ItemTemplate>
        <li>
            <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl='./images/<%# Eval((SiteMapNode)Container.DataItem)["imageName"]) %>' NavigateUrl='<%# Eval("Url") %>'> <%# Eval("Title") %></asp:HyperLink>

            <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>' EnableViewState="false">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

                <ItemTemplate>
                    <li>
                        <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl='images/<%# ((SiteMapNode)Container.DataItem))["imageName"] %>;' NavigateUrl='<%# Eval("Url") %>'> <%# Eval("Title") %></asp:HyperLink>
                    </li>
                </ItemTemplate>

                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
</asp:Repeater>
    </ul>

I appreciate if you share any information that you might think it will help me.

Thank you.
 

Any body please ? What do you think is wrong with my code ? 

Hi,

Rahabm:

but I dont know how to use images instead of text.

You can set the text of the menuitem to image control, for example:  

<asp:MenuItem ToolTip="Home"  Text="<img runat='server' src='../../image/button-search.gif' />" Value="Home" NavigateUrl="~/Menu/Menu.aspx" >

  Then the menuitem's text will be repalce with an image.

Hope it helps.

Thanks, but I want to use SiteMap xml file, this is kind of hard coded right ? i need something more dynamic ?

Maybe something like this?

  Private hshPages As Hashtable
  Private Sub loadHash()
    hshPages = New Hashtable
    '-- Add Pages and images for them to the hash
    hshPages.Add("/Test/default.aspx".ToLower(), "help.jpg")
  End Sub


  Protected Sub Menu1_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs) Handles Menu1.MenuItemDataBound
    If hshPages.Contains(e.Item.NavigateUrl.ToLower()) Then
      e.Item.Text = "<a href=""" & e.Item.NavigateUrl & """><image border=""0px""  src=""" & hshPages.Item(e.Item.NavigateUrl.ToLower()).ToString() & """ /></a>"
    End If
  End Sub

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    loadHash()
  End Sub

I did somethign very similar to tande's example. I used the sitemap xml file and set a custom property of "ImageUrl" (Sample code below). After that I used the menuitemsdatabound event and assigned the SiteMapNodes's ImageUrl value to the MenuItems ImageUrl property. Let me know if this helps.

//Sitemap example 

<siteMapNode>

</siteMapNode>

//MenuItemDataBound Example

If node("ImageUrl") IsNot Nothing Then          //Checks if the node has a ImageUrl property assigned

e.Item.Text = String.Empty       //This code removes the text from the SiteMap Node. This could possibly also be done by leaving the Title property empty for the SiteMapNode

End If

What would be the code in C# ? 

protected void MenuItemDataBound(object sender, System.Web.UI.WebControls.MenuEventArgs e)
{
MenuItem item = (MenuItem)e.Item;
SiteMapNode node = (SiteMapNode)item.DataItem;

if (node("ImageUrl") != null)
{
item.ImageUrl = node("ImageUrl");
item.Text = string.Empty;
}
}

its working great