22/11/2011, 19:17
Mình code lại bằng PHP + MySQL bạn tham khảo nhé big green
Code create table + insert sample data:
- Code:
--
-- Table structure for table `menu`
--
CREATE TABLE IF NOT EXISTS `menu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(30) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL,
`parentid` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;
--
-- Dumping data for table `menu`
--
INSERT INTO `menu` (`id`, `name`, `parentid`) VALUES
(1, 'a', 0),
(2, 'b', 4),
(3, 'c', 4),
(4, 'd', 1),
(5, 'e', 1),
(6, 'f', 0),
(7, 'g', 6),
(8, 'h', 6);
code file index.php
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mutil level menu code by nhtera</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<?php
$conn=mysql_connect("localhost", "root", "") or die("can't connect database");
mysql_select_db("testmenu",$conn);
$mn = "";
function menu($id)
{
global $mn;
$sql = "select * from menu where parentid=".$id;
$query = mysql_query($sql);
while($row = mysql_fetch_assoc($query))
{
$mn.= "<li><a href='#'>".$row['name']."</a><ul>";
menu($row['id']);
$mn.= "</ul></li>";
}
}
menu(0);
$mn = str_replace("<ul></ul>", "", $mn);
echo '<div id="wrapper"><div id="mainNav"><h1>Main Menu</h1><ul>'.$mn.'</ul></div></div>';
?>
</body>
</html>
code file styles.css
- Code:
/* CSS Document */
*{margin:0; padding:0;}
#wrapper{
width: 500px;
margin: 40px auto;
line-height: 2em;
font-size: 12px;
}
/******Menu******/
#mainNav {
width: 200px;
}
#mainNav h1 {
font-size:14px;
text-align: center;
background: #3883cc;
color: white;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
#mainNav ul {
list-style: none;
border:1px solid #bccbd8;
}
#mainNav ul li {
position: relative;
border-bottom: 1px solid #bccbd8;
}
#mainNav ul li a{
color: #1e5b7e;
text-decoration: none;
padding: 5px 5px 5px 5px;
}
#mainNav ul li a:hover{
text-decoration: underline;
}
#mainNav ul li ul {
position: absolute;
top: -1px;
left: 198px;
display: none;
}
#mainNav ul li:hover ul {
display: block;
width: 100%;
}
#mainNav ul li:hover ul li ul {
display: none;
}
#mainNav ul li ul li:hover ul {
display: block;
width:100%;
}
Bổ sung thêm code bằng asp + sql server
Code create database
- Code:
CREATE DATABASE testmenu
GO
USE testmenu
GO
CREATE TABLE [menu](
[id] INT not null,
[name] NVARCHAR(50) not null,
[parentid] INT not null
)
GO
INSERT INTO [menu]([id],[name],[parentid]) VALUES (1, 'a', 0)
INSERT INTO [menu]([id],[name],[parentid]) VALUES (2, 'b', 4)
INSERT INTO [menu]([id],[name],[parentid]) VALUES (3, 'c', 4)
INSERT INTO [menu]([id],[name],[parentid]) VALUES (4, 'd', 1)
INSERT INTO [menu]([id],[name],[parentid]) VALUES (5, 'e', 1)
INSERT INTO [menu]([id],[name],[parentid]) VALUES (6, 'f', 0)
INSERT INTO [menu]([id],[name],[parentid]) VALUES (7, 'g', 6)
INSERT INTO [menu]([id],[name],[parentid]) VALUES (8, 'h', 6)
Code file index.asp
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<%
conn = "provider=SQLOLEDB;server=.;database=testmenu;uid=sa;pwd=1234567"
mn = ""
sub menu(id)
set rs = Server.createObject("ADODB.RecordSet")
rs.open "select * from menu where parentid="&id,conn
while not rs.eof
mn=mn&"<li><a href='#'>"& rs("name")&"</a><ul>"
menu rs("id")
mn=mn& "</ul></li>"
rs.movenext
wend
end sub
menu 0
mn = replace(mn,"<ul></ul>","")
Response.write("<div id='wrapper'><div id='mainNav'><h1>Main Menu</h1><ul>"&mn&"</ul></div></div>")
%>
</body>
</html>