พี่คนไหน ที่เก่งเรื่อง Web รบกวนมาดูหน่อยสิคะ มีเรื่องถาม การทำเมนู

nungnew

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

จากเว็บตัวอย่างเราพยายามทำเเล้ว ทำไม่ได้สักที มันออกมาแบบนี้อะ

inDexTop10

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 เรียกใช้งานหรือเปล่า

nungnew

อ้างถึง<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

มีไฟล์

sdmenu/sdmenu.css
sdmenu/sdmenu.js

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

nungnew

อ้างถึงจาก: Synchronize ใน 25 มิถุนายน 2009, 00:51:40
มีไฟล์

sdmenu/sdmenu.css
sdmenu/sdmenu.js

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

inDexTop10

ก็ลองเอา 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 ด้วยนะ

g-ji

อ้างถึงจาก: 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 (ตามพาทที่มันแสดงอ่ะ)

เอารูปยัดเข้าไปให้หมด

inDexTop10

อ้อรู้ละ

ตรง

โค้ด เลือก


<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">

nungnew

ขอบคุณทุกท่านที่มาตอบนะค่ะ แล้วนอนกันกี่โมง ฝันดีนะค่ะ ทำได้เเล้ว สบายใจ