วันนี้เปลี่ยนโหมดมาแจกโค้ดสั้นๆ กันดีกว่า :D
 
เราเคยเขียนเอนทรี่เกี่ยวกับการทำ leg แบบสามกล่องเอาไว้ ใครสนใจก็ไปดูได้
ส่วนงวดนี้ก็เกี่ยวข้องกับส่วน leg อีกเช่นกัน แต่งวดนี้มาแบบเรียบๆ ง่ายๆ
 
ของจริงสามารถดูที่ท้ายบล็อกนี้ หรือ จะลองเล่นจาก http://jsfiddle.net/sgSZU/ ก็ได้นะ
(เวลาทดลองให้กด Run อย่ากด Update นะ ^^;)
 
 ※ TO DOWNLOAD: สามารถไปเอาโค้ดที่ http://jsfiddle.net/sgSZU/ หรือท้ายเอนทรี่ค่ะ 
 
รูปด้านล่างจะไฮไลท์ส่วนที่เกี่ยวข้องกับโค้ดโดยรวมๆ (แต่ไม่ทุกอย่าง)
 
 
อธิบายโค้ดบางส่วนแล้วกันนะ 
#leg{
    background: #fff; <-- สีพื้นหลังที่ต้องการ ถ้าไม่ต้องการก็สามารถใส่ none ค่ะ
    widthความกว้างที่ต้องการ (เป็น px); <-- ใส่ให้น้อยกว่าหรือเท่ากับขนาด belly/neck
    text-alignleft;
    padding25px 0;
}
#leg .module {
    display:inline;
    margin:0px;
    width:100%;
    font:12px Tahoma; <-- ขนาดฟ้อนต์ที่ต้องการ (ไม่ต้องใส่ชื่อฟ้อนต์ ถ้าไม่ได้ต้องการจะเปลี่ยน)
}
#leg .module h2{ <-- ส่วนหัวข้อ Recommended, Previous
    width100%;
    marginauto;
    padding10px 0px 0px 10px;
    padding-right:3px;
    text-transformcapitalize;
    fontitalic normal 18px 'Georgia';
    border-bottom1px solid #F8F0E8;
    text-align:left;
    color:#ccc;
} 
#leg .module ul {
    width:90%;
    display:inline-block; <-- ใส่ให้ตัว li อยู่ในบรรทัดเดียวกัน
    margin0px auto;
    padding15px;
}

#leg .module li {
    text-aligncenter;
    display:table-cell;
    list-style-type:none;
    padding:2px 5px;
    border-right1px solid #ccc; <-- ทำให้มีเส้นด้านขวาระหว่างลิ้งค์ค่ะ 
}

/* Remove the right border of the last li element */
#leg .module li:last-of-type {
    border-width0px; <-- แต่อันสุดท้ายเราจะเอาเส้นด้านขวาออกไปแทน
}

#leg .module li {
    color#000; <-- สีลิ้งค์ปกติ
}

#leg .module li a:hover{
    color:#FFF<-- สีลิ้งค์เวลาเอาเม้าส์วางทับ
}

#leg .module li:hover{
    background:#999<-- สีพื้นหลังของ li เวลาที่เราเอาเม้าส์วางทับ (ไม่เกี่ยวข้องกับลิ้งค์)
}

CODE
/* Leg Menu */
#leg{
    background: #FCFCFC;
    width: 600px;
    text-align: left;
    padding: 25px 0;
}
#leg .module{
    background:none;
    display:inline;
    margin:0px;
    width:100%;
    font:12px Tahoma, Arial;
}
#leg .module ul{
    width:90%px;
    display:inline-block;
    margin: 0px auto;
    padding: 0 15px;
}
#leg .module h2{
    width: 100%;
    border-right:0px solid #000;
    padding-right:3px;
    text-transform: capitalize;
    font: italic normal 18px 'Georgia';
    border-bottom: 1px solid #F8F0E8;
    margin: auto;
    padding: 10px 0px 0px 10px;
    text-align:left;
    color:#ccc;
}

#leg .module li {
    text-align: center;
    display:table-cell;
    list-style-type:none;
    padding:2px 5px;
    border-right: 1px solid #ccc;
}

/* Remove the right border of the last 
  • element */ #leg .module li:last-of-type { border-width: 0px; } #leg .module li a { color: #000; } #leg .module li a:hover{ color:#FFF; } #leg .module li:hover{ background:#999; }

  • หวังว่าจะเป็นประโยชน์ต่อหลายๆ คนนะ 8D 
    มีคำถามอะไรก็สามารถทิ้งคอมเม้นต์เอาไว้หรือจะ EMS มาก็ได้

    Comment

    Comment:

    Tweet

    ขอบคุณมากคะ

    #9 By J u ★ k i A ` on 2013-09-26 16:16

    ขอบคุณค่ะ open-mounthed smile

    #8 By ◘ Rinshinwa on 2012-05-16 14:34

    สวยงามมากจ้าา Hot! Hot! Hot!

    #7 By timo on 2012-05-05 13:10

    Hot! Hot! Hot! ขอบคุณค่ะมีประโยชน์มาให้เสมอเลย
    Hot! ข้อมูล มี ประโยชน์

    #5 By p.cobra on 2012-04-28 16:46

    ตอนนั้น Leg 3 กล่อง เราเอาไปทำเป็นส่วน Neck แทนค่ะ ชอบมากๆเลย cry

    #4 By Prae on 2012-04-27 10:55

    ขอบคุณค่า!! X'D Hot!

    #3 By Kuro★Nyaa~ on 2012-04-26 16:08

    ขอบคุณค่ะ Hot! confused smile

    #2 By exteen on 2012-04-26 13:08

    ขอบคุณคร้าบbig smile

    #1 By CGshelf on 2012-04-26 12:01