<?php อันนี้ลูปของเมนูหลักนะครับ while($ar=mysql_fetch_array($result)) { print "<div id=\"table1\" style=\"position:relative; left:0px; top:0px;clear:both \" > <table width=\"180\" border=\"0\" align=\"left\" bgcolor=\"#FFFFFF\" > <tr> <td class=\"a2\" align=\"left\" height=\"35\" style=\"cursor:pointer;cursor:hand\"> <ul class=\"ul\"> <li><a href=\"product.php?id=$ar[id]\"> <img src=\"image/arrow.gif\" border=\"0\"> $ar[name]</a> <ul class=\"ul\" style=\"border:1px #000 solid;\">"; อันนี้ลูปของเมนูย่อยนะครับ while ($arr=mysql_fetch_array($resub)) { print "<div style=\"position:absulute; left:0px; top:0px;clear:both;\" > <table width=\"180\" border=\"0\" align=\"center\" bgcolor=\"#FFFFFF\" > <tr> <td class=\"a2\" align=\"left\" height=\"35\" style=\"cursor:pointer;cursor:hand\"> <li><a href=\"product.php?id=$arr[id]\"> <img src=\"image/arrow.gif\" border=\"0\"> $arr[name]</a></li> </td> </tr> </table>"; } print" </ul> </li> </ul> </td> </tr>"; print " </table> </div>"; } ?>
@charset "utf-8"; /* CSS Document */ a:hover { color: #39C; } .a2 { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #036; background-image:url(../image/bgmenu1.png); } .ul { margin: 0; padding: 0; list-style: none; width: 180px; /* Width of Menu Items */ } ul li { position: relative; padding: 5px; } li .ul { position: absolute; left: 140px; /* Set 1px less than menu width */ top: 0; display: none; z-index:400; } /* Styles for Menu Items ul li a { display: block; text-decoration: none; color: #777; background: #fff; /* IE6 Bug padding: 5px; } */ /* Holly Hack. IE Requirement \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ li:hover ul, li.over ul { display: block; } /* The magic */
<html> <head> <meta charset="utf-8"/> <script type='text/javascript' src='jquery.js'></script> <script> $(document).ready(function(){ //แบบ hover // $('#main_menu_container').mouseover(function(){ // $('#sub_menu_container').slideDown('400'); // $('#menu_container').mouseleave(function(){ // $('#sub_menu_container').slideUp('400'); // }); // }); //แบบ click $('#main_menu_container').click(function(){ $('#sub_menu_container').slideToggle('400'); }); }); </script> <style> a{ color:#ffffff; text-decoration:none; } #menu_container{ position:relative; } #main_menu_container{ background-color:#000000; padding:5px; width:75px; } #sub_menu_container{ display:none; position:absolute; background-color:#111111; padding:5px; width:75px; } </style> </head> <body> <div id='menu_container'> <div id='main_menu_container'> <a class='main_menu' href="#">เมนู</a> </div> <div id='sub_menu_container'> <a class='sub_menu' href='#'>เมนูย่อย1</a><br /> <a class='sub_menu' href='#'>เมนูย่อย2</a><br /> <a class='sub_menu' href='#'>เมนูย่อย3</a><br /> </div> </div> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
