submenu
ผมอยากได้ submenu ผมดึงข้อมูลออกแบบธรรมดาได้แล้ว แต่ดึง submenu ไม่ได้ครับ
<script>
//<![CDATA[
jQuery(function(){
$("ul.top-nav li a").mouseenter(function() {
var subnavmenu = $(this).parent().find("li.subnav");
subnavmenu.slideDown('fast').show();
$(this).parent().hover(function() {
$(this).addClass('sel');
}, function(){
$(this).removeClass('sel');
subnavmenu.slideUp('fast');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});
});
//]]>
</script>
<style>
nav {background:url('images/menu/bg-menu.png') no-repeat; width:1000px; height:27px; line-height:25px; margin:5px 0px;}
.top-nav { margin:0; padding:0 42px; list-style:none;}
.top-nav > li { float:left; padding:0 3px; margin:0 5px; position:relative;}
.top-nav > li > a { text-decoration:none; color:#0053A3; font-size:12px; background:url('images/menu/bg-menu-active.png') no-repeat right 50px;
padding-right:10px; display:block;font-weight:bold; text-shadow:1px 1px 2px #fff, -1px -1px 2px #fff;}
.top-nav > li > a span { background:url('images/menu/bg-menu-active.png') no-repeat left 50px; margin-left:-7px; padding-left:10px; display:block;}
.top-nav > li > a:hover, .top-nav > li.sel > a { color:#fff; font-weight:bold; background-position:right center; text-shadow:none;}
.top-nav > li > a:hover span, .top-nav > li.sel > a span { background-position:left center;}
.subnav { margin:0; padding:0; list-style:none; display:none; position:absolute; top:25px; left:0; z-index:8888; box-shadow: 1px 2px 2px #666; -moz-box-shadow: 1px 2px 2px #666; -webkit-box-shadow: 1px 2px 2px #666;}
.subnav li {display:block; border-top:1px solid #3589c8; border-bottom:1px solid #2474ad; clear:both; width:220px;}
.subnav li a {background-color:#06F; display:block; color:#fff; text-decoration:none; padding:2px 0 2px 12px;}
.subnav li a:hover {background-color:#206496; font-weight:bold;}
</style>
<nav>
<ul class='top-nav'>
<?
$sql_main=mysql_query("select * from cfb_menu");
while($row_main=mysql_fetch_array($sql_main)){
echo"<li><a href=''><span>$row_main[nav_name]<span></a></li>";
//วนลูป sub
$sql_sub=mysql_query("select * from cfb_menu_sub where nav_id=$row_main[nav_id]");
while($row_sub=mysql_fetch_array($sql_sub)){
echo"<ul class='subnav'><li><a href=''><span>$row_sub[sub_name]</span></a></li></ul>";
}
}
?>
</ul>
</nav>
<script>
//<![CDATA[
jQuery(function(){
$("ul.top-nav li a").mouseenter(function() {
var subnavmenu = $(this).parent().find("li.subnav");
subnavmenu.slideDown('fast').show();
$(this).parent().hover(function() {
$(this).addClass('sel');
}, function(){
$(this).removeClass('sel');
subnavmenu.slideUp('fast');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});
});
//]]>
</script>
<style>
nav {background:url('images/menu/bg-menu.png') no-repeat; width:1000px; height:27px; line-height:25px; margin:5px 0px;}
.top-nav { margin:0; padding:0 42px; list-style:none;}
.top-nav > li { float:left; padding:0 3px; margin:0 5px; position:relative;}
.top-nav > li > a { text-decoration:none; color:#0053A3; font-size:12px; background:url('images/menu/bg-menu-active.png') no-repeat right 50px;
padding-right:10px; display:block;font-weight:bold; text-shadow:1px 1px 2px #fff, -1px -1px 2px #fff;}
.top-nav > li > a span { background:url('images/menu/bg-menu-active.png') no-repeat left 50px; margin-left:-7px; padding-left:10px; display:block;}
.top-nav > li > a:hover, .top-nav > li.sel > a { color:#fff; font-weight:bold; background-position:right center; text-shadow:none;}
.top-nav > li > a:hover span, .top-nav > li.sel > a span { background-position:left center;}
.subnav { margin:0; padding:0; list-style:none; display:none; position:absolute; top:25px; left:0; z-index:8888; box-shadow: 1px 2px 2px #666; -moz-box-shadow: 1px 2px 2px #666; -webkit-box-shadow: 1px 2px 2px #666;}
.subnav li {display:block; border-top:1px solid #3589c8; border-bottom:1px solid #2474ad; clear:both; width:220px;}
.subnav li a {background-color:#06F; display:block; color:#fff; text-decoration:none; padding:2px 0 2px 12px;}
.subnav li a:hover {background-color:#206496; font-weight:bold;}
</style>
<nav>
<ul class='top-nav'>
<?
$sql_main=mysql_query("select * from cfb_menu");
while($row_main=mysql_fetch_array($sql_main)){
echo"<li><a href=''><span>$row_main[nav_name]<span></a></li>";
//วนลูป sub
$sql_sub=mysql_query("select * from cfb_menu_sub where nav_id=$row_main[nav_id]");
while($row_sub=mysql_fetch_array($sql_sub)){
echo"<ul class='subnav'><li><a href=''><span>$row_sub[sub_name]</span></a></li></ul>";
}
}
?>
</ul>
</nav>
<nav>
<ul class='top-nav'>
<?
$sql_main=mysql_query("select * from cfb_menu");
$NRow_Menu=mysql_num_rows($sql_main);
if($NRow_Menu>0){
while($row_main=mysql_fetch_array($sql_main)){
echo"<li><a href=''><span>$row_main[nav_name]<span></a>";
//วนลูป sub
$sql_sub=mysql_query("select * from cfb_menu_sub where nav_id=$row_main[nav_id]");
$NRow_sub=mysql_num_rows($sql_sub);
if($NRow_sub>0){
echo "<ul class='subnav'>";
while($row_sub=mysql_fetch_array($sql_sub)){
echo"<li><a href=''><span>$row_sub[sub_name]</span></a></li>";
}
echo "</ul>";
}
echo "</li>";
}
}else{echo "<li>ไม่มีเมนู</li>";}
?>
</ul>
</nav>