hi,

 

i wish to be able to apply CSS to my menu control. as I want it to be a horizontal one, that looks like buttons - not links.

does anyone have any samples they'd be willing to share in terms of setting the interaction up and running?

 

Thank you. 

If you want buttons instead of links, then the Menu control isn't the right control; it is designed to display a hierarchical menu with links. You might be better off just using an XmlDataSource pointing at the sitemap file and a Repeater, bound to the data source. You can then create the buttons within the Repeater.

Dave

This is easy but takes a lot of time to understand all of the settings. The example code below still doesn't have the DynamicVerticalOffSet I had with a previous menu I was working on and then deleted without saving [:'(] but going through this a second time is a good way to learn what is possible.  The button is styled as "flat" and my next step with this thing is to turn it into a 2.0 Skin.

.DynamicMenuItemStyle
{
    font-size: .8em;
    
    border-right-style: solid;
    border-right-color: #585880;
    border-right-width: 2px; 
       
    border-left-style: solid;
    border-left-color: #585880;
    border-left-width: 2px; 
}

.MenuControlNoHover a:hover
{
    color: #585880;
}

1    <asp:Menu ID="Menu1" runat="server" 
2        Orientation="Horizontal" 
3        DisappearAfter="250"
4        StaticDisplayLevels="1"
5        MaximumDynamicDisplayLevels="2" 
6        
7        
8        DynamicVerticalOffset="2"
9        DynamicHorizontalOffset="2"   
10      
11       StaticEnableDefaultPopOutImage="true"
12       StaticPopOutImageUrl="Images/smoke_StaticMenuPopOutImage9x8.gif">
13   
14   <StaticMenuStyle   ForeColor="#585880"  />
15   <StaticHoverStyle  CssClass="MenuControlNoHover"  />
16   <DynamicHoverStyle BackColor="#D7D7E4" />
17   
18   
19   <Items>
20       <asp:MenuItem     Text="Filter       "  NavigateUrl="javascript:void(0);"  Value="PickerFilter">
21           <asp:MenuItem Text="By Name" Value="ByName" ToolTip="Filter by first character of name." NavigateUrl="javascript:void(0);" />
22           <asp:MenuItem Text="By Category" Value="ByCategory" ToolTip="Filter by first character of category." NavigateUrl="javascript:void(0);"/>
23           <asp:MenuItem Text="By City" Value="ByCity" ToolTip="Filter by first character of city." NavigateUrl="javascript:void(0);"/>
24           <asp:MenuItem Text="By County" Value="ByCounty" ToolTip="Filter by first character of county." NavigateUrl="javascript:void(0);"/>
25       </asp:MenuItem>
26   </Items>
27   
28   <LevelMenuItemStyles>
29       <asp:MenuItemStyle BackColor="#F8F7F4" ForeColor="#585880" Font-Size=".8em" Font-Bold="true" BorderWidth="1px" BorderColor="#585880" HorizontalPadding=".39em" VerticalPadding=".11em" />
30       <asp:MenuItemStyle BackColor="#F8F7F4" ForeColor="#585880" Font-Size=".8em" Font-Bold="true"  HorizontalPadding=".52em" VerticalPadding=".11em" CssClass="DynamicMenuItemStyle"   />         
31   </LevelMenuItemStyles>
32   
33   </asp:Menu> 

 

This is easy but takes a lot of time to understand all of the settings. The example code below still doesn't have the DynamicVerticalOffSet I had with a previous menu I was working on and then deleted without saving [:'(] but going through this a second time is a good way to learn what is possible.  The button is styled as "flat" and my next step with this thing is to turn it into a 2.0 Skin.

.DynamicMenuItemStyle
{
    font-size: .8em;
    
    border-right-style: solid;
    border-right-color: #585880;
    border-right-width: 2px; 
       
    border-left-style: solid;
    border-left-color: #585880;
    border-left-width: 2px; 
}

.MenuControlNoHover a:hover
{
    color: #585880;
}

1    <asp:Menu ID="Menu1" runat="server" 
2        Orientation="Horizontal" 
3        DisappearAfter="250"
4        StaticDisplayLevels="1"
5        MaximumDynamicDisplayLevels="2" 
6        
7        
8        DynamicVerticalOffset="2"
9        DynamicHorizontalOffset="2"   
10      
11       StaticEnableDefaultPopOutImage="true"
12       StaticPopOutImageUrl="Images/smoke_StaticMenuPopOutImage9x8.gif">
13   
14   <StaticMenuStyle   ForeColor="#585880"  />
15   <StaticHoverStyle  CssClass="MenuControlNoHover"  />
16   <DynamicHoverStyle BackColor="#D7D7E4" />
17   
18   
19   <Items>
20       <asp:MenuItem     Text="Filter       "  NavigateUrl="javascript:void(0);"  Value="PickerFilter">
21           <asp:MenuItem Text="By Name" Value="ByName" ToolTip="Filter by first character of name." NavigateUrl="javascript:void(0);" />
22           <asp:MenuItem Text="By Category" Value="ByCategory" ToolTip="Filter by first character of category." NavigateUrl="javascript:void(0);"/>
23           <asp:MenuItem Text="By City" Value="ByCity" ToolTip="Filter by first character of city." NavigateUrl="javascript:void(0);"/>
24           <asp:MenuItem Text="By County" Value="ByCounty" ToolTip="Filter by first character of county." NavigateUrl="javascript:void(0);"/>
25       </asp:MenuItem>
26   </Items>
27   
28   <LevelMenuItemStyles>
29       <asp:MenuItemStyle BackColor="#F8F7F4" ForeColor="#585880" Font-Size=".8em" Font-Bold="true" BorderWidth="1px" BorderColor="#585880" HorizontalPadding=".39em" VerticalPadding=".11em" />
30       <asp:MenuItemStyle BackColor="#F8F7F4" ForeColor="#585880" Font-Size=".8em" Font-Bold="true"  HorizontalPadding=".52em" VerticalPadding=".11em" CssClass="DynamicMenuItemStyle"   />         
31   </LevelMenuItemStyles>
32   
33   </asp:Menu> 

 

I wanted to create menu like this too. Would it be possible to have second menu line like on this website: www.auctiva.com? It would be second level selection, once user selects the main menu item. For example:

Main Menu (buttons):

Home, Menu1, Menu2, Menu3

Sub Menu (links only)

Meu1_sub1URL, Menu1_ sub2URL, Menu1_sub3URL

The tabbed menu at auctiva.com can be built using the 2.0 Menu control but it would require a hack. Using LinkButtons for a tab which displays a Menu control styled horizontally for example. I've built an instance of what appears at auctiva.com. An exact replication in fact using LinkButtons in the top row and the bottom row. Given the time I would try LinkButtonsin the top row and a Menu control in he bottom row to take advanage of the Menu control and its ability to be populated with an XmlDataSource. Try these suggestions out for yourself...

Thanks for your suggestion. I want to make sure, the menu at the bottom row menu  (links) should change dynamicly depending what is selected in the main row (buttons). It seems they need to be synch together. How did you achieve this? User clicks on tab1, he should get all menu children under tab1 node, tab2 -> all tab2 children.  I would also love to have Sitemap utilized.

 Wonder if you would be so nice to share the code or provide more details...

 Wonder if somebody else was able to do the customization like that of the menu control....

 

Ok, so the top menu bar would be build using Link Buttons.

The Bottom one would be build using menu control. How would you hide the first level of menu on this bar? I am very unclear how to acomplish it.

I guess I could create some onclick event of the top link buttons and than change something dynamicly, yet not sure what... Would it be possible to use just one Sitemap file?

LinkButton1 LinkButton2                                                 <div class="top_row>
==========================================================
Menu1 Menu2                                                          <div class="bottom_row">
...        ...
...        ... 

Take the code I gave you already and use it to actually see how to use a menu control to setup a single instance of a menu that drops down to display menu selections. Put the menu control into a Panel in the bottom row...

<div class="bottom_row">
    <asp:Panel id="Panel1" ...>
        <asp:Menu id="Menu1" ... />
        <asp:Menu id="Menu2" ... />
    </asp:Panel>
</div>

In the click event of LinkButton1 you set Panel1.Visible to false. That will disable the display of all menus in the bottom row. I hope your able to understand how to apply this basic logic.  

 

 

 

Hi, thanks for your reply. I am sorry, but I am still very confused.

1) Why do we need to have so many menu controls on the second bar? Can this be implemented as just one menu control? Can we change the data source for that menu control dynamicly instead? The data source would change pointing to a different start node.. Not sure how to acomplish this...

2) Why do we hide all menu controls in onclick of Link1 button? That does not make any sense. Should not we hide all but Menu1? Should not be Menu1 visible? Than when we click Link2, Menu 2 should be visible, and all other we should hide. Should not be done this way?

3) How do we make data source for those menus? Will they all use one data source? How to configure tahta data source? I understand that data source needs to be pointed to the second level node, so the Site.map works correctly later when I want to generate site map for example...

What we've talked about is one of probably more than a half-dozen ways to build ASP.NET tabbed navigation. I think it would be in your best interest to search the web for other asp.net solutions. Study what others have done. I actually use LinkButtons in the bottom row and haven't learned the Menu control well enough to continue to respond. I do know the Menu Control renders as tables and should be used with the CSS Control Adapters which you can find on asp.net website.

Did somebody implemented this kind of menu using Sitemap and Menu Control? Similar to www.auctiva.com? Please help..

Can anybody help?