|
 |
| |
รบกวนสอบถามเกี่ยวกับการทำเมนูแบบ hi light อ่ะค่ะ ทำยังไงคะ |
| |
 |
|
|
 |
 |
|
อ้อไม่ใช่ค่ะพี่วิน
เป้น menu hi light ค่ะ
คือแค่เป็น sub menu อ่ะค่ะ
|
 |
 |
 |
 |
| Date :
2012-01-19 06:53:26 |
By :
because |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
พี่วินคะ ขอเป็นเมนู แบบคลิกแล้ว มี submenu เลื่อนมาด้านล่าง มีมั้ยคะ
|
| |
|
|
| |
| Date :
2012-01-19 08:08:39 |
By :
because |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตอนนี้เขียนไว้อย่างไรบ้างครับ ใช้ Script ตัวไหน คือมันจะต้อง Query ข้อมูลแล้วนำไป loop ใน Script ก่อนครับ 
|
| |
|
|
| |
| Date :
2012-01-19 09:14:28 |
By :
webmaster |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ใช้แค่ css เท่านั้นครับ
แต่ผมทำมาแบบลูปไว้แล้ว เอามาแปะให้เลยละกันนะครับ
Code (PHP)
<?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>";
}
?>
|
| |
|
|
| |
| Date :
2012-01-19 09:20:43 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
css ครับ
Code (PHP)
@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 */
|
| |
|
|
| |
| Date :
2012-01-19 09:21:36 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
<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>
ทีนี้ก็แค่นำไปประยุกต์ใช้ครับ
แบบ jquery
|
ประวัติการแก้ไข
2012-01-19 09:38:54
2012-01-19 09:44:38
| |
|
|
| |
| Date :
2012-01-19 09:37:25 |
By :
thaicloud |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
