Solved

Help with Menu Control in ASP.net

Posted on 2006-06-21
5
1,318 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

747 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now