ธันวาคม 13, 2018, 08:12:24 PM *
ยินดีต้อนรับคุณ, บุคคลไม่รู้ว่าใคร กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
หน้า: [1]   ลงล่าง
  พิมพ์  
วิธีการทำ Navigation เป็น Responsive Webboard สำหรับบอร์ด SMF 1.1.xx ครับ  (อ่าน 8415 ครั้ง)
ไร้คอนเซปต์ ******* ออฟไลน์ ออฟไลน์ เพศ: ชาย พลังสะสม: 18055
พฤษภาคม 27, 2013, 03:10:52 PM
ผลงาน: 1730
อาร์ตทูบี
Administrator
ไร้คอนเซปต์
*******

ผลงาน: 1730
ออฟไลน์ ออฟไลน์

เพศ: ชาย
พลังสะสม: 18055


เว็บไซต์
« เมื่อ: พฤษภาคม 27, 2013, 03:10:52 PM »
วิธีการทำ Navigation เป็น Responsive Webboard สำหรับบอร์ด SMF 1.1.xx ครับ (Simple Machines Forum)

สมัยนี้หลายๆเว็บเริ่มนิยมการทำเว็บไซต์ให้เป็น Web Responsive กันบ้างแล้ว
คือการปรับหน้าจอให้เหมาะสมกับอุปกรณ์ที่ใช้ เช่น มือถือ แทปเล็ต หรือ เดสก์ทอป
แต่ตัวโค้ดเดิมของบอร์ด SMF ส่วนใหญ่ยังใช้ table เป็นตัวจัด layout อยู่
เราจึงต้องมีการดัดแปลงนิดหน่อยเพื่อให้การแสดงผลยืดหยุ่นมากขึ้น
ผมมีตัวอย่างง่ายๆ มาแนะนำครับ ให้เพื่อนๆลองทำกันดูครับ

Demo : ดูตัวอย่างคลิ๊ก



วิธีทำเพียง 2 ขั้นตอน
1. ที่ไฟล์ Themes/default/Style.css ให้เพิ่มโค้ดที่บรรทัดสุดท้ายลงไปดังนี้ครับ

โค๊ด:
.main-nav {
width:100%;
text-align:center;
border-top:#000 5px solid;
}

.main-nav ul{
margin: 0px;
padding-left:0px;
}

.main-nav ul li {
background: url('http://www.art2bempire.com/board/Themes/default/images/maintab_back.gif');
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
list-style-type: none;
display:block;
padding:6px 0px 6px 0px;
border-bottom:#000 1px solid;
}

.main-nav ul li a {
color: #fff; /* 8B8B8B*/
font-weight: normal;
text-decoration: none;
}

.main-nav ul li a:hover {
color: #FFCC00;
border-bottom:#FFCC00 4px solid;
}

.main-nav ul li a.current {
color: #FFCC00; /*#8B8B8B*/
border-bottom:#FFCC00 4px solid; /* ddd*/
padding-bottom:1px;
text-shadow: #727272 0.1em 0.1em 0.2em;
}

/*===============Navigation:SmartphoneOnly===============*/
@media (max-width: 479px) {
.main-nav {
border-bottom:#000 5px solid;
}
}
/*===============Navigation:Tablet===============*/
@media (min-width: 480px) {
.main-nav ul li {
background: url('http://www.art2bempire.com/board/Themes/default/images/maintab_back.gif');
display:block;
float: left;
width:33.3333%;
line-height: normal;
padding:5px 0px 5px 0px;
border-right:0px;
}
.main-nav ul li a.current {
padding-bottom:1px;
}

.post-display-rows{
display:none;
}
}
/*===============Navigation:Desktop===============*/
@media (min-width: 769px) {
.main-nav{
float:right;
height:32px;
}
.main-nav ul li {
background: url('http://www.art2bempire.com/board/Themes/default/images/maintab_back.gif');
display:inline;
float: left;
width:auto;
line-height: normal;
padding:0px 0.75% 0px 0.75%;
border:0px;
border-bottom:#000 1px solid;
}
.main-nav ul li:first-child {
padding-left:1.75%;
list-style-type:none;
}
.main-nav ul li:last-child {
padding-right:1.20%;
}
.main-nav ul li a {
display: block; /* IE6, IE7 line height fix */
padding-bottom: 5px;
padding-top: 0px;
margin-top: 5px;
margin-right: 6px;
color:#fff;
}
.main-nav ul li a:hover {
padding-bottom:1px;
}
.main-nav ul li a.current {
color: #FFCC00;
border-bottom:#FFCC00 4px solid;
padding-bottom:1px;
}

}

2. ที่ไฟล์ Themes/default/index.template.php ให้หาบรรทัดที่เขียนว่า // Show the start of the tab section. ให้ลบโค้ดที่เป็น <table> จนถึง </table> ทิ้งไป แล้วแทนที่ด้วยโค้ดต่อไปนี้ครับ
โค๊ด:
//main-nav
echo '
<div class="main-nav">
<ul>';


// Show the [home] button.
echo '<li ',($current_action == 'home') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '" ',($current_action == 'home') ? ' class="current"' : '' , '>' , $txt[103] , '</a>' , '</li>';

// How about the [search] button?
if ($context['allow_search'])
echo '<li ',($current_action == 'search') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '?action=search" ',($current_action == 'search') ? ' class="current"' : '' , '>' , $txt[182] , '</a>' , '</li>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '<li ',($current_action == 'admin') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '?action=admin" ',($current_action == 'admin') ? ' class="current"' : '' , '>' , $txt[2] , '</a>' , '</li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '<li ',($current_action == 'profile') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '?action=profile" ',($current_action == 'profile') ? ' class="current"' : '' , '>' , $txt[79] , '</a>' , '</li>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo '<li ',($current_action == 'pm') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '?action=pm" ',($current_action == 'pm') ? ' class="current"' : '' , '>' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>' , '</li>';



// The [calendar]!
if ($context['allow_calendar'])
echo '<li ',($current_action == 'calendar') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '?action=calendar" ',($current_action == 'calendar') ? ' class="current"' : '' , '>' , $txt['calendar24'] , '</a>' , '</li>';

// the [member] list button
if ($context['allow_memberlist'])
echo '<li ',($current_action == 'mlist') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '?action=mlist" ',($current_action == 'mlist') ? ' class="current"' : '' , '>' , $txt[331] , '</a>' , '</li>';



// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo '<li ',($current_action == 'login') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '?action=login" ',($current_action == 'login') ? ' class="current"' : '' , '>' , $txt[34] , '</a>' , '</li>';

// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo '<li ',($current_action == 'register') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '?action=register" ',($current_action == 'register') ? ' class="current"' : '' , '>' , $txt[97] , '</a>' , '</li>';

// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo '<li ',($current_action == 'logout') ? ' class="current"' : '' , ' >
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" ',($current_action == 'logout') ? ' class="current"' : '' , '>' , $txt[108] , '</a>' , '</li>';

echo '
</ul>
</div>';
//End : main-nav

หลังทดสอบย่อขยาย Browser ก็จะพบว่าเว็บบอร์ดของเรากลายเป็น Responsive Web ไปแล้วล่ะ ไม่ยากเลยใช่มั๊ยครับ ^_^
สำหรับใครที่อ่านโค้ด CSS เป็น สามารถประยุกต์ปรับหน้าตา เปลี่ยน Background ดูได้นะครับ enjoy!.



รับจดโดเมน รับฝาก-ดูแลเว็บไซต์ ทำเว็บ เขียนโปรแกรม โฆษณา Google Adwords
พูดคุยเป็นการส่วนตัวคลิ๊กเลยครับ


หน้า: [1]   ขึ้นบน
  พิมพ์  
 
กระโดดไป:  

Powered by MySQL Powered by PHP Valid XHTML 1.0! Valid CSS!