สองวิธีในการสร้างเมนูคลิกขวาที่ยอดเยี่ยมของหน้าเว็บ

ในหน้าเว็บทั่วไป เมนูคลิกขวาเริ่มต้นของเบราว์เซอร์ IE จะเป็นโหมดคงที่ไม่เปลี่ยนแปลง และชาวเน็ตส่วนใหญ่ไม่ค่อยได้ใช้ประโยชน์มากนักเมื่อเรียกดูหน้าเว็บ สำหรับนักออกแบบเว็บไซต์มืออาชีพ มันจะเจ๋งและสะดวกมากหากสามารถออกแบบเมนูคลิกขวาด้วยเนื้อหาส่วนบุคคลได้
ลองนึกภาพว่าเมื่อผู้ใช้คลิกขวาบนเว็บไซต์ของคุณ คุณจะเห็น "ลิงก์" และ "ส่งข้อความ" ที่จัดระเบียบอย่างระมัดระวัง ซึ่งรวมถึงภาพเคลื่อนไหว Flash แบบโต้ตอบสีสันสดใสด้วย! ดังรูปที่ 1 อย่าเพิ่งน้ำลายไหล มาดับกระหายกันดีกว่า มาดูวิธีทำกัน :)

ฉันมีสองวิธีในการแปลงเมนูคลิกขวา (อันที่จริงสาระสำคัญก็เหมือนกัน ทั้งสองเป็นแบบของ JavaScript)

วิธีแรกคือก่อนหน้านี้เพียงคัดลอกซอร์สโค้ดต่อไปนี้ลงในไฟล์ HTML ในหน้าเว็บ

<สไตล์>
-
.skin0 {
ตำแหน่ง:แน่นอน;
การจัดแนวข้อความ: ซ้าย;
ความกว้าง:200px;
ขอบ:2px สีดำทึบ;
สีพื้นหลัง: เมนู;
ตระกูลแบบอักษร:Verdana;
ความสูงของบรรทัด:20px;
เคอร์เซอร์: ค่าเริ่มต้น;
การมองเห็น: ซ่อน;
-
.skin1 {
เคอร์เซอร์: ค่าเริ่มต้น;
แบบอักษร: ข้อความเมนู;
ตำแหน่ง:แน่นอน;
การจัดแนวข้อความ: ซ้าย;
ตระกูลฟอนต์: Arial, Helvetica, sans-serif;
ขนาดตัวอักษร: 10pt;
ความกว้าง:120px;
สีพื้นหลัง: เมนู;
เส้นขอบ: 1 กระดุมทึบ;
การมองเห็น: ซ่อน;
ขอบ: เน้นปุ่มเริ่มแรก 2 ปุ่ม;
-
.เมนู {
ช่องว่างภายในซ้าย:15px;
ช่องว่างภายในขวา: 10px;
-
-
</สไตล์>
< ภาษาสคริปต์="JavaScript1.2">
< !-- เว็บไซต์: http://www.painting-effects.co.uk -->

< !-- สคริปต์นี้และอื่นๆ อีกมากมายสามารถดูออนไลน์ได้ฟรีที่ -->
< !-- แหล่งที่มาของ JavaScript!! http://javascript.internet.com -->

< !-- เริ่มต้น
var menuskin = "skin1"; // skin0 หรือ skin1
var display_url = 0; // แสดง URL ในแถบสถานะ?
ฟังก์ชั่น showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var Bottomedge = document.body.clientHeight-event.clientY;
ถ้า (ขอบขวา < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
อื่น
ie5menu.style.left = document.body.scrollLeft + event.clientX;
ถ้า (ขอบล่าง < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY -
ie5menu.offsetHeight;
อื่น
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "มองเห็นได้";
กลับเท็จ;
-
ฟังก์ชั่น Hidemenuie5() {
ie5menu.style.visibility = "ซ่อน";
-
ฟังก์ชั่น highlightie5() {
ถ้า (event.srcElement.className == "เมนู") {
event.srcElement.style.พื้นหลังสี = "ไฮไลท์";
event.srcElement.style.color = "สีขาว";
ถ้า(display_url)
window.status = event.srcElement.url;
-
-
ฟังก์ชั่น lowlightie5() {
ถ้า (event.srcElement.className == "เมนู") {
event.srcElement.style.พื้นหลังสี = "";
event.srcElement.style.color = "สีดำ";
หน้าต่างสถานะ = "";
-
-
ฟังก์ชั่น jumptoie5() {
ถ้า (event.srcElement.className == "เมนู") {
ถ้า (event.srcElement.getAttribute("เป้าหมาย") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("เป้าหมาย"));
อื่น
window.location = event.srcElement.url;
-
-
//จบ-->
</สคริปต์>
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">ย้อนกลับ</div>
< div class="menuitems" url=" http://javacool.3322.net ">กลับสู่หน้าแรก</div>
<ชม.>
< div class="เมนู" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">โซหู</div>
<ชม.>
< div class="menuitems" url=" http://www.sina.com.cn ">ซีน่า</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">Yahoo</div>
</ /div>
<script language="JavaScript1.2">
ถ้า (document.all && window.print) {
ie5menu.className = เมนูสกิน;
document.oncontextmenu = showmenuie5;
document.body.onclick = Hidemenuie5;
-
</สคริปต์>
เอฟเฟกต์มีดังนี้:

วิธีที่สองคือการใช้ปลั๊กอินสำหรับ Dreamweaver - Right_Click_Menu_Buil-der ซึ่งสามารถดาวน์โหลดได้จาก http://www.macromedia.com หลังการติดตั้ง คำสั่ง "ตัวสร้างเมนูคลิกขวา" จะอยู่ใต้เมนู "คำสั่ง" ใน Dreamweaver
คลิกคำสั่งนี้ จากนั้นกล่องการตั้งค่าดังแสดงในรูปที่ 3 จะปรากฏขึ้น ส่วนใหญ่มีสองส่วน: "เมนู" และ "รูปแบบ"

เมนูนี้ใช้สำหรับการตั้งค่าไฮเปอร์ลิงก์และลิงก์การส่งที่นี่ "ข้อความเมนู" ในกล่องตัวเลือกนี้คือข้อความที่จะแสดงเมื่อคุณคลิกขวา (เปลี่ยนเป็นภาษาจีน) เขียนเส้นทางลิงก์ที่เกี่ยวข้องใน "URL"; "เป้าหมาย" กำหนดว่าเป็นหน้าต่างใหม่หรือปัจจุบัน หน้าต่างที่ใช้แสดงผล เนื้อหาของลิงค์จะถูกแสดงในหน้าต่างใหม่โดยกรอก "ว่าง" ซึ่งเหมือนกับการตั้งค่า "เป้าหมาย" ของ Dreamweaver

สไตล์มีหน้าที่รับผิดชอบในการตั้งค่าลักษณะที่ปรากฏของเมนู มีสองตัวเลือก:
img src=" "เมนูประเภท Windows (ค่าเริ่มต้น)" เป็นรายการเริ่มต้น - รูปลักษณ์ที่เรียบง่ายที่สุด สไตล์ Windows ที่คุ้นเคย
“เมนูแบบกําหนดเอง” เมนูแบบกําหนดเอง หากคุณเลือกรายการนี้ คุณจะต้องตั้งค่าเนื้อหาต่อไปนี้ด้วย:
"ความกว้างของเมนู" ความกว้างของเมนู
"แบบอักษร" แบบอักษร;
"สีตัวอักษร", สีตัวอักษร;
"ด้านแบบอักษร" ขนาดตัวอักษร;
"สีพื้นหลัง", "ภาพพื้นหลัง", สีพื้นหลังและภาพพื้นหลัง;
นอกจากนี้ยังมี "เคอร์เซอร์" ซึ่งใช้เลือกรูปแบบเมาส์
หลังจากตั้งค่าข้างต้นแล้ว คุณสามารถคลิก "เพิ่ม" เพื่อสร้างเอฟเฟกต์ได้ ดูตัวอย่าง ดีไหม

แล้วจะเพิ่ม Flash ได้อย่างไร? ต่อไปนี้เป็นวิธีดำเนินการ: เพิ่ม "ตาราง" ลงในหน้าเว็บ ขอแนะนำให้ตั้งค่าความกว้าง "W" เป็น "100%" ซึ่งจะช่วยอำนวยความสะดวกในการวางตำแหน่งขององค์ประกอบต่างๆ ที่คุณเพิ่มด้านล่าง เอาล่ะ แทรกไฟล์ Flash SWF ลงใน "ตาราง" และตั้งค่าตำแหน่งเป็น "กึ่งกลาง" (แน่นอนว่าเพื่อความสะดวกในการวางตำแหน่งเป็นหลัก คุณสามารถวิเคราะห์ปัญหาเฉพาะเจาะจงได้โดยละเอียด และคุณจะได้รับข้อมูลเชิงลึกโดยลองเพิ่มเติม)

เคล็ดลับ: ภาพเคลื่อนไหว Flash อาจถูกสร้างขึ้นด้วยลิงก์แบบโต้ตอบได้เช่นกัน วิธีนี้ทำให้คุณสามารถเพิ่มไฮเปอร์ลิงก์ได้มากเท่าที่คุณต้องการ ปลั๊กอินนั้นมีขีดจำกัดสูงสุด 10 รายการ ซึ่งสามารถแก้ไขได้โดยใช้ Flash! ^_^