Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1325
  • Last Modified:

Help with Menu Control in ASP.net

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
accmats
Asked:
accmats
  • 3
  • 2
1 Solution
 
gregg1ep00Commented:
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
 
gregg1ep00Commented:
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
 
accmatsAuthor Commented:
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
 
gregg1ep00Commented:
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
 
accmatsAuthor Commented:
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now