CSS TAB เมนูรูปแบบใหม่

[administrator]

คุณสามารถเปลี่ยนเมนูร้านค้า ให้เป็นแบบ CSS TAB ตามภาพตัวอย่างด้านล่าง จะเป็นเมนูมาตรฐาน ซึ่งมี หน้าแรก, เกี่ยวกับเรา, ติดต่อเรา, วิธีชำระเงิน, เว็บบอร์ด, เพื่อนบ้าน หากต้องการเมนูเพิ่มเติมจะต้องแก้ไขและจะต้องมีความรู้ HTML บ้าง
วิธีทำ
1. เข้าระบบ แล้ว ไปที่เมนู รูปแบบเว็บไซต์ -> แก้ไข
2. เลือก แก้ไข (HTML)
3. แทนที่ บรรทัดคำสั่ง <wsa menu/> ด้วย โค๊ดดานล่าง
4. แก้ไข &p=demo เป็น &p=ชื่อร้านของคุณ

โค๊ด Select Expand


<style type="text/css">
<!--
BODY {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px;
MARGIN: 0px; FONT-SIZE: 12px; FONT-FAMILY: Microsoft Sans Serif; COLOR: #000000;
PADDING-TOP: 0px; voice-family: inherit
}
UNKNOWN {
        FONT-SIZE: small
}
#header {
        FONT-SIZE: 12px ; BACKGROUND: url(/images/csstab/round/bg.gif) #dae0d2 repeat-x 50% bottom;
FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
}
#header UL {
        PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px;
PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#header LI {
        PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(/images/csstab/round/left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#header A {
        PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(/images/csstab/round/right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765;
PADDING-TOP: 5px; TEXT-DECORATION: none
}
#header A {
        FLOAT: none
}
#header A:hover {
        COLOR: #333
}
#header #current {
        BACKGROUND-IMAGE: url(/images/csstab/round/left_on.gif)
}
#header #current A {
        BACKGROUND-IMAGE: url(/images/csstab/round/right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333
}
-->
</style>
             <div id="header">
                        <ul>
                                <!-- CSS Tabs -->
<li><a href="index.php?page=th_หน้าแรก&p=demo">หน้าแรก</a></li>
<li><a href="index.php?page=th_เกี่ยวกับเรา&p=demo">เกี่ยวกับเรา</a></li>
<li><a href="index.php?page=th_ติดต่อเรา&p=demo">ติดต่อเรา</a></li>
<li><a href="index.php?page=th_วิธีชำระเงิน&p=demo">วิธีชำระเงิน</a></li>
<li><a href="index.php?page=th_เว็บบอร์ด&p=demo">เว็บบอร์ด</a></li>
<li><a href="index.php?page=th_เพื่อนบ้าน&p=demo">เพื่อนบ้าน</a></li>
                        </ul>
                </div>       


[administrator]

สีชมพู

โค๊ด Select Expand


<!-- ## CSS Tab -->
<style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY: Microsoft Sans Serif;
}

h2 {
        FONT-WEIGHT: bold; FONT-SIZE: 14px; FONT-FAMILY: Microsoft Sans Serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

img {
border: none;
}

/*- Menu Tabs 8--------------------------- */

    #tabs8 {
      float:left;
      width:100%;
      background:#FCF1F6;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #E276A7;
      }
    #tabs8 ul {
          margin:0;
          padding:10px 10px 0 50px;
          list-style:none;
      }
    #tabs8 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs8 a {
      float:left;
      background:url("/images/csstab/pink/tableft8.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs8 a span {
      float:left;
      display:block;
      background:url("/images/csstab/pink/tabright8.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#333;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac */
    #tabs8 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs8 a:hover span {
      color:#591333;
      }
    #tabs8 a:hover {
      background-position:0% -42px;
      }
    #tabs8 a:hover span {
      background-position:100% -42px;
      }

      #tabs8 #current a {
              background-position:0% -42px;
      }
      #tabs8 #current a span {
              background-position:100% -42px;
      }
-->
</style>
<div id="tabs8">
<ul>

<li><a href="/index.php?page=th_หน้าแรก&p=demo"><span>หน้าแรก</span></a></li>
<li><a href="/index.php?page=th_เกี่ยวกับเรา&p=demo"><span>เกี่ยวกับเรา</span></a></li>
<li><a href="/index.php?page=th_ติดต่อเรา&p=demo"><span>ติดต่อเรา</span></a></li>
<li><a href="/index.php?page=th_วิธีชำระเงิน&p=demo"><span>วิธีชำระเงิน</span></a></li>
<li><a href="/index.php?page=th_เว็บบอร์ด&p=demo"><span>เว็บบอร์ด</span></a></li>
<li><a href="/index.php?page=th_เพื่อนบ้าน&p=demo"><span>เพื่อนบ้าน</span></a></li>

</ul>
                </div>     
<!-- ## END CSS Tab -->


[zara678]

Thanks its very useful for me

[embeautyshop]

จะเปลี่ยนสีรวมถึง tab เมนู ซ้าย ขวา หรือส่วนกลางหรือป่าวค่ะ  อยากได้เป็นสีชมพูทั้งหมด

[administrator]

หากต้องการเปลี่ยนสีหรือขนาดของเมนู ดูวิธีที่คู่มือการใช้งานร้านค้า เรื่อง
เมนูร้านค้า -> เมนูการใช้งาน และ เมนู สินค้า - ตั้งค่าเมนู