ข่าว IT ล่าสุด
ถูกใจอย่าลืม Like Fanpage
สร้างเมนูให้เว็บไซต์ง่าย ๆ ด้วย css style
แสดงแล้ว 12661 ครั้ง /
กันยายน 27, 2010, 09:13:57

Moshi

ออฟไลน์
กระทู้ : 16,996
คะแนนขอบคุณ : 45
it4x สังคมแห่งการเรียนรู้
สร้างเมนูให้เว็บไซต์ง่าย ๆ ด้วย css style

เว็บไซต์ทุกเว็บไซต์จะต้องมีสิ่งที่ขาด ไม่ได้อยู่ 1 อย่าง คือ "เมนู" ซึ่งทำให้ผู้ใช้งานสามารถที่จะเข้าถึงหน้าเว็บเพจต่าง ๆ ของเว็บไซต์ได้อย่างสะดวก ซึ่งเมนูของเว็บไซต์ในปัจจุบันนั้นมีอยู่หลาย เช่น เมนูแนวตั้ง,แนวนอน, อนิเมชั่นเมนู,multi level menu และอื่น ๆ อีกมาย ขึ้นอยู่กับการออกแบบของแต่ละคน โดยเมนูเหล่านั้นอาจไม่จำเป็นต้องสวยเริดหรูมากมายสักเท่าใดนัก แค่ให้สามารถที่จะตอบสนองผุ้งานเว็บไซต์ได้อย่างเต็มที่ สะดวก และสามารถนำทางผุ้ใช้งานเว็บไซต์ได้ก็พอแล้ว

วันนี้เลยเอาโค้ด CSS สร้างเมนูแนวนอนแบบง่าย ๆ มาให้ดูกัน

HTML Code

 

CSS Code

1.ทำการกำหนดขนาดของเมนูที่่เราต้องการ ก่อน ทั้งความกว้าง และความยาว แต่ในที่นี้ไม่ได้กำหนดเอาไว้เพื่อให้เมนูสามารถขยายได้ตามความยาวตัวอักษร

#menu{
       padding:0;
    margin:0;
    position:relative;
  }
  #menu ul{
    padding:0;
    margin:0;
    list-style:none;
    float:left;
  }

2.สร้างเมนูแต่ละอัน เพื่อกำหนดรูปร่างเมนูให้เป็นไปตามที่เราต้องการ โดยให้เรากำหนดขนาดความกว้าง width:auto หรือเราจะปล่อยไว้เฉย ๆ โดยไม่กำหนดก็เหมือนกัน ซึ่งการกำหนดให้ width:auto นั้นเพื่อให้ขนาดของเมนูขยายตามความยาวตัวอักษร

#menu ul li{
       padding:0;
    margin:0 5px 0 0;
    display:block;
    float:left;
  }

3.กำหนดรูปแบบ link หรือรูปลักษณ์ที่ต้องการจะแสดงออกมาตามต้องการ

#menu ul li a{
       width:auto;
    height:auto;
    padding:0px 10px;
    margin:0;
    float:left;
    font:bold 13px/15px Tahoma, Verdana, sans-serif;
    color:#000;
    text-align:center;
    text-decoration:none;
  }

4.กำหนดรูปแบบเมนูเมื่อเราเอาเมาส์ไปชี้ค้างเอาไว้

#menu ul li a:hover{
       text-decoration:underline;
  }

5.กำหนดรูปแบบแสดงหน้าปัจจุบัน ว่าผู้ใช้งานอยุ่ในหน้าใด

#menu ul li.current{
       padding:0px 10px;
    margin:0 5px 0 0;
    display:block;
    float:left;
    font:bold 13px/15px Tahoma, Verdana, sans-serif;
    color:#0099FF;
    text-decoration:underline;
    text-align:center;
  }

ผลลัพธ์

simple-css-menu

ซึ่งเราสามารถนำไปดัดแปลงเป็นเมนูรูป แบบต่าง ๆ ได้อีกหลายแบบตามที่ต้องการได้ โดยการใช้โค้ด CSS รูปแบบเดียวกัน แต่ทำการแก้ไข และตกแต่งเพิ่มเติม

simple-css-menu-with-curren-state

border-css-menu

curve-css-menu-cream

curve-css-menu-dark-green

ซึ่งเราสามารถตกแต่งเพิ่มเติมโดยการใส่พื้นหลังให้กับเมนูได้ โดยที่ต้องสร้างรูปพื้นหลังออกเป็น 2 ส่วน ดังรูป

รูปที่ 1 submenu-l

รูปที่ 2 submenu-r

โดยให้ใส่รูปที่ 1 ในแท็ก li ดังโค้ด

#menu ul li{
       height:24px;
    padding:0 0 0 10px;
    margin:0 5px 0 0;
    display:block;
    float:left;
    background:url(images/submenu-l.gif) no-repeat left;
  }

ต่อจากนั้นให้เรากำหนดรูปที่ 2 ลงในแท็ก a ดังโค้ด

#menu ul li a{
       width:auto;
    height:auto;
    padding:0px 21px 0 10px;
    margin:0;
    float:left;
    font:bold 13px/24px Tahoma, Verdana, sans-serif;
    color:#7A6B44;
    text-align:center;
    text-decoration:none;
    background:url(images/submenu-r.gif) no-repeat right;
  }

หลังจากนั้นให้เรากำหนดรูปแบบหน้าปัจจุบันด้วย โดยใช้รูปที่เราสร้างขึ้น

submenu-active-l

submenu-active-r

#menu ul li.current{
       margin:0 5px 0 0;
    display:block;
    float:left;
    font:bold 13px/24px Tahoma, Verdana, sans-serif;
    color:#fff;
    background:url(images/submenu-active-l.gif) no-repeat left;
  }
  #menu ul li.current span{
    padding:0px 21px 0 10px;
    margin:0;
    display:block;
    float:left;
    background:url(images/submenu-active-r.gif) no-repeat right;
  }

แล้วให้เราไปแก้โค้ด HTML เล็กน้อย โดยการเอาคลาส current ไปใส่ไว้ในแท็ก li แล้วทำการลบแท็ก a ออก และให้ใส่แท็ก span ลงไปแทน

 

ซึ่งจะทำให้เรามีเมนูแนวนอนที่ทำด้วย CSS แบบง่าย ๆ และธรรมดาได้แล้วจ๋า ซึ่งสามารถใช้ได้ทั้งใน Mozilla Firefox และ ie7 (ยังไม่ได้ทดสอบกับ ie6 แต่คาดว่าน่าจะใช้ได้ ถ้าไม่ได้ยังไงก็มาโพสคอมเม้นบอกไว้ได้นะจ๊ะ)



ขอบคุณเจ้าของบทความนี้ >> [direct]http://web.ofebia.com/contents/view/194.htm[/direct]

Thank : [direct]http://web.ofebia.com/[/direct]


metal4x

ออฟไลน์
กระทู้ : 12
คะแนนขอบคุณ : 0
ตุลาคม 23, 2010, 22:40:17

มีประโยชน์ อีกแลวคัรบ  ::)

 

ด้วยฟังค์ชั่น ตอบด่วน คุณสามารถใช้โค๊ดและ เครื่องหมายแสดงอารมณ์ได้ เหมือนการตั้งกระทู้ธรรมดา แต่สามารถทำได้สะดวกกว่า

ระวัง: หัวข้อนี้ไม่มีการอัพเดทมานานถึง 120 วัน

แจ้งเตือน: โพสของคุณจะไม่แสดงจนกว่าผู้ดูแลจะอนุมัติ.
ชื่อ: อีเมล์: