|
|
|
รบกวนพี่ๆ ช่วยหน่อยค่ะ เรื่อง css menu กับ ฐานข้อมูล |
|
|
|
|
|
|
|
ใช้ Loop ซ้อน Loop ครับ ทำได้ไม่ยาก
Code (PHP)
<?
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("mydatabase");
$strSQL = "SELECT * FROM type";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
while($objResult = mysql_fetch_array($objQuery))
{
echo "Type<br>";
$strSQL2 = "SELECT * FROM subtype WHERE TypeID = '".$objResult["TypeID"]."' ";
$objQuery2 = mysql_query($strSQL) or die ("Error Query [".$strSQL2."]");
while($objResult2 = mysql_fetch_array($objQuery2))
{
echo "Sub Type<br>";
}
}
mysql_close($objConnect);
?>
|
|
|
|
|
Date :
2012-03-29 20:33:37 |
By :
webmaster |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ดึงข้อมูลจากฐานข้อมูลมาแสดงได้แล้ว
ขอบคุณมากๆๆๆๆ ค่ะ ^_______^
Ps.เดี๋ยวลองประยุกต์ใช้กับ css ดูก่อนนะคะ อิอิ...
|
ประวัติการแก้ไข 2012-03-29 21:03:49
|
|
|
|
Date :
2012-03-29 21:00:40 |
By :
Witchloves |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
โอ๊ว เข้าใจง่ายจริง ๆ
|
|
|
|
|
Date :
2012-03-29 21:11:39 |
By :
webmaster |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
^^ อิอิ.. code คล้ายๆ ที่เพื่อนสอนเลยค่ะ (แต่ให้คิดเอง..ก็..คิดไม่ออก ทำไม่ได้สักที)
เพื่อนก็ยุ่งๆ อยู่ด้วย เลยต้องลองทำเอง (555+)
ปล. ทำ css menu ได้แล้วค่ะ ขอบคุณมากมาย ( ดีใจสุดๆ เลย ^_______^ )
|
|
|
|
|
Date :
2012-03-29 21:22:36 |
By :
Witchloves |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
เยี่ยม เอาตัวอย่างพร้อม code / database มาแชร์ด้วยก็ดีครับ
|
|
|
|
|
Date :
2012-03-29 21:37:04 |
By :
webmaster |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ไฟล์ db export มาไม่ได้ มันเยอะมากๆ เลย เขียนอธิบายแล้วกันนะคะ ..อิอิ..
[Database]
product_type
-typepro_id
-type_name
product_subtype
-subtypepro_id
-subtype_name
(1.)ไฟล์ menu_css.php
Code (PHP)
<link rel="stylesheet" media="all" type="text/css" href="menu_css/tree_frog_vertical.css" />
<script src="menu_css/click_hover.js" type="text/javascript"></script>
<body onLoad="clickMenu('menu')">
<ul id="menu">
<?
require("inc/connect.php");
$strSQL = "SELECT * FROM product_type";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
while($objResult = mysql_fetch_array($objQuery))
{
?>
<li class="sub"><?=$objResult["type_name"];?>
<ul>
<?
$strSQL2 = "SELECT * FROM product_subtype WHERE typepro_id = '".$objResult["typepro_id"]."' ";
$objQuery2 = mysql_query($strSQL2) or die ("Error Query [".$strSQL2."]");
while($objResult2 = mysql_fetch_array($objQuery2))
{
?>
<li><a href="#nogo"><?=$objResult2["subtype_name"];?></a></li>
<? } ?>
</ul>
<? } ?>
</li>
</ul>
</body>
(2.)ไฟล์ click_hover.js
Code (JavaScript)
clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName("LI");
var getAgn = getEls;
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
for (var x=0; x<getAgn.length; x++) {
getAgn[x].className=getAgn[x].className.replace("unclick", "");
getAgn[x].className=getAgn[x].className.replace("click", "unclick");
}
if ((this.className.indexOf('unclick'))!=-1) {
this.className=this.className.replace("unclick", "");;
}
else {
this.className+=" click";
}
}
getEls[i].onmouseover=function() {
this.className+=" hover";
}
getEls[i].onmouseout=function() {
this.className=this.className.replace("hover", "");
}
}
}
(3.)ไฟล์ tree_frog_vertical.css
Code (PHP)
#outer {width:504px; height:510px; position:relative; background:url(file:///E|/Project_Nut_2554/Pro%20CSS%20Menu/Pro%20CSS%20Menu/Pro%20CSS%20Menu/Tree%20Frog%20slide%20menu/tree_frog_vertical/red_frog.jpg) no-repeat 0px 160px;}
#outer #content {clear:left; position:absolute; left:230px; top:10px; width:250px; z-index:10;}
#menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}
#menu li.sub {background:#d30;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}
#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}
#menu li.hover {color:#ff0; z-index:500;}
#menu li.click {color:#ff0;}
#menu li.click ul {display:block;}
#menu li.click ul li.hover ul,
#menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}
#menu li.click ul li.fly {background: #657 url(file:///E|/Project_Nut_2554/Pro%20CSS%20Menu/Pro%20CSS%20Menu/Pro%20CSS%20Menu/Tree%20Frog%20slide%20menu/tree_frog_vertical/frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover {background:#98a;}
#menu li.click ul li.hover ul li {background:#c60;}
#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}
#menu li.click ul li.hover ul li.fly {background: #c60 url(file:///E|/Project_Nut_2554/Pro%20CSS%20Menu/Pro%20CSS%20Menu/Pro%20CSS%20Menu/Tree%20Frog%20slide%20menu/tree_frog_vertical/frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
#menu li.click ul li.hover ul li.hover a {color:#000;}
#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}
#outer img {display:block; float:right;}
#outer p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}
|
ประวัติการแก้ไข 2012-03-31 14:52:31
|
|
|
|
Date :
2012-03-31 14:50:41 |
By :
Witchloves |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
เก่งครับ หายาก จบได้ด้วยตัวเองภายในไม่กี่กระทู้
|
|
|
|
|
Date :
2012-03-31 17:14:26 |
By :
Dragons_first |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Good jobs
|
|
|
|
|
Date :
2012-03-31 17:16:54 |
By :
webmaster |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
^^ อิอิ
|
|
|
|
|
Date :
2012-04-02 22:37:09 |
By :
Witchloves |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอบคุณคนโพสกะแอดมินมากค่ะ
|
|
|
|
|
Date :
2014-01-13 15:51:35 |
By :
kampong23 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 03
|