Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > รบกวนพี่ๆ ช่วยหน่อยค่ะ เรื่อง css menu กับ ฐานข้อมูล



 

รบกวนพี่ๆ ช่วยหน่อยค่ะ เรื่อง css menu กับ ฐานข้อมูล

 



Topic : 076362



โพสกระทู้ ( 28 )
บทความ ( 0 )



สถานะออฟไลน์




คือว่าต้องการใช้ css ทำเมนูอ่ะค่ะ
แล้วอยากดึงชื่อจากฐานข้อมูลมาแสดงใน css menu

มี 2 ตาราง คือ ประเภท (type) กับ ประเภทย่อย (subtype)

type
-subtype
-subtype
type
-subtype
-subtype

ประมาณนี้ค่ะ

ปล.ขอบคุณล่วงหน้าค่ะ

Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls dot com | menu - Tree frog vertical click</title>
<meta name="Author" content="Stu Nicholls" />

<link rel="stylesheet" media="all" type="text/css" href="tree_frog_vertical/tree_frog_vertical.css" />


<script src="tree_frog_vertical/click_hover.js" type="text/javascript"></script>

</head>

<body onload="clickMenu('menu')">
<ul id="menu">
  <li class="sub">Types
    <ul>
        <li><a href="#nogo">European</a></li>
      <li><a href="#nogo">Indian</a></li>
      <li><a href="#nogo">North Africa</a></li>
      <li class="fly"><a href="#nogo">American</a>
            <ul>
              <li><a href="#nogo">South American</a></li>
              <li class="fly"><a href="#nogo">North American</a>
                  <ul>
                    <li><a href="#nogo">Grey tree frog</a></li>
                    <li><a href="#nogo">Green tree frog</a></li>
                    <li><a href="#nogo">Spring peeper</a></li>
                  </ul>
              </li>
            </ul>
      </li>
      <li><a href="#nogo">Japanese</a></li>
      <li><a href="#nogo">Chinese</a></li>
    </ul>
  </li>
  <li class="sub">Classifications
    <ul>
        <li class="fly"><a href="#nogo">Pelodryadinae</a>
            <ul>
              <li><a href="#nogo">Cyclorana</a></li>
              <li><a href="#nogo">Litoria</a></li>
              <li><a href="#nogo">Nyctimystes</a></li>
            </ul>
        </li>
      <li class="fly"><a href="#nogo7">Phyllomedusinae</a>
            <ul>
              <li><a href="#nogo">Agalychnis</a></li>
              <li><a href="#nogo">Cruziohyla</a></li>
              <li><a href="#nogo">Hylomantis</a></li>
              <li><a href="#nogo">Pachymedusa</a></li>
              <li><a href="#nogo">Phasmahyla</a></li>
              <li><a href="#nogo">Phrynomedusa</a></li>
              <li><a href="#nogo">Phyllomedusa</a></li>
            </ul>
      </li>
      <li class="fly"><a href="#nogo">Hemiphractinae</a>
            <ul>
              <li><a href="#nogo">Cryptobatrachus</a></li>
              <li><a href="#nogo">Flectonotus</a></li>
              <li><a href="#nogo">Gastrotheca</a></li>
              <li><a href="#nogo">Hemiphractus</a></li>
              <li><a href="#nogo">Stefania</a></li>
            </ul>
      </li>
      <li class="fly"><a href="#nogo">Hylinae</a>
            <ul>
              <li><a href="#nogo">Acris</a></li>
              <li><a href="#nogo">Anotheca</a></li>
              <li><a href="#nogo">Bokermannohyla</a></li>
              <li><a href="#nogo">Corythomantis</a></li>
              <li><a href="#nogo">Ecnomiohyla</a></li>
              <li><a href="#nogo">Hyloscirtus</a></li>
              <li><a href="#nogo">Megastomatohyla</a></li>
              <li><a href="#nogo">Osteocephalus</a></li>
              <li><a href="#nogo">Pseudacris</a></li>
              <li><a href="#nogo">Sphaenorhynchus</a></li>
              <li><a href="#nogo">Trachycephalus</a></li>
            </ul>
      </li>
      <li class="fly"><a href="#nogo9">Rhacophorinae</a>
            <ul>
              <li><a href="#nogo">Boophis</a></li>
              <li><a href="#nogo">Callixalus</a></li>
              <li><a href="#nogo">Chiromantis</a></li>
              <li><a href="#nogo">Cryptothylax</a></li>
              <li><a href="#nogo">Mantidactylus</a></li>
              <li><a href="#nogo">Rhacophorus</a></li>
            </ul>
      </li>
      <li class="fly"><a href="#nogo">Buergeriinae</a>
            <ul>
              <li><a href="#nogo">Buergeria</a></li>
            </ul>
      </li>
    </ul>
  </li>
  <li class="sub">References
    <ul>
        <li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
      <li><a href="#nogo11">Encyclopedia</a></li>
    </ul>
  </li>
  <li class="sub">Links
    <ul>
        <li><a href="#nogo">Complete treefrog</a></li>
      <li><a href="#nogo">Old World treefrogs</a></li>
      <li><a href="#nogo">Amphibian Speci</a></li>
    </ul>
  </li>
</ul>
</body>
</html>




Tag : PHP, HTML/CSS







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-03-29 20:28:37 By : Witchloves View : 1793 Reply : 10
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ใช้ 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
 


 

No. 2



โพสกระทู้ ( 28 )
บทความ ( 0 )



สถานะออฟไลน์


ดึงข้อมูลจากฐานข้อมูลมาแสดงได้แล้ว

ขอบคุณมากๆๆๆๆ ค่ะ ^_______^


Ps.เดี๋ยวลองประยุกต์ใช้กับ css ดูก่อนนะคะ อิอิ...


ประวัติการแก้ไข
2012-03-29 21:03:49
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-29 21:00:40 By : Witchloves
 

 

No. 3



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

โอ๊ว เข้าใจง่ายจริง ๆ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-29 21:11:39 By : webmaster
 


 

No. 4



โพสกระทู้ ( 28 )
บทความ ( 0 )



สถานะออฟไลน์


^^ อิอิ.. code คล้ายๆ ที่เพื่อนสอนเลยค่ะ (แต่ให้คิดเอง..ก็..คิดไม่ออก ทำไม่ได้สักที)

เพื่อนก็ยุ่งๆ อยู่ด้วย เลยต้องลองทำเอง (555+)

ปล. ทำ css menu ได้แล้วค่ะ ขอบคุณมากมาย ( ดีใจสุดๆ เลย ^_______^ )
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-29 21:22:36 By : Witchloves
 


 

No. 5



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

เยี่ยม เอาตัวอย่างพร้อม code / database มาแชร์ด้วยก็ดีครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-29 21:37:04 By : webmaster
 


 

No. 6



โพสกระทู้ ( 28 )
บทความ ( 0 )



สถานะออฟไลน์


ไฟล์ 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
 


 

No. 7



โพสกระทู้ ( 3,750 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

เก่งครับ หายาก จบได้ด้วยตัวเองภายในไม่กี่กระทู้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-31 17:14:26 By : Dragons_first
 


 

No. 8



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

Good jobs
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-31 17:16:54 By : webmaster
 


 

No. 9



โพสกระทู้ ( 28 )
บทความ ( 0 )



สถานะออฟไลน์


^^ อิอิ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-04-02 22:37:09 By : Witchloves
 


 

No. 10



โพสกระทู้ ( 15 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณคนโพสกะแอดมินมากค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-01-13 15:51:35 By : kampong23
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : รบกวนพี่ๆ ช่วยหน่อยค่ะ เรื่อง css menu กับ ฐานข้อมูล
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่