Solved

Help with Menu Control in ASP.net

Posted on 2006-06-21
5
1,320 Views
Last Modified: 2010-07-27
I have created a menu control for site navagation on my web page.  I have given it a width of 150px.  I also applied an Auto Format so it would have mouse over functions, etc.  The problem is that you have to click on the Menu Item Text for your hyperlink to work.  Becuase my menu has a width of 150px, I have empty space to the right of most of my link descriptions.  But when you roll the mouse the select menu item background changes as it should.  But if you don't mouse click on the text, then the menu doesn't work.  

How can I insure that the link will work if they click anywhere within the menu item region?

Thanks!!!
0
Comment
Question by:accmats
  • 3
  • 2
5 Comments
 
LVL 4

Expert Comment

by:gregg1ep00
ID: 16953158
You can use the <StaticItemTemplate> and <DynamicItemTemplate> to do something like this:

<asp:Menu ID="mnu" runat="server" Orientation="horizontal">
      <StaticItemTemplate>
            <div
            onclick="window.navigate('<%# ResolveUrl( (string) Eval("NavigateUrl") ) %>')">
                  <asp:HyperLink
                  ID="lnk"
                  runat="server"
                  Text='<%# Eval("Text") %>'
                  NavigateUrl='<%# Eval("NavigateUrl") %>' />
            </div>
      </StaticItemTemplate>
      <DynamicItemTemplate>
            <div
            onclick="window.navigate('<%# ResolveUrl( (string) Eval("NavigateUrl") ) %>')">
                  <asp:HyperLink
                  ID="lnk"
                  runat="server"
                  Text='<%# Eval("Text") %>'
                  NavigateUrl='<%# Eval("NavigateUrl") %>' />
            </div>
      </DynamicItemTemplate>
</asp:Menu>
0
 
LVL 4

Expert Comment

by:gregg1ep00
ID: 16953238
Actually, it's working on my system without all the javascript stuff in the client-side onclick handler.  So it looks like the javascript stuff is unnecessary.

<asp:Menu ID="mnu" runat="server" Orientation="horizontal">
      <StaticItemTemplate>
            <div
            style="width:150px;">
                  <asp:HyperLink
                  ID="lnk"
                  runat="server"
                  Text='<%# Eval("Text") %>'
                  NavigateUrl='<%# Eval("NavigateUrl") %>' />
            </div>
      </StaticItemTemplate>
      <DynamicItemTemplate>
            <div
            style="width:150px;">
                  <asp:HyperLink
                  ID="lnk"
                  runat="server"
                  Text='<%# Eval("Text") %>'
                  NavigateUrl='<%# Eval("NavigateUrl") %>' />
            </div>
      </DynamicItemTemplate>
</asp:Menu>
0
 

Author Comment

by:accmats
ID: 16956879
Thanks for your reply.  That worked but is there a way to keep the text from looking like a hyperlink and taking on hyperlink type styles like being underlined and hyperlinked font color?

Thanks for all your help!
0
 
LVL 4

Accepted Solution

by:
gregg1ep00 earned 250 total points
ID: 16956998
You can do that with CSS.  The rule you want to use is:

.MenuItem a,
.MenuItem span
{
   text-decoration: none;
   color: black;
}

.MenuItem .Hover a,
.MenuItem .Hover span
{
   text-decoration: none;
   color: white;
}

Of course, you'll want to adapt this to the CSS you already have for your <asp:Menu> control.  If you're not using any CSS stylesheets, you can use inline styles like this:
<asp:Menu ID="mnu" runat="server" Orientation="horizontal">
     <StaticItemTemplate>
          <div
          style="width:150px;">
               <asp:HyperLink
               ID="lnk"
               runat="server"
               Text='<%# Eval("Text") %>'
               NavigateUrl='<%# Eval("NavigateUrl") %>'
               ForeColor="black"
               Font-Underline="false" />
          </div>
     </StaticItemTemplate>
     <DynamicItemTemplate>
          <div
          style="width:150px;">
               <asp:HyperLink
               ID="lnk"
               runat="server"
               Text='<%# Eval("Text") %>'
               NavigateUrl='<%# Eval("NavigateUrl") %>'
               ForeColor="black"
               Font-Underline="false" />
          </div>
     </DynamicItemTemplate>
</asp:Menu>


Hope that helps!  ;)
0
 

Author Comment

by:accmats
ID: 16960314
Awsome answer.  Thanks for all your help.  I have added an additional question that is related to this one if you think you might can answer it.  THANKS AGAIN!

http://www.experts-exchange.com/Programming/Programming_Languages/Dot_Net/ASP_DOT_NET/Q_21895574.html
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question