พิมพ์หน้านี้ - รบกวนสอบถามปัญหาเมนู....css ...(ภาพประกอบสี่สี)

หัวข้อ: รบกวนสอบถามปัญหาเมนู....css ...(ภาพประกอบสี่สี)
เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 30 กรกฎาคม 2009, 10:28:51

(http://img208.imageshack.us/img208/8259/csssubmenu.jpg)

ดีครับ..เเบบว่าจะเพิ่มซับเมนูเเบบดร็อปดาวน์ของ service ลงมาเป็น aa bb cc ดั่งภาพตัวอย่าง
เราจะต้องเพิ่มอะไรบ้าง ตามข้างล่างนี้ครับ

<div class="navi">
<ul id="menu" class="grey">
<li><a href="#">home</a></li>
   <li class="active"><a href="#">service</a></li>
   <li><a href="#">product</a></li>
</ul>
</div>

#menu {
   xx
xxx
   }
#menu li {
   float: left;
   margin: 0;
   }
#menu li a {
   text-decoration: none;
   display: block;
   }
#menu li a:hover, #menu li.active a {
   background-color: #f5f5f5;
   border-bottom: 2px solid #DDD;
   color: #999;

   }

หัวข้อ: Re: รบกวนสอบถามปัญหาเมนู....css ...(ภาพประกอบสี่สี)
เริ่มหัวข้อโดย: homekung ที่ 30 กรกฎาคม 2009, 15:15:47

น่าจะต้องใช้ javascript นะครับ... :-*

script

โค๊ด:

<script language="JavaScript"><!--
function goThere(form){
var linkList=form.selectThis.selectedIndex
if(!linkList==""){window.location.href=form.selectThis.options[linkList].value;}
}
//--></script>

html แล้วค่อยใส่ css เอาครับ

โค๊ด:

<form name="dropMenu">
	<select name="selectThis" size="1" onChange="goThere(this.form);">
	<option selected value="">a
	<option value="">b
	<option value="">v
	<option value="">d
	</select>
</form>

หัวข้อ: Re: รบกวนสอบถามปัญหาเมนู....css ...(ภาพประกอบสี่สี)
เริ่มหัวข้อโดย: WPDSign ที่ 30 กรกฎาคม 2009, 15:19:05

มารอฟังด้วยครับ

ใช้ css ไม่ค่อยเป็นเหมือนกัน

หัวข้อ: Re: รบกวนสอบถามปัญหาเมนู....css ...(ภาพประกอบสี่สี)
เริ่มหัวข้อโดย: mafiary ที่ 30 กรกฎาคม 2009, 15:19:41

ลองดูครับ

โค๊ด:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

หัวข้อ: Re: รบกวนสอบถามปัญหาเมนู....css ...(ภาพประกอบสี่สี)
เริ่มหัวข้อโดย: Bes ที่ 30 กรกฎาคม 2009, 16:17:08

ตัวอย่าง www.tmb.co.th (http://www.tmb.co.th) ลองเอา css ของเค้ามาดูครับ น่าจะได้ตามที่ต้องการ

หัวข้อ: Re: รบกวนสอบถามปัญหาเมนู....css ...(ภาพประกอบสี่สี)
เริ่มหัวข้อโดย: ttong ที่ 30 กรกฎาคม 2009, 17:21:48

โค๊ด:

http://meyerweb.com/eric/css/edge/menus/demo.html

แบบ css ล้วนๆ

หัวข้อ: Re: รบกวนสอบถามปัญหาเมนู....css ...(ภาพประกอบสี่สี)
เริ่มหัวข้อโดย: Kobsoft ที่ 30 กรกฎาคม 2009, 17:50:01

:-[ ลองๆ ศึกษาวิธีนี้ดูนะคับ ผมก็เขียนสดมั่วๆ เอา

ในลำดับชั้นของ Element การทำ CSS MENU มี Sub Menu 1 ขั้นโดยการใช้ Pure CSS ก็ให้เขียน CSS บังคับชั้นหรือ Tree นั้นๆ ได้โดยการระบุลำดับชั้นตายตัวคล้ายๆ แบบนี้นะคับ สมมุติ

โค๊ด:

<ul> // UL1
  <li> // LI1
    <ul>  //UL2
      <li></li>  //LI2
    </ul>
  </li>
</ul>

-----------------------
ความเข้าใจลำดับชั้นนะคับ

UL1 เป็นตัวอยุ่ชั้นนอกสุด ระบุ CSS ได้โดย ul
LI1 อยู่ด้านใน UL1 ระบุ CSS ได้โดย ul li
UL2 อยู่ด้านใน LI1 ระบุ CSS ได้โดย ul li ul
LI2 อยู่ด้านใน UL2 ระบุ CSS ได้โดย ul li ul li

เราสามารถควบคุมการแสดงผลได้ด้วยเทคนิค event handle onmouse over สำหรับใน CSS ใช้ :hover

เช่นเมื่อต้องการให้แสดง Submenu (UL2) เมื่อนำพอยเตอร์ไปวางบน Menu หลัก (LI1) ก็ให้เขียน

ul li:hover ul

คับ

:P (แสดงผลได้เร็วกว่าใช้ js onmouseover แล้วก็ไม่ใช้ทรัพยากรเครื่อง Client ด้วยคับ)

SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com

ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: เป็นติ่งไรเนี่ย ที่ 30 กรกฎาคม 2009, 10:28:51