Chào mọi người, có rất nhiều bạn đọc bảo mình viết bài hướng dẫn về cách tạo menu đa cấp trong ASP.Net, hôm nay mình cũng chia sẻ cách tạo menu đơn giản trong ASP.Net, cách làm sau đây phù hợp cho cách bạn mới học ASP.Net…
Nói đến Lập trình WEB ASP.Net thì mình không chuyên nên cách làm menu này được đánh giá là củ chuối nhất trong các cách tuy nhiên bù lại rất dể hiểu, dễ làm và có thể giúp cách bạn sinh viên hoàn thành đồ án của mình.
Kiểu menu này là Menu Glossy Accordion đây là một trong những dạng menu website đẹp vào đơn giản nhất, bạn có thể xem demo tại http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm. Ở đây có cách sử dụng và hướng dẫn chèn vào trong HTML.
Sau khi đã down về bạn để đó, mình sẽ giới thiệu cho các bạn dữ liệu mà mình sử dụng để nắm được demo của mình trong bài hôm nay. Mình có một bảng về thể loại sản phẩm và bảng loại sản phẩm giống như demo các bài trước đây.
Mô tả CSDL tạo menu trong ASP.Net
Bạn copy thư mục down về vào thư mục gốc của website bạn, tiếp đến tạo một trang mới trong dự án web ASP.Net của bạn, vào trong thẻ head copy đoạn code sau vào.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!--
<script type="text/javascript" src="GlossyMenu/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="GlossyMenu/ddaccordion.js"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
<style type="text/css">
.glossymenu
{
font-family: "Times New Roman", Times, serif;
padding: 0;
width: 166px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
margin-top: 5px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
}
.controlRight {
width: 188px;
}
.glossymenu a.menuitem{ background: black url(GlossyMenu/glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
color: white; display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none;}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; }
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute; top: 5px; right: 5px; border: none; }
.glossymenu a.menuitem:hover{ background-image: url(GlossyMenu/glossyback2.gif); }
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none; margin: 0; padding: 0; }
.glossymenu div.submenu ul li{ border-bottom: 1px solid blue; }
.glossymenu div.submenu ul li a{ display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black; text-decoration: none; padding: 2px 0; padding-left: 10px; }
.glossymenu div.submenu ul li a:hover{ background: #DFDCCB; colorz: white; }
#cuon
{
width: 200px;
}
.style1
{
height: 21px;
}
</style>
-->
|
Bạn chú ý lại đường dẫn của các file sao cho hợp lý và tiến hành bước tiếp theo. Đến cho nào trong trang bạn muốn hiển thị menu bạn copy phần code này vào trong phần source:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!--
<div class="glossymenu">
<%
DataProvider mnData = new DataProvider();
string sqlCL = "select * from Categories Where Visible = 1";
foreach (System.Data.DataRow r in mnData.get(sqlCL).Tables[0].Rows)
{
Response.Write("<a class='menuitem submenuheader' href=# >"+r["CatName"].ToString()+"</a>");
Response.Write("<div class='submenu'>");
Response.Write("<ul>");
int idcl = int.Parse(r["CatID"].ToString());
string sqlloai = "select * from SortProduct where CatID = '" + idcl + "' and Visible = 1";
foreach (System.Data.DataRow rl in mnData.get(sqlloai).Tables[0].Rows)
{
int idlloai = int.Parse(rl["SorID"].ToString());
Response.Write("<li><a href= SanPhamTheoLoai.aspx?SorID=" + idlloai + "&CatID=" + idcl + ">"+rl["SorName"].ToString()+"</a></li>");
}
Response.Write("</ul>");
Response.Write("<img src="+"images/iconmenu.png"+" style='margin: 10px 5px' />");
Response.Write("</div>");
}
%>
</div>
-->
|
Giải thích:
Đên đây coi như mọi việc đã gần hoàn chỉnh, bây giờ bạn nhập dữ liệu mẫu để test menu của ta có hoạt động hay không.
Dữ liệu mẫu cho menu trong ASP.Net
Và kết quả ta thu được ngoài giao diện.
Menu đa cấp trong ASP.Net
Kết luận: Cách này được xem là không hay tuy nhiên với một menu đa cấp như thế này bạn có thể dùng cho các đồ án ở lớp… Còn rất nhiều cách khác để làm điều này, mình muốn giới thiêu với bạn dùng TreeView trong ASP.Net, bạn download file hướng dẫn làm menu bằng TreeView khá là chi tiết bằng file MS Word, Chúc mọi người thành công!
Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies
COD is a Drupal distribution to create sites for the organization of conventions and events. COD is an acronym from Conference Organizing Distribution.
Nếu bạn chỉ marketing bằng một ngôn ngữ thì bạn đang lãng phí trên 64.8% tiềm năng marketing của mình. Bởi vì 64.8% thế giới đang lướt web bằng các ngôn ngữ khác với tiếng Anh.
Ngày 11/2, tuyến cáp quang biển Liên Á (IA) đã xảy ra sự cố đứt cáp tại vị trí cách HongKong khoảng hơn 70 km và gây ảnh hưởng đến tốc độ truy cập Internet của Việt Nam.
