Separater in asp:menu

Hi

I am using <asp:Menu/> control. Inside the control I have 4 links. Between the links I want  a separator '|'.

How can I achieve this?
Regards
Karan Gupta
KaranGuptaAsked:
Who is Participating?
 
Deepak LakkadConnect With a Mentor Commented:
Hi

Try this one

<asp:MenuItem Text="<span style='color:red'>|</span>" Value="|" Enabled="false"></asp:MenuItem>

- Deepak Lakkad
0
 
Alfred A.Commented:
Do you use a SiteMapDataSource?  If you are using Web.Sitemap, you could just add another sitemapnode with the "|" as the title.  For example check the sample sitemap below.  Also note that you should set SiteMapDataSource ShowStartingNode property to false to see the effect below and Menu Orientation set to Horizontal.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home" description="Home" url="~/default.aspx">
    <siteMapNode title="Products" description="Our products"
      url="~/Products.aspx">
      <siteMapNode title="Hardware" description="Hardware choices"
        url="~/Hardware.aspx" />
      <siteMapNode title="Software" description="Software choices"
        url="~/Software.aspx" />
    </siteMapNode>
    <siteMapNode title="|" description="" url="" />
    <siteMapNode title="Services" description="Services we offer"
        url="~/Services.aspx">
      <siteMapNode title="Training" description="Training classes"
        url="~/Training.aspx" />
      <siteMapNode title="Consulting" description="Consulting services"
        url="~/Consulting.aspx" />
      <siteMapNode title="Support" description="Supports plans"
        url="~/Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>
0
 
KaranGuptaAuthor Commented:
Hi Alfred1

I am not using any sitemapsource. I am using like this

<asp:MenuItem Text="link1"></asp:MenuItem>
<asp:MenuItem Text="link2"></asp:MenuItem>
<asp:MenuItem Text="link3"></asp:MenuItem>
<asp:MenuItem Text="link4"></asp:MenuItem>

Now if I add one <asp:menu Text="|"> between link1 and link2 then it will act as a separator as per your suggestion.  But the problem with this approach

1. If the put cursor on the separator I can see the hand cursor on it which is wrong as it should not act as a link.
2. If I apply hover style then it will apply to the separator as well.

Regards
Karan Gupta
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Alfred A.Commented:
Maybe you could just use a table.  For example see below.  Also, why do you have four menus when you could just use one menu and use a sitemapdatasource for the four links?


<table>
     <tr>
        <td>
            <asp:MenuItem Text="link1"></asp:MenuItem>
        </td>
        <td>|</td>
        <td>
            <asp:MenuItem Text="link2"></asp:MenuItem>
        </td>
         <td>|</td>
        <td>
            <asp:MenuItem Text="link3"></asp:MenuItem>
        </td>
         <td>|</td>
         <td>
            <asp:MenuItem Text="link4"></asp:MenuItem>
        </td
    </tr>
</table>

Open in new window

0
 
Deepak LakkadCommented:
Hi

Refer following menu with Separater

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
            <Items>
                <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
                <asp:MenuItem Text="|" Value="|"></asp:MenuItem>
                <asp:MenuItem Text="About Us" Value="About Us"></asp:MenuItem>
                <asp:MenuItem Text="|" Value="|"></asp:MenuItem>
                <asp:MenuItem Text="Services" Value="Services"></asp:MenuItem>
                <asp:MenuItem Text="|" Value="|"></asp:MenuItem>
                <asp:MenuItem Text="Products" Value="Products"></asp:MenuItem>
            </Items>
        </asp:Menu>

Open in new window


- Deepak Lakkad
0
 
Deepak LakkadCommented:
to keep separater disabled use following code

<asp:MenuItem Text="|" Value="|" Enabled="false"></asp:MenuItem>

- Deepak Lakkad
0
 
Alfred A.Commented:
Oops. Ignore my previous post. I didn't realize MenuItems against Menu. So it is just one menu.
0
 
KaranGuptaAuthor Commented:
Hi deepaklakkad

<asp:MenuItem Text="|" Value="|" Enabled="false"></asp:MenuItem>

works but there is one more problem. If the color of menu item is blank and if I disable it then it is changed to white color. Can I set the color of separator.

Regards
Karan Gupta
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.