Hover Menu in asp.net

Expand Post »

Hello,
How to create hover menu. I want to create exactly as attached in the picture. When i mouse over the attendance, the menu should be displayed as such in the picture.
Anyone help in this?
Thankyou.

Click image for larger version

Name: hover menu.JPG
Views: 352
Size: 11.2 KB
ID: 12847

Last edited by bharanidharanit; Dec 5th, 2009 at 4:14 pm.

bharanidharanit

Reputation Points: 8

Solved Threads: 3

Junior Poster

Offline

140 posts
since Nov 2008

Permalink

Dec 6th, 2009

Re: Hover Menu in asp.net

Hi
It's as simple as that. take a look at the eg:

ASP.NET Syntax (Toggle Plain Text)
<asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#666666" StaticSubMenuIndent="10px">
                        <StaticSelectedStyle BackColor="#1C5E55" />
                        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
                        <DynamicMenuStyle BackColor="#E3EAEB" />
                        <DynamicItemTemplate>
                            <%# Eval("Text") %>
                        </DynamicItemTemplate>
                        <DynamicSelectedStyle BackColor="#1C5E55" />
                        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
                        <Items>
                            <asp:MenuItem Selectable="False" Text="Select" Value="Select"></asp:MenuItem>
                            <asp:MenuItem Text="Product" Value="Items">
                                <asp:MenuItem NavigateUrl="~/Product/Product.aspx" Text="Item Card" Value="Item Card">
                                </asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/GridViewTest.aspx" Text="GridViewTest" Value="GridViewTest">
                                </asp:MenuItem>
 
                                <asp:MenuItem NavigateUrl="~/Product/frmRptProduct.aspx" >
                                </asp:MenuItem>
 
                            </asp:MenuItem>
                            <asp:MenuItem Text="Sales" Value="Sales"></asp:MenuItem>
                            <asp:MenuItem Text="Purchase" Value="Purchase"></asp:MenuItem>
                            <asp:MenuItem Text="Test" Value="Purchase" NavigateUrl="~/ConfimButtonExtenderEg.aspx"></asp:MenuItem>
                            <asp:MenuItem Text="Reports" Value="Reports" NavigateUrl="~/Product/frmRptContainer.aspx" ></asp:MenuItem>
                            <asp:MenuItem Text="DAAB3.1Test" Value="DAAB3.1Test" NavigateUrl="~/Test_DAAB3.aspx" ></asp:MenuItem>
                            <asp:MenuItem Text="Create User" Value="DAAB3.1Test" NavigateUrl="~/createUser.aspx" ></asp:MenuItem>
 
                        </Items>
                    </asp:Menu>
<asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#666666" StaticSubMenuIndent="10px">
                        <StaticSelectedStyle BackColor="#1C5E55" />
                        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
                        <DynamicMenuStyle BackColor="#E3EAEB" />
                        <DynamicItemTemplate>
                            <%# Eval("Text") %>
                        </DynamicItemTemplate>
                        <DynamicSelectedStyle BackColor="#1C5E55" />
                        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
                        <Items>
                            <asp:MenuItem Selectable="False" Text="Select" Value="Select"></asp:MenuItem>
                            <asp:MenuItem Text="Product" Value="Items">
                                <asp:MenuItem NavigateUrl="~/Product/Product.aspx" Text="Item Card" Value="Item Card">
                                </asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/GridViewTest.aspx" Text="GridViewTest" Value="GridViewTest">
                                </asp:MenuItem>
                                
                                <asp:MenuItem NavigateUrl="~/Product/frmRptProduct.aspx" >
                                </asp:MenuItem>
                                
                            </asp:MenuItem>
                            <asp:MenuItem Text="Sales" Value="Sales"></asp:MenuItem>
                            <asp:MenuItem Text="Purchase" Value="Purchase"></asp:MenuItem>
                            <asp:MenuItem Text="Test" Value="Purchase" NavigateUrl="~/ConfimButtonExtenderEg.aspx"></asp:MenuItem>
                            <asp:MenuItem Text="Reports" Value="Reports" NavigateUrl="~/Product/frmRptContainer.aspx" ></asp:MenuItem>
                            <asp:MenuItem Text="DAAB3.1Test" Value="DAAB3.1Test" NavigateUrl="~/Test_DAAB3.aspx" ></asp:MenuItem>
                            <asp:MenuItem Text="Create User" Value="DAAB3.1Test" NavigateUrl="~/createUser.aspx" ></asp:MenuItem>
                            
                        </Items>
                    </asp:Menu>

Mark as solved if it helps you!!!

Last edited by reach_yousuf; Dec 6th, 2009 at 9:19 am.

reach_yousuf

Reputation Points: 12

Solved Threads: 38

Junior Poster

Offline

194 posts
since Sep 2007

Permalink

Dec 13th, 2009

Re: Hover Menu in asp.net

Click to Expand / Collapse Quote originally posted by reach_yousuf ...

Hi
It's as simple as that. take a look at the eg:
ASP.NET Syntax (Toggle Plain Text)
<asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#666666" StaticSubMenuIndent="10px">
                        <StaticSelectedStyle BackColor="#1C5E55" />
                        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
                        <DynamicMenuStyle BackColor="#E3EAEB" />
                        <DynamicItemTemplate>
                            <%# Eval("Text") %>
                        </DynamicItemTemplate>
                        <DynamicSelectedStyle BackColor="#1C5E55" />
                        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
                        <Items>
                            <asp:MenuItem Selectable="False" Text="Select" Value="Select"></asp:MenuItem>
                            <asp:MenuItem Text="Product" Value="Items">
                                <asp:MenuItem NavigateUrl="~/Product/Product.aspx" Text="Item Card" Value="Item Card">
                                </asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/GridViewTest.aspx" Text="GridViewTest" Value="GridViewTest">
                                </asp:MenuItem>
 
                                <asp:MenuItem NavigateUrl="~/Product/frmRptProduct.aspx" >
                                </asp:MenuItem>
 
                            </asp:MenuItem>
                            <asp:MenuItem Text="Sales" Value="Sales"></asp:MenuItem>
                            <asp:MenuItem Text="Purchase" Value="Purchase"></asp:MenuItem>
                            <asp:MenuItem Text="Test" Value="Purchase" NavigateUrl="~/ConfimButtonExtenderEg.aspx"></asp:MenuItem>
                            <asp:MenuItem Text="Reports" Value="Reports" NavigateUrl="~/Product/frmRptContainer.aspx" ></asp:MenuItem>
                            <asp:MenuItem Text="DAAB3.1Test" Value="DAAB3.1Test" NavigateUrl="~/Test_DAAB3.aspx" ></asp:MenuItem>
                            <asp:MenuItem Text="Create User" Value="DAAB3.1Test" NavigateUrl="~/createUser.aspx" ></asp:MenuItem>
 
                        </Items>
                    </asp:Menu>
<asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#666666" StaticSubMenuIndent="10px"> <StaticSelectedStyle BackColor="#1C5E55" /> <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <DynamicHoverStyle BackColor="#666666" ForeColor="White" /> <DynamicMenuStyle BackColor="#E3EAEB" /> <DynamicItemTemplate> <%# Eval("Text") %> </DynamicItemTemplate> <DynamicSelectedStyle BackColor="#1C5E55" /> <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <StaticHoverStyle BackColor="#666666" ForeColor="White" /> <Items> <asp:MenuItem Selectable="False" Text="Select" Value="Select"></asp:MenuItem> <asp:MenuItem Text="Product" Value="Items"> <asp:MenuItem NavigateUrl="~/Product/Product.aspx" Text="Item Card" Value="Item Card"> </asp:MenuItem> <asp:MenuItem NavigateUrl="~/GridViewTest.aspx" Text="GridViewTest" Value="GridViewTest"> </asp:MenuItem> <asp:MenuItem NavigateUrl="~/Product/frmRptProduct.aspx" > </asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Sales" Value="Sales"></asp:MenuItem> <asp:MenuItem Text="Purchase" Value="Purchase"></asp:MenuItem> <asp:MenuItem Text="Test" Value="Purchase" NavigateUrl="~/ConfimButtonExtenderEg.aspx"></asp:MenuItem> <asp:MenuItem Text="Reports" Value="Reports" NavigateUrl="~/Product/frmRptContainer.aspx" ></asp:MenuItem> <asp:MenuItem Text="DAAB3.1Test" Value="DAAB3.1Test" NavigateUrl="~/Test_DAAB3.aspx" ></asp:MenuItem> <asp:MenuItem Text="Create User" Value="DAAB3.1Test" NavigateUrl="~/createUser.aspx" ></asp:MenuItem> </Items> </asp:Menu>
Mark as solved if it helps you!!!

Thankyou, the code is working.

bharanidharanit

Reputation Points: 8

Solved Threads: 3

Junior Poster

Offline

140 posts
since Nov 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in ASP.NET Forum Timeline: Chaging c# to vb.net coding

Next Thread in ASP.NET Forum Timeline: Javascript value in vb.net code

DaniWeb Message

Cancel Changes

User Name
Password