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