מאיר כהן
meir@haravdotnet.co.ilבפוסט זה נראה איך ליצור תפריט צד נגלל לאתר שלכם.
התוצאה תראה כך
סגור:
ופתוח:
לצורך הגלילה של התפריט אשתמש לשם הנוחות והקיצור גם ב – JQuery אך ניתן כמובן לבצע זאת באמצעות javascript בלבד (לצורך הרצת הקוד המצורף תצטרכו לייבא את ספריית JQuery כמובן)
נתחיל מה – html:
<div id=”side-menu”>
<ul>
<li>Dashboard</li>
<li>Media Library</li>
<li>Settings</li>
<li>Dashboard</li>
<li>Media Library</li>
<li>Settings</li>
<li>Dashboard</li>
<li>Media Library</li>
<li>Settings</li>
<li>Dashboard</li>
<li>Media Library</li>
<li>Settings</li>
</ul>
</div>
הגדרנו כפתור שבלחיצה עליו מופעלת פונקציה בשם toggleSideMenu (שמיד נכתוב אותה), ומיד לאחריו את התפריט עצמו. התפריט מורכב מ – div המכיל בתוכו רשימה.
באמצעות הגדרות css נסדר את המעטפת כך שתהיה בגודל המתאים לתפריט צד כלומר גובה מסך מלא ורוחב מתאים, בנוסף ניתן צבע רקע לתפריט, צבע מתאים לטקסט, נגדיר שבמעבר על אפשרות בחירה מהתפריט ישתנה הצבע של הטקסט שלו ונגדיר שהמצביע יהיה יד ולא חץ.
החלק המעניין הוא ההגדרות הללו:
position: fixed;
top: 0px;
left: -350px;
height: 100%;
width: 350px;
background-color: #292929;
}
הגדרנו שהתפריט יהיה fixed כלומר יהיה קבוע במקום שנגדיר לו ולא יגלל עם הדף ללמטה, קביעת המיקום שלו אפשרית באמצעות אחד מארבעת המאפיינים top botton left right שמקבלים כמה פיקסלים האלמנט יהיה רחוק מהם בהתאמה (כמובן שניתן להשתמש רק בשניים תואמים בו זמנית ולא בכל הארבעה יחד).
אנו רוצים שבטעינה של הדף התפריט יהיה מוסתר, ולכן היות והרוחב שלו הוא 350px נגדיר שהמרחק שלו מצד שמאל של החלון יהיה מינוס 350px כלומר מוסתר לחלוטין. מאוחר יותר באמצעות הפונקציה toggleSideMenu נגרום לו להופיע.
הנה הגדרות העיצוב המלאות של התפריט (כמובן שהעיצוב הוא בסיסי והדמיון שלכם הוא הגבול):
input[type=”button”]{
height: 50px;
width: 200px;
position: absolute;
top: calc(50% – 25px);
left: calc(50% – 100px);
background-color: #292929;
color: white;
border: none;
cursor: pointer;
}
#side-menu{
position: fixed;
top: 0px;
left: -350px;
height: 100%;
width: 350px;
background-color: #292929;
}
ul{
margin: 50px 50px;
}
li{
color: white;
font-size: 24px;
height: 50px;
list-style-type: none;
cursor: pointer;
}
li:hover{
color: aqua;
}
</style>
ההגדרה הראשונה היא כמובן של הכפתור – צבענו אותו מעט, נתנו רוחב וגובה ומיקמנו אותו באמצע העמוד.
ועכשיו לחלק האחרון – הנה מה שקורה בלחיצה על הכפתור:
function toggleSideMenu() {
var sideMenu = $(‘#side-menu’);
if ($(sideMenu).css(‘left’) == “0px”) {
$(sideMenu).animate({
left: ‘-350’
}, 300);
}
else {
$(sideMenu).animate({
left: ‘0’
}, 300);
}
}
</script>
ראשית אנו בודקים האם התפריט כרגע מוצג או מוסתר, לצורך כך ראשית מצאנו את התפריט באמצעות JQuery, והכנסנו אותו למשתנה בשם sideMenu.
לאחר מכן בדקנו באמצעות מתודת .css של JQuery האם הערך החוזר מהמאפיין left שווה ל – 0 פיקסלים כלומר מוצג, או מוסתר, בשני המקרים אני קורא לפונקציה animate של JQuery ומגדיר שהמאפיין left יקבל את הערכים 0 ומינוס 350 בהתאמה.
המתודה animate בצורה שהשתמשנו בה יותעת לקבל שני פרמטרים, הראשון אובייקט עם הגדרות css למיניהם, והשני את הזמן שיקח להגדרות הללו להשתנות בחלקי שניה בדוגמא לעיל הגדרנו שזה יקח 300 חלקי שניה (וכמובן שזה יקרה באנימציה) .
עד כאן להיום ולסיום רק נוסיף את הקוד המלא של הדף כולו (שימו לב לייבא ספריית JQuery):
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Side menu</title>
<script src=”jquery-1.11.3.min.js”></script>
<style>
input[type=”button”]{
height: 50px;
width: 200px;
position: absolute;
top: calc(50% – 25px);
left: calc(50% – 100px);
background-color: #292929;
color: white;
border: none;
cursor: pointer;
}
#side-menu{
position: fixed;
top: 0px;
left: -350px;
height: 100%;
width: 350px;
background-color: #292929;
}
ul{
margin: 50px 50px;
}
li{
color: white;
font-size: 24px;
height: 50px;
list-style-type: none;
cursor: pointer;
}
li:hover{
color: aqua;
}
</style>
<script>
function toggleSideMenu() {
var sideMenu = $(‘#side-menu’);
if ($(sideMenu).css(‘left’) == “0px”) {
$(sideMenu).animate({
left: ‘-350’
}, 300);
}
else {
$(sideMenu).animate({
left: ‘0’
}, 300);
}
}
</script>
</head>
<body>
<input type=”button” onclick=”toggleSideMenu()“ value=”Click me!” />
<div id=”side-menu”>
<ul>
<li>Dashboard</li>
<li>Media Library</li>
<li>Settings</li>
<li>Dashboard</li>
<li>Media Library</li>
<li>Settings</li>
<li>Dashboard</li>
<li>Media Library</li>
<li>Settings</li>
<li>Dashboard</li>
<li>Media Library</li>
<li>Settings</li>
</ul>
</div>
</body>
</html>