ไร้คอนเซปต์

Smart Phone Club & Computer Webmaster Programmer => ปรับแต่ง SMF (Simple Machines Forum) ขั้นเทพ => ข้อความที่เริ่มโดย: อาร์ตทูบี ที่ พฤษภาคม 27, 2013, 03:10:52 PM



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

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

Demo : ดูตัวอย่างคลิ๊ก (http://www.art2bempire.com/article/demo/nav-responsive.html)

(http://www.art2bempire.com/article/images/2013-05-27_nav-responsive.png)

วิธีทำเพียง 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!.