Member Avatar for gahhon

Click Here
I want do the same thing as this link posted.
But i don't have any idea how can i start or do with it. :/

  • 2 Contributors
  • 9 Replies
  • 979 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by JorgeM

Recommended Answers

All 9 Replies

Member Avatar for JorgeM

Do you want to create a static menu? does it have to be dynamically created from a data source?

ASP.NET does have menu control, but I generally prefer to build the menu myself. I'm not too impressed with this control.

In any event, for a static navigation menu with multiple submenus, here is a example/demo: Multi-level Navigation Menu that can get you started.

Once you understand how to build the menu, you can use other asp.net controls to help you build it dynamically as well.

Edited by JorgeM
Member Avatar for gahhon
HTML Markup
<ul id="menu">
    //Menu

    <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Report" />
        <ul>
            <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Monthly Reports" />
                <ul>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/MonthlyBudget_Report.aspx" Text="Monthly Expenditure" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/MonthlyExtraIncome_Report.aspx" Text="Monthly Extra Income" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Monthly Total Saving" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/MonthlyLoan_Report.aspx" Text="Monthly Loan" /></li>
                </ul>
            </li>
            <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Yearly Reports" />
                <ul>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/YearlyBudget_Report.aspx" Text="Yearly Expenditure" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/YearlyExtraIncome_Report.aspx" Text="Yearly Extra Income" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="#" Text="Yearly Total Saving" /></li>
                    <li><asp:HyperLink runat="server" NavigateUrl="~/Member/Reports/YearlyLoan_Report.aspx" Text="Yearly Loan" /></li>
                </ul>
            </li>                    
        </ul>
    </li>
</ul>
Css
ul#menu ul ul {
top:0;left:100%;
}

ul#menu ul li:hover ul {
display:block;
}

i applied these code from your shared link..
It cannot show out my third level sub menu when i mouse hover the 2nd level of menu (Monthly Report & Yearly Report)

Member Avatar for JorgeM

You probably missed some CSS.

Here is a working example..

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
ul#menu {
padding:0px;
margin:0px;
width:750px;
list-style:none;
position:relative
}

ul#menu ul {
position:absolute;
left:0;
top:100%;
display:none;
padding:0px;
margin:0px
}

ul#menu li {
display:inline;
float:left;
position:relative
}

ul#menu a {
text-decoration:none;
padding:10px 0px;
width:200px;
background:#604680;
color:#ffffff;
float:left;
text-align:center;
border:1px solid #ffffff;
}

ul#menu a:hover {
background: #cccccc;
color: #333333;
}

ul#menu li:hover ul {
display:block;
}

ul#menu ul a {
width:200px;
}

ul#menu ul li {
display:block;
margin:0px
}

ul#menu ul ul {
top:0;left:100%;
}

ul#menu li:hover ul ul {
display:none;
}

ul#menu ul li:hover ul {
display:block;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <ul id="menu">
      <li><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" Text="Report" />
        <ul>
          <li><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#" Text="Monthly Reports" />
            <ul>
                <li><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Member/Reports/MonthlyBudget_Report.aspx" Text="Monthly Expenditure" /></li>
                <li><asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Member/Reports/MonthlyExtraIncome_Report.aspx" Text="Monthly Extra Income" /></li>
                <li><asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="#" Text="Monthly Total Saving" /></li>
                <li><asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/Member/Reports/MonthlyLoan_Report.aspx" Text="Monthly Loan" /></li> 
            </ul>
          </li>
         <li><asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="#" Text="Yearly Reports" />
             <ul>
                <li><asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="~/Member/Reports/MonthlyBudget_Report.aspx" Text="Monthly Expenditure" /></li>
                <li><asp:HyperLink ID="HyperLink9" runat="server" NavigateUrl="~/Member/Reports/MonthlyExtraIncome_Report.aspx" Text="Monthly Extra Income" /></li>
                <li><asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="#" Text="Monthly Total Saving" /></li>
                <li><asp:HyperLink ID="HyperLink11" runat="server" NavigateUrl="~/Member/Reports/MonthlyLoan_Report.aspx" Text="Monthly Loan" /></li> 
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    </form>
</body>
</html>
commented: Help me Alot. +2
Member Avatar for gahhon

CodePen

Yeah, the 3rd Level Sub-Menu is displayed.
But i want modifiy abit, when you mouse hover to 2nd level menu items,
is seem has some extra space from the right? how can i remove that?

Member Avatar for JorgeM

Can you be more specific about the space you are referring to?

afb06388d6d5bb5449b25dff0617ad5f

Edited by JorgeM
Member Avatar for gahhon

The extra space just at the right hand side of the white color hovering color of each of the sub-menu items.

Member Avatar for JorgeM

Just modify the width of the <ul> element.

74602006aa6988345ea0cdaafe9cd1f8

Edited by JorgeM
commented: Thanks +0
Member Avatar for gahhon

Thanks

Member Avatar for JorgeM

Nice job on the navigation menu. Looks good.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.