احتمالن خیلیاتون وقتی با موبایل یا تبلت مشغول وبگردی بودید تو بعضی از سایت ها مثل یوتیوب یا گوگل دیدید که یه دکمه گوشه بالا سمت چپ وجود داره که وقتی روش کلیک می کنید از سمت چپ یک منو باز میشه و کل صفحه رو به سمت راست هدایت میکنه تا اون منو از سمت چپ بزنه بیرون! خب این یه کار سادست با یک کتابخونه جاوااسکریپت که اسمش هست Snap.js . منم قراره امروز نحوه استفاده از اون رو بزارم. (لابد دیدید که تو صفحه شخصی جدید خودم هم ازش استفاده کردم:دی)
قبلش یه توضیح کلی: واسه این کار اول باید دو تا صفحه داشته باشیم که اولی رو دومی باشه و یه کلید روی اولی. وقتی کلید رو زدیم باید صفحه اولی به اندازه ۲۶۶px (یا هر مقدار دلخواه که خودتون تعریف می کنید) به سمت چپ (یا راست) بره تا اون قسمت از صفحه زیری که میخاید ظاهر بشه!
خب حالا دست به کد میشیم. اول کد های HTML رو آماده می کنیم:
<html xmlns="http://www.w3.org/1999/xhtml" lang="fa-ir"> <head> <title>Mohammadreza Shahmohammadi</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://jakiestfu.github.io/Snap.js/snap.js"></script> </head> <body> <div id="page" class="front"> <a id="myToggleButton" class="btn-sidebar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> Front </div> <div class="sidebar"> sidebar </div> </body> </html>
خب اولش که جی کوئری و اسنپ رو فراخوانی میکنیم. شما می تونید فایل جی کوئری رو از اینجا و فایل اسنپ رو از اینجا بگیرید. حالا اینجا یه صفحه داریم با آی دی page که همون صفحه اولی خودمونه و فقط همینش مهمه و کلاسش واسه استایل دادنه. یه صفحه دیگه هم داریم به اسم sidebar که اصلن مهم نیست اسمش چی میخاد باشه چون جاش ثابته و ما فقط واسه اینکه بهش استایل بدیم واسش کلاس تعریف می کنیم. روی صفحه اول هم یه المان داریم با آی دی myToggleButton که فقط همینش مهمه و کلاسش واسه استایل دهی هست.
البته به جای کلاس از همون آی دی ها هم میتونستیم واسه استایل استفاده کنیم ولی خواستم اینجوری بهتر توضیح داده باشم که کدوم ها واسه کد جاوااسکریپت مهم هستن. (الان فهمیدید دیگه، هر کدوم که id داره واسه کد جاوااسکریپتمون مهمه:دی)
حالا میریم سراغ کد CSS که از این قراره:
body{overflow-x:hidden}
.front{position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;z-index:2;background:#ff0}
.btn-sidebar{background:#fff;position:absolute;margin:1em 0 0 1em;padding:5px;border:1px solid #000;-webkit-border-radius:3px;border-radius:3px;}
.btn-sidebar:hover{cursor:pointer;border:1px solid #888;box-shadow:inset 0 0 1px 0 #888;background:#ccc;}
.icon-bar{display:block;width:22px;height:3px;background:#000;-webkit-border-radius:1px;border-radius:1px;margin:2px 0 2px 0;}
.btn-sidebar:hover .icon-bar{background:#888;}
.sidebar{position:absolute;top:0;bottom:0;left:0;width:266px;height:auto;background:#222;color:#9f9f9f;}
اینم از استایل دهی. اینجا btn-sidebar منظور کل دکمه ی سایدبار هست و icon-bar اون سه تا خط وسط هستن. حالا شما هم میتونید از عکس استفاده کنید واسه اون سه تاخط هم از کد CSS. من راه دوم رو ترجیح دادم. sidebar صفحه زیری هست و front هم صفحه ای که پیشفرض دیده میشه. برای اینکه وقتی صفحه جلویی کنار میره اسکرول بار دیده نشه از overflow-x:hidden استفاده می کنیم
تا اینجا که همش قالب بندی و جسم کار بود. حالا بریم سراغ روح کار یا همون کد JavaScript:
var snapper = new Snap({
element: document.getElementById('page'),
dragger: document.getElementById('page'),
disable: 'right',
easing: 'ease',
maxPosition: 266,
minPosition: -266,
tapToClose: true,
touchToDrag: true,
transitionSpeed: 0.3,
minDragDistance: 1,
hyperextensible: true
});
var myToggleButton = document.getElementById('myToggleButton');
if ($("#myToggleButton").length>0) {
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
};
element: میگه که قراره واسه کدوم المان من ساید بار داشته باشم!؟ مام بهش میگیم واسه پیجی که آی دی اون page هست و به زبان جاوااسکریپت میشه document.getElementById(‘pa’) .
dragger: میگه اگه قرار باشه به جای اون دکمه گوشه، با کشیدن به سمت چپ و راست سایدبار ظاهر بشه، دوست داری کدوم المان این کارو واست انجام بده!؟ مام بهش میگیم کل صفحه یا document.getElementById(‘page’) . هر المان دیگه ای هم میشه گذاشت یا حتا اون دکمه هم میتونه باشه.
disable: میگه کجام غیر فعال باشه!؟ ما چون سایدبارمون رو میخایم از سمت چپ باز بشه میگیم سمت راست غیر فعال باشه. اگه خاستیم منو از سمت راست باز شه میگیم چپ غیرفعال بشه. اگه خواستیم از هر دو طرف باز بشه میگیم none.
easing: میگه من چه شکلی باز بشم!؟ ما میتونیم از ease و linear و easeOutBack استفاده کنیم.
hyperextensible: که true یا false میتونه باشه. اگه رو اولی باشه میتونیم ویژگی بعد رو براش تعریف کنیم. اگه رو دومی باشه نمیتونیم.
maxPosition و minPosition: طول منو از سمت راست و چپ رو مشخص میکنه.
tapToClose: میگه اگه رو صفحه رویی کلیک (یا تپ) کردیم آیا سایدبار بسته بشه!؟ میتونیم true یا false بزاریم.
touchToDrag: اگه true باشه ویژگی dragger فعال میشه.
transitionSpeed: سرعت باز و بسته کردن ساید بار رو مشخص می کنه
minDragDistance: اگه درگ کردن فعال بشه حداقل فاصله برای انجام ویژگی درگ رو مشخص میکنه. مثلن اگه روی ۱۰px باشه اگه ۹px اون المان رو بکشیم درگ کردن عمل نمیکنه و سایدبار باز نمیشه.
ادامه کد هم دکمه و صفحه ای که کنار میره رو مشخص میکنه و همچنین سمتی که باید بره. اگه خواستید سمت راست هم ساید بار داشته باشید قسمت دوم رو دوباره تکرار می کنید و یه دکمه دیگه واسش تعریف می کنید مثلن myToggleButton2 و تو کدش به جای left، right می زارید. قبلش هم باید disable رو none قرار بدید.
این هم از نتیجه کار:
See the Pen luDtd by Mohammadreza (@mrshm) on CodePen
توضیحات بیشتر درباره ویژگی های رو میتونید اینجا بخونید و همچنین نمونه دیگه کار رو هم اینجا ببینید.
این اولین آموزشم بود. کم و کاستی ها رو ببخشید 🙂
تا بعد موفق باشید