ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingพี่คนไหน ที่เก่งเรื่อง Web รบกวนมาดูหน่อยสิคะ มีเรื่องถาม การทำเมนู
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: พี่คนไหน ที่เก่งเรื่อง Web รบกวนมาดูหน่อยสิคะ มีเรื่องถาม การทำเมนู  (อ่าน 1316 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
nungnew
ก๊วนเสียว
*

พลังน้ำใจ: 30
ออฟไลน์ ออฟไลน์

กระทู้: 246



ดูรายละเอียด
« เมื่อ: 25 มิถุนายน 2009, 00:23:17 »


http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

จากเว็บตัวอย่างเราพยายามทำเเล้ว ทำไม่ได้สักที มันออกมาแบบนี้อะ
บันทึกการเข้า
สุ้ๆ ไม่รู้ก้ถาม .........
inDexTop10
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 59
ออฟไลน์ ออฟไลน์

กระทู้: 2,019



ดูรายละเอียด
« ตอบ #1 เมื่อ: 25 มิถุนายน 2009, 00:31:07 »
Simply download sdmenu.zip, and refer to the HTML page inside. You may wish to view the menu's sdmenu.js and sdmenu.css files.

css และ js เรียกใช้งานหรือเปล่า
บันทึกการเข้า
Digitalocean.com - ถูกและดีจริง ลด 10$ ลงไปเป็นบอก
nungnew
ก๊วนเสียว
*

พลังน้ำใจ: 30
ออฟไลน์ ออฟไลน์

กระทู้: 246



ดูรายละเอียด
« ตอบ #2 เมื่อ: 25 มิถุนายน 2009, 00:39:56 »
อ้างถึง
<html>
<head>
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
var myMenu = new SDMenu("main_menu"); // ID of the menu element
// Default values...
myMenu.speed = 3;                     // Menu sliding speed (1 - 5 recomended)
myMenu.remember = true;               // Store menu states (expanded or collapsed) in cookie and restore later
myMenu.oneSmOnly = false;             // One expanded submenu at a time
myMenu.markCurrent = true;            // Mark current link / page (link.href == location.href)

myMenu.init();

// Additional methods...
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);      // Expand a submenu
myMenu.collapseMenu(firstSubmenu);    // Collapse a menu
myMenu.toggleMenu(firstSubmenu);      // Expand if collapsed and collapse if expanded

myMenu.expandAll();                   // Expand all submenus
myMenu.collapseAll();                 // Collapse all submenus
     
</script>
</head>

<body>

<div id="my_menu" class="sdmenu">
<div>
<span>Online Tools</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/ ">Image Optimizer</a>
<a href="http://tools.dynamicdrive.com/favicon/ ">FavIcon Generator</a>
<a href="http://www.dynamicdrive.com/emailriddler/ ">Email Riddler</a>
<a href="http://tools.dynamicdrive.com/password/ ">htaccess Password</a>
<a href="http://tools.dynamicdrive.com/gradient/ ">Gradient Image</a>
<a href="http://tools.dynamicdrive.com/button/ ">Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href="http://www.dynamicdrive.com/recommendit/ ">Recommend Us</a>
<a href="http://www.dynamicdrive.com/link.htm ">Link to Us</a>
<a href="http://www.dynamicdrive.com/resources/ ">Web Resources</a>
</div>
<div class="collapsed">
<span>Partners</span>
<a href="http://www.javascriptkit.com ">JavaScript Kit</a>
<a href="http://www.cssdrive.com ">CSS Drive</a>
<a href="http://www.codingforums.com ">CodingForums</a>
<a href="http://www.dynamicdrive.com/style/ ">CSS Examples</a>
</div>
<div>
<span>Test Current</span>
<a href="?foo=bar">Current or not</a>
<a href="./">Current or not</a>
<a href="index.html">Current or not</a>
<a href="index.html?query">Current or not</a>
</div>
</div>

</body>
</html>

นี้อะค่ะ อย่าขำนะ เราไม่รู้จิงๆ
บันทึกการเข้า
สุ้ๆ ไม่รู้ก้ถาม .........
Synchronize
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 83
ออฟไลน์ ออฟไลน์

กระทู้: 1,230



ดูรายละเอียด
« ตอบ #3 เมื่อ: 25 มิถุนายน 2009, 00:51:40 »
มีไฟล์

sdmenu/sdmenu.css
sdmenu/sdmenu.js

อยู่รึยัง น่ะครับ
บันทึกการเข้า
เนื้อหาความรู้น่าสนใจ ใหม่ๆ
เทคนิคการแก้ไขปัญหาจากการ float ซ้อน float แล้ว clear

ทำเว็บได้ด้วยตัวเองฟรี ด้วยระบบเว็บสำเร็จรูป unbbz , เว็บธรรมดา , เว็บบอร์ด , เว็บขายของ ทำได้หมดเลย
nungnew
ก๊วนเสียว
*

พลังน้ำใจ: 30
ออฟไลน์ ออฟไลน์

กระทู้: 246



ดูรายละเอียด
« ตอบ #4 เมื่อ: 25 มิถุนายน 2009, 01:01:22 »
อ้างจาก: Synchronize ที่ 25 มิถุนายน 2009, 00:51:40
มีไฟล์

sdmenu/sdmenu.css
sdmenu/sdmenu.js

อยู่รึยัง น่ะครับ
บันทึกการเข้า
สุ้ๆ ไม่รู้ก้ถาม .........
inDexTop10
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 59
ออฟไลน์ ออฟไลน์

กระทู้: 2,019



ดูรายละเอียด
« ตอบ #5 เมื่อ: 25 มิถุนายน 2009, 01:06:41 »

ก็ลองเอา index.html ที่เขาให้มา

โค๊ด:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Slashdot's Menu</title>
	<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
	<script type="text/javascript" src="sdmenu/sdmenu.js">
		/***********************************************
		* Slashdot Menu script- By DimX
		* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
		* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
		***********************************************/
	</script>
	<script type="text/javascript">
	// <![CDATA[
	var myMenu;
	window.onload = function() {
		myMenu = new SDMenu("my_menu");
		myMenu.init();
	};
	// ]]>
	</script>
  </head>
  <body>

    <div style="float: left" id="my_menu" class="sdmenu">
      <div>
        <span>Online Tools</span>
        <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
        <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
        <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
        <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
        <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
        <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
      </div>
      <div>
        <span>Support Us</span>
        <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
        <a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>
        <a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
      </div>
      <div class="collapsed">
        <span>Partners</span>
        <a href="http://www.javascriptkit.com">JavaScript Kit</a>
        <a href="http://www.cssdrive.com">CSS Drive</a>
        <a href="http://www.codingforums.com">CodingForums</a>
        <a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
      </div>
      <div>
        <span>Test Current</span>
        <a href="?foo=bar">Current or not</a>
        <a href="./">Current or not</a>
        <a href="index.html">Current or not</a>
        <a href="index.html?query">Current or not</a>
      </div>
    </div>

    <div style="padding-left: 200px">
      <pre>
var myMenu = new SDMenu("main_menu"); // ID of the menu element
// Default values...
myMenu.speed = 3;                     // Menu sliding speed (1 - 5 recomended)
myMenu.remember = true;               // Store menu states (expanded or collapsed) in cookie and restore later
myMenu.oneSmOnly = false;             // One expanded submenu at a time
myMenu.markCurrent = true;            // Mark current link / page (link.href == location.href)

myMenu.init();

// Additional methods...
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);      // Expand a submenu
myMenu.collapseMenu(firstSubmenu);    // Collapse a menu
myMenu.toggleMenu(firstSubmenu);      // Expand if collapsed and collapse if expanded

myMenu.expandAll();                   // Expand all submenus
myMenu.collapseAll();                 // Collapse all submenus
      </pre>
      <p>Download: <a href="sdmenu.zip">sdmenu.zip</a></p>
    </div>
  </body>
</html>


และที่สำคัญ

file css/js ด้วยนะ
บันทึกการเข้า
Digitalocean.com - ถูกและดีจริง ลด 10$ ลงไปเป็นบอก
g-ji
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 231
ออฟไลน์ ออฟไลน์

กระทู้: 3,244



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 25 มิถุนายน 2009, 01:07:44 »
อ้างจาก: nungnew ที่ 25 มิถุนายน 2009, 01:01:22
อ้างจาก: Synchronize ที่ 25 มิถุนายน 2009, 00:51:40
มีไฟล์

sdmenu/sdmenu.css
sdmenu/sdmenu.js

อยู่รึยัง น่ะครับ





2 บรรทัดนี้
โค๊ด:
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">

หมายความว่า เรียกไฟล์จาก folder sdmenu/sdmenu.css และ sdmenu.js

ก็สร้าง folder เปล่าๆ ขึ้นมา แล้วตั้งชื่อว่า sdmenu แล้วเอาไฟล์ ทั้งหมดยกเว้น index ใส่เข้าไป

น่าจะได้แล้วนะ

เพิ่มเติม ในกรณีที่รูปภาพไม่แสดง

ให้เปิดไฟล์ sdmenu.css แล้วดูว่า มันเรียกพาท รูปภาพยังไง

พาทมันจะอยู่ลักษณะนี้คล้ายๆ แบบนี้

#xxx {url(image.gif);}

ถ้ามันเป็นแบบนี้

#xxx {url(img/image.gif);}

ก็ต้องสร้าง folder เปล่าๆ ขึ้นมาแล้ว เปลี่ยนชื่อมัน เป็น img (ตามพาทที่มันแสดงอ่ะ)

เอารูปยัดเข้าไปให้หมด
« แก้ไขครั้งสุดท้าย: 25 มิถุนายน 2009, 01:10:48 โดย g-ji » บันทึกการเข้า
อยากทำเว็บการ์ตูนแต่ไม่มีปัญญา ทำได้แค่นี้ก็พอมั้ง

ถามความคิดเห็นเรื่อง Error Document
inDexTop10
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 59
ออฟไลน์ ออฟไลน์

กระทู้: 2,019



ดูรายละเอียด
« ตอบ #7 เมื่อ: 25 มิถุนายน 2009, 01:08:47 »
อ้อรู้ละ

ตรง

โค๊ด:
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">

แก้เป็น

โค๊ด:
<link rel="stylesheet" type="text/css" href="sdmenu.css" />
<script type="text/javascript" src="sdmenu.js">
บันทึกการเข้า
Digitalocean.com - ถูกและดีจริง ลด 10$ ลงไปเป็นบอก
nungnew
ก๊วนเสียว
*

พลังน้ำใจ: 30
ออฟไลน์ ออฟไลน์

กระทู้: 246



ดูรายละเอียด
« ตอบ #8 เมื่อ: 25 มิถุนายน 2009, 01:12:49 »
ขอบคุณทุกท่านที่มาตอบนะค่ะ แล้วนอนกันกี่โมง ฝันดีนะค่ะ ทำได้เเล้ว สบายใจ Cry
บันทึกการเข้า
สุ้ๆ ไม่รู้ก้ถาม .........
หน้า: [1]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: