อยากทำ submenu โดยดึงข้อมูลจากฐานข้อมูลทำไงครับ
submenu หรือ list menu อะครับ
submenu ครับ
menu1
menu1.1
menu1.2
menu2
menu2.1
.....
menu3
คือทุก menu จะดึงข้อมูลจาก database ครับ
รบกวนด้วยนะครับ
menu1
menu1.1
menu1.2
menu2
menu2.1
.....
menu3
คือทุก menu จะดึงข้อมูลจาก database ครับ
รบกวนด้วยนะครับ
มี script ตัวอย่างของกระทู้นี้ไหมครับ ขอหน่อย
ถ้สร้างแบบธรรมดาได้การดึงจาก db ก็ไม่ได้ต่างกันหรอกครับ แค่ echo จาก db ออกมาเป็น เมนูเท่านั้น
ปัญหาคือทำเมนูธรรรมดาได้รึยัง?
ปัญหาคือทำเมนูธรรรมดาได้รึยัง?
ผมอยากได้เหมือนกัน ผมดึงข้อมูลออกแบบธรรมดาได้แล้ว แต่ดึง 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>