Help with adding links to Menu in ASP 2.0

[easyeman]

Hey, well I got the header to look great and work like I wanted (I ended up using CSS and it all works fine so I'm glad that's done haha). I actually have the menu looking pretty much like I want it but am just having one small problem I need some guidance on. I used and XML file and CSS to populate and help the appearance of the menu. Basically it all looks just like I want it and works somewhat with just one little thing. I want it to be where you can select the bar itself and have it link to the page, whereas right now it only lets you do that by selecting the text in the menu item. So my question is how can I get it set to work so the user can just highlight the bar the menu item is on to go to that page instead of selecting the text.

To help clarify in case my wording is off, here's a picture of how the menu looks (so you see how I set it up and what I mean by selecting this and that): http://i5.photobucket.com/albums/y165/easyeman/menu.jpg

And I posted a snipit of the XML code and the CSS just so you see what I did. (not all the code of course since you just need to see a section of it). I'm guessing it's how I coded it and I need to change something for it to work right...So I guess my question is what do I need to do to make the menu function like I want it to? Any help would be great. It's nothing difficult I'm sure just something I'm overlooking and for some reason I just can't get it fixed right. Thanks again for the help!!

XML:

<?xml version="1.0" encoding="utf-8" ?>
<Menu>
  <PSMenu>
  <MenuItem url="~/default.aspx" title="Home" />
  <MenuItem url="~/ProductsList.aspx?CategoryID=4000" title="Accessories">
    <MenuItem url="~/ProductsList.aspx?CategoryID=0309" title="Bags" />
    <MenuItem url="~/ProductsList.aspx?CategoryID=4030" title="Glasses" />
    <MenuItem url="~/ProductsList.aspx?CategoryID=4040" title="Hats" />
    <MenuItem url="~/ProductsList.aspx?CategoryID=4050" title="Knives & Tools" />
    <MenuItem url="~/ProductsList.aspx?CategoryID=4060" title="Ties" />
    <MenuItem url="~/ProductsList.aspx?CategoryID=4090" title="Other" />
  </MenuItem>
  <MenuItem url="~/ProductsList.aspx?CategoryID=4100" title="Badges & Insignia">
      <MenuItem url="~/info/blackinton.aspx" title="Badges" />
      <MenuItem url="~/ProductsList.aspx?CategoryID=4120" title="Insignias" />
      <MenuItem url="~/ProductsList.aspx?CategoryID=4140" title="Wallets" />

CSS:

body
{
}
.menu,a.menu
{
    font-size: 9px;
    font-family: Verdana;
    font-weight: bold;
    color: white;
    padding: 1px;
    background-color: #0000ff;
    cursor: hand;
}

.static,a.static
{
    font-size: 9px;
    font-family: Verdana;
    font-weight: bold;
    color: white;
    padding: 1px;
    background-color: #0000ff;
    cursor: hand;
}

.menuhighlight,a.menuhighlight
{
    font-size: 9px;
    font-family: Verdana;
    font-weight: bold;
    color: black;
    padding: 1px;
    background-color: #00AFFF;
    cursor: hand;
}

 

[easyeman]

Also, here's the code for the Menu part in the Master Page...maybe this will help. I guess it is something in this code that needs to be fixed for the menu to allow a link for the whole bar and not just the words. Figured this would help so I posted it. I'll check through to see what it is all doing, and if anyone wants to help that's great too. But I guess it has to be here since the other areas seem to be fine and don't fix it. Thanks!

<tr valign="top">
             <td align="left" colspan="2" width="150">
                        <asp:Menu ID="PSMenu" runat="server" DataSourceID="XmlDataSource1" Width="143px" MaximumDynamicDisplayLevels="1" 
ForeColor="White" StaticPopOutImageUrl="images/menu.gif" StaticEnableDefaultPopOutImage="False">
                            <DataBindings>
                                <asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="url" TextField="title" />
                            </DataBindings>
                            <StaticMenuItemStyle CssClass="menu" />
                            <StaticSelectedStyle CssClass="menu" />
                            <DynamicMenuItemStyle CssClass="menu" />
                            <StaticMenuStyle CssClass="menu" />
                            <DynamicHoverStyle CssClass="menuhighlight" />
                            <DynamicMenuStyle CssClass="menu" />
                            <DynamicSelectedStyle CssClass="menu" />
                            <StaticHoverStyle CssClass="menuhighlight" />
                        </asp:Menu>
                                </td>
                            </tr>

 

[JohnH]

Put a Div tag with OnClick Javascript in DynamicItemTemplate to achieve this:

<div onclick="navigate('<%#Eval("NavigateUrl")%>')"><%#Eval("Text")%></div>

Afterwards the asp:Menu source will look like this:

<asp:Menu ID="PSMenu" runat="server" DataSourceID="XmlDataSource1" Width="143px" MaximumDynamicDisplayLevels="1" ForeColor="White"
StaticPopOutImageUrl="images/menu.gif" StaticEnableDefaultPopOutImage="False">
<DataBindings>
<asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="url" TextField="title" />
</DataBindings>
<StaticMenuItemStyle CssClass="menu" />
<StaticSelectedStyle CssClass="menu" />
<DynamicMenuItemStyle CssClass="menu" />
<StaticMenuStyle CssClass="menu" />
<DynamicHoverStyle CssClass="menuhighlight" />
<DynamicMenuStyle CssClass="menu" />
<DynamicSelectedStyle CssClass="menu" />
<StaticHoverStyle CssClass="menuhighlight" />
<DynamicItemTemplate>
<div onclick="navigate('<%#Eval("NavigateUrl")%>')"><%#Eval("Text")%></div>
</DynamicItemTemplate>
</asp:Menu>

 

[easyeman]

Thanks for the help. It didn't seem to work though. It still has the menu where you cannot click in the bar, but now it just has the subcategories appear in a wider bar but with the same effect so it just made it worse. Not sure why it won't work right. I've had several suggestions and tried them and well they don't see to have it work right.

Is there anything else I can do? Would I have to recode it? I'd hate that because it's appearing just like I want it but it just won't let you click anywhere in the bar...it has to be the link. I'll mess around with your idea to see if I can come up with anything. IF anyone else has some suggestions or help I'd appreciate it. If I can get this figured out I'd have the site done.

 

[JohnH]

I don't know why it is different when you run it, because the onclick remedy does exactly that for my menuitems, it lets me click anywhere in the menuitem "bar" to navigate instead of only directly on the text.

 

[easyeman]

I don't know why it is different when you run it, because the onclick remedy does exactly that for my menuitems, it lets me click anywhere in the menuitem "bar" to navigate instead of only directly on the text.

Would it have to do with it being in ASP 2.0? The website I'm using is running with that so maybe the Javascript is working differently with it somehow. I'm not sure. But yeah I put that Javascript in and it did not work as expected. Not sure why it wouldn' tsince you said it worked for you. Is there maybe something that does not allow that in ASP 2.0? Or maybe it's in Firefox. Actually when I ran it I was using Firefox so maybe it does work in IE, but not that. Anyway to maybe solve that in case it really does work but does not show up right in Firefox? I'll test it again in IE to see if that works, which is probably does. Thanks!

 

[easyeman]

Hey, I may have something but it's not working 100% correctly. Instead of using the Javascript and stuff, I added something to the CSS and it seems to be close to working.

I put in a display: block; line in the menuselected property and right now it let's me do what I want for some, but the sub categories still do not work and it only works for categories that have subs. However, it's better than nothing and it at least is working so maybe we can build off of that. It's lclose though. Anyone know CSS well enough to help? I'm not an expert and this is something I found just messing around, but I'd like to hopefully get this working with CSS and not Javascript. Anyway, just let me know if there's anything else I can do to get it to work.

.menuhighlight,a.menuhighlight
{
    font-size: 9px;
    font-family: Verdana;
    font-weight: bold;
    color: black;
    padding: 1px;
    background-color: #00CFFF;
    cursor: pointer;
    display: block; //what I added in
}