Slide menu เพื่อประยุกต์ทำ Mobile App : Javascript
 

Blog :: Javascript :: Slide menu เพื่อประยุกต์ทำ Mobile App

ห่างหายไปนานกับการเขียนบล็อกใน function กลับมาคราวนี้เลยอยากมาลองนำเสนอ Workshop ของ Javascript เล็กๆ น้อยๆ ซึ่ง Workshop ครั้งนี้ได้แรงบรรดาลใจมากจาก พวก Mobile App หรือ Web App ที่ชอบซ่อนเมนูไว้ด้านข้าง แล้วพอผู้ใช้จะเรียกใช้เมนูเหล่านั้นก็จะลากมันออกมา ถ้าใครยังไม่เห็นภาพลองเข้าไปได้ที่ m.facebook.com หรือไม่ลองโหลด App ของพวกเว็บข่าวมาลองใช้ดูซึ่งส่วนใหญ่จะใช้ concept แบบนี้กันหมด

ตัวอย่างของผมที่ทำเสร็จแล้ว Demo
มาเริ่มกันเลย อันดับแรกจะขออธิบายหลักการกันก่อน ขออนุญาตอธิบายแบบภาษาบ้านๆ ไม่ต้องภาษาวิชาการหรือศัพท์เทคนิคอะไรมากมาย


นี่มีรูปภาพประกอบด้วยเลย :)
หลักการมันก็คือง่ายๆ เลยครับ ให้ถูกคนมองตรงกรอบสีแดงเป็นหลัก ซึ่งเป็นพื้นที่แสดงผลของเบราเซอร์ของเรา ในรูปแรกนั้น พอโหลดหน้าเว็บขึ้นมาแถบ LeftMenu ก็จะถูกซ่อนไว้ด้านซ้ายมือของหน้าจอเลย หลังจากนั้นพอผู้ใช้คลิกที่ปุ่ม สามขีด สีเขียว ในส่วนของ LeftMenu ก็จะสไลด์ออกมาแสดง จากนั้นในส่วนของ rightMenu ก็จะถูกดันไปทางด้านขวา เหมือนกับภาพที่สอง ลองจินตนาการตามกันไปเรื่อยๆ นะครับ
มาเริ่มในส่วนของ HTML กันเลย
<div id="wrap">
    	<div id="leftSide">
        <div id="leftMenuTitle"><h1>Menu</h1></div>
        <div id="listMenu">
        	<ul>
            	<li onclick="rightClose();">&raquo;&nbsp;Home</li>
                <li onclick="rightClose();">&raquo;&nbsp;About me</li>
                <li onclick="rightClose();">&raquo;&nbsp;Contact me</li>
            </ul>
        </div>
        </div>
        <div id="rightSide">
        	<div id="titlePage">
            	<div id="expandMenu" onclick="toggle();">=</div> <!-- ปุ่มสำหรับคลิกเพื่อแสดง ในส่วนของ leftSide-->
                <div id="titleText"><h1>Menu Title</h1></div>
                <div class="clear"></div>
            </div>
			<div id="content" onclick="rightClose();" ></div>
        </div>
    </div>
อันดับแรกผมสร้าง div ใหญ่สุดชื่อ wrap ขึ้นมาก่อนเลย ภายใน wrap ก็จะมี leftSide และ rightSide ย่อยลงอีกใน leftSide ก็จะมีในส่วนของ leftMenuTitle สำหรับแสดงหัวข้อเมนู และ listMenu ใช้แสดงเมนูหลักต่าง และในส่วนของ rightSide ภายในก็จะประกอบไปด้วย titlePage และ content ถ้าใครยังนึกภาพไม่ออกลองไปแกะโค้ดในตัวอย่างที่ผมทำเสร็จตามลิงก์เลยครับ

มาดูในส่วนของ CSS กันบ้าง
*{
	font-family:'Open Sans',sans-serif;
}
body{
	margin:0px;
	overflow:hidden;/*[5] ซ่อน scroll bar หลัก ของเบราเซอร์*/
	background-color:#999;
}
.clear{
clear:both;
}
#wrap{
	left:-200px; /*[1] ค่าเริ่มต้นจะเป็น -200 เพราะเรากำหนดขนาดของ leftSide ไว้ 200*/
	position:relative;
	transition:left 0.5s ease; /*[4] ให้ในส่วนของ leftSide ค่อนเลื่อนออกมา*/
}
#leftSide{
	width:200px; /* [2] ความกว้างของleftSide เท่ากับ 200*/
	float:left;
	background-color:#003D59;
}
#rightSide{
	float:left;
	transition:opacity 1s ease; /*[3] ใส่ transition เข้าไปเพราะเมื่อ leftSide ออกมา ในส่วนของ rightSide ก็จะจางลงไป*/
}
#titlePage{
	background-color:#fff;
	width:100%;
	height:auto;
	padding:3px;
}
#titlePage #titleText{
	width:auto;
}
#titlePage #titleText h1{
	width:auto;
	margin:auto;
	text-align:center;
}
#titlePage #expandMenu{
	cursor:pointer;
	float:left;
	width:auto;
	border-radius:3px;
	background-color:#069;
	padding:0px 18px;
	font-size:34px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	
}
#titlePage #expandMenu:hover{
	background-color:#00324A;
}
#content{
	background-color:#E1F5FF;
	height:40px;
}
#leftMenuTitle{
	margin:auto;
	background-color:#002233;
	padding:3px;
}
#leftMenuTitle h1{
	color:#fff;
	text-align:center;
	margin:auto;
}
#listMenu ul{
	margin:0px;
	padding:0px;
}
#listMenu ul li {
	padding:3px 0px 3px 10px;
	list-style:none;
	margin:3px 0px;
	color:#FFF;
	background-color:#0070A6;
	font-size:18px;
	cursor:pointer;
}
#listMenu ul li:hover{
	background-color:#009CE8;
}

ตามหมายเหตุที่ [1] เรากำหนดค่าเริ่มต้นของ div wrap เป็น -200 px ซึ่งจะทำให้ wrap ซ่อนขนาด 200 px แรกซึ่งเป็นในส่วนของ leftSide เอาไว้ อีกอย่างหนึ่งการกำหนดค่าใน หมายเหตุที่ [1] นั้นควรสัมพันธ์กับ หมายเหตุที่ [2] ซึ่งเป็นส่วนของการกำหนดความกว้างของ leftSide ส่วน หมายเหตุที่ [3] และ [4] นั้น เป็นการเพิ่ม transition เข้าไปเพื่อให้การแสดงผลดูน่าใช้มากขึ้น

เมื่อเสร็จในส่วนของ HTML และ CSS แล้วทีนี้เรามาดูในส่วนของ Javascript กันบ้าง
var state = 0;
function $(elmId){
	return document.getElementById(elmId);
}/*ฟังก์ชัน เพื่อดึง Element ที่ต้องการเรียก*/

/*adjustSize ฟังก์ชันสำหรับการปรับขนาดส่วนประกอบต่างให้เข้ากับหน้าจดได้อย่างพอดี*/
function adjustSize(){
	var widthWindow = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
	var heightWindow = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
	/* หาค่า ความสูงและกว้างของขนาดหน้าจอ*/
	$("wrap").style.width = widthWindow + $("leftSide").offsetWidth+'px';
	/*ความกว้างของ wrap จะเท่ากับขนาดของหน้าจอ + ขนาดของ leftSide*/
	$("wrap").style.height = heightWindow+'px';
	/*ความสูงของ wrap เท่าหับขนาดของหน้าจอ*/
	$("leftSide").style.height = heightWindow+'px';
	/*ความสูงของ leftSide เท่ากับขนาดของหน้าจอ*/
	$("rightSide").style.width = widthWindow+'px';
	/*ความกว้างของ rightSide เท่ากับขนาดของหน้าจอ*/
	$("rightSide").style.height = heightWindow+'px';
	/*ความสูงของ leftSide เท่ากับขนาดของหน้าจอ*/
	$("content").style.height = heightWindow - $("titlePage").offsetHeight+'px';
	/*ความสูงของ content หรือส่วนที่แสดงเนื้อหา จากตัวอย่างจะกำหนดจาก ขนาดของหน้าจอ - ขนาดความาูงของ titlePage แต่ถ้าหากจะนำไปประยุกต์ก็แล้วแต่ว่าจะเพิ่มในส่วนของ titlePage ขึ้นมาหรือไม่*/
}
/*show และ hide ฟังก์ชันแสดงการซ่อนและแสดงเนื้อหา*/
function show(){
	$("wrap").style.left = 0+'px';
}
function hide(){
	$("wrap").style.left = -($("leftSide").offsetWidth)+'px';
}
/*toggle ฟังก์ชั่นที่ซ่อนและแสดงในปุ่มเดียว แรกใช้ร่วมกับตัวแปร state ซึ่งกำหนดไว้ 0 = ปิด 1 = เปิด*/
function toggle(){
	if(state == 0){
		show();
		$("rightSide").style.opacity = 0.5;
		state =1;
	}else{
		hide();
		$("rightSide").style.opacity = 1;
		state = 0;
	}
}

/*rightClose ฟังก์ชันเพื่อให้ผู้ใช้สามารถคลิกที่ว่างตรงด้านขวา เพื่อปิดเมนูด้านซ้าย*/
function rightClose(){
		if(state == 1){
			hide();
			$("rightSide").style.opacity = 1;
			state =0 ;
		}
}
ฟังก์ชันต่างจะถูกเรียกใช้ผ่าน onclick ในส่วนของ HTML นอกจากนั้นในส่วนของ <body> จะต้องมีเรียกใช้ให้ฟังก์ชัน adjustSize ออกมาทำงาน
และเรียกใช้ร่วมกับ event onresize เพื่อให้เวลามีการปรับขยาดของหน้าต่าง หรือมีการไปแสดงผลในอุปกรณ์อื่นจะได้แสดงผลได้อย่างถูกต้องและไม่ผิดเพี้ยน

adjustSize();
window.onresize = adjustSize;

พอมาถึงขั้นตอนนี้คงจะพอเห็นเป็นรูปเป็นร่างกันแล้ว สิ่งที่ผมพยายามจะอธิบายให้ดูผมขอเรียกมันว่ากรณีศึกษาก็แล้วกัน หรือหากใครจะมองว่ามันเป็นการเลียนแบบหรืออะไรก็ตามแต่ ผมก็ไม่ได้ซีเรียสอะไร เพราะเราเองพยายามที่จะทำมันขึ้นมาเองและประยุกต์ให้มันออกมาทำงานได้แบบง่ายในฉบับของเรา อีกอย่างตามหัวข้อบทความ ที่ผมเขียนเอาไว้ว่า "เพื่อประยุกต์ทำ Mobile App" ตอนผมเริ่มเขียนมันขึ้นมา ผมวางไว้อยากจะให้มันแสดงผลได้ในทุกอุปกรณ์จริงๆ หากใครที่นำเอาไปใช้งานต่อแล้วอยากจะประยุกต์ร่วมกับพวก Web responsive หรือไม่เขียนร่วมกับ Ajax ก็จะทำให้วัตถุประสงค์ในด้านของการนำไปใช้เพื่อทำเป็น Mobile App ชัดเจนยิ่งขึ้น

สำหรับบทความในครั้งนี้ ขอจบแต่เพียงเท่านี้ หากใครส่งสัยหรือติดตรงไหน ลองแกะตามที่ผมเขียนเสร็จไว้แล้วกัน เพราะนานๆ ทีผมจะได้เข้ามาตอบ

ว่างๆ เข้าไปแวะชมบล็อกของผมได้ที่ www.flovlr.com
ขอให้สนุกกับการเขียนเว็บนะครับ ;)

0 Comment

  • Have no comment.

Comment Blog

 
 
 
Share This Topic Login with Facebook