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. :/
gahhon 13 Junior Poster
JorgeM 958 Problem Solver Team Colleague Featured Poster
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.
gahhon 13 Junior Poster
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)
JorgeM 958 Problem Solver Team Colleague Featured Poster
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>
gahhon commented: Help me Alot. +2
JorgeM 958 Problem Solver Team Colleague Featured Poster
Can you be more specific about the space you are referring to?
gahhon 13 Junior Poster
The extra space just at the right hand side of the white color hovering color of each of the sub-menu items.
JorgeM 958 Problem Solver Team Colleague Featured Poster
Just modify the width of the <ul> element.
gahhon commented: Thanks +0
gahhon 13 Junior Poster
Thanks
JorgeM 958 Problem Solver Team Colleague Featured Poster
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.