לא יודע מה איתכם אבל כשאני גולש באינרנט באתרים (במחשב או בסמארטפון) והתפריט שלהם נפתח ונסגר בצורה מגניבה, זה עושה לי ממש כייף ואני אפילו משתעשע לרגע בלפתוח ולסגור כמה פעמים... למשל תפריטים מהסוג הזה - תפריט אנימטיבי מגניב ב - jQuery
אז איך עושים תפריט מגניב?
קודם כל נבנה תפריט פשוט ב HTML.
אפשר לראות השתמשתי בלינק <a> בתוך תגית <nav> על מנת ליצור את הלינק שיפתח את התפריט. זה כמובן לא חייב להיות לינק זה יכול להיות כל דבר שתרצו ופשוט אפשר להוסיף cursor: pointer וזה בסדר גמור.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<head> <title>Untitled</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="my.css"> </head> <body> <div class="container"> <nav> <a href="#" class="round-button fa fa-bars menu" aria-hidden="true"> </a> <ul> <li><a href="#" class="menulink"><span class="fa fa-home iconz" aria-hidden="true"></span><p>בית</p></a></li> <li> <a href="#"><span class="fa fa-info" aria-hidden="true"></span><p>אודות</p></a></li> <li><a href="#"><span class="fa fa-picture-o" aria-hidden="true"></span><p>גלריה</p></a></li> <li><a href="#"><span class="fa fa-phone" aria-hidden="true"></span><p>צור קשר</p></a></li> </ul> </nav> <h1> </h1> </div> <script src="jqmenu.js"></script> </body> |
השלב הבא יהיה לעשות עיצוב קל לתפריט שיראה יפה. אני בחרתי לעשות אותו כפתור עגול צף על האתר ותמונת רקע שיהיה נחמד בעין.
CSS של התפריט שלנו
להלן ה - CSS אפשר לראות שהחלק שעושה את התפריט מעניין זה האנימציה בשימוש ש transition . מה שבאמת מעניין אתכם זה כל הסטייל שקורה באלמנטים בקלאס של menu וב - ul ששניהם משתנים כתוצאה מה Jquery.
כל השאר זה כבר תלוי בכם ובאופי הפרויקט שלכם.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
body { width: 100%; margin: 0 auto; max-width: 90%; background:linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url('bg_nice.jpg'); background-size: cover; font-family: 'arial', sans-serif; } nav { position: absolute; } .container nav a.menu { color: rgba(0,0,0,0.4); font-size: 18px; height: 16px; text-shadow: 0.5px 0.5px 1px #80c0f0, 0 0 0 #4684b3; text-decoration: none; position: fixed; top: 30px; padding: 16px; background: #80c0f0; border-radius: 100px; box-shadow: 1px 1px 4px rgba(0,0,0,0.2); transition: background linear 0.6s , color linear 0.3s , height 0.3s; } .container nav a.menu:hover { color: #fff; background: #3b8ecc; } .tran { height: 200px !important; background: #3b8ecc !important; } ul { display: none; list-style-type: none; font-size: 12px; font-family: 'arial', sans-serif; text-align: left; position: relative; top: 50px; left: 0px; padding-left: 10px; } ul li { color: #fff; } ul li a { list-style-type: none; color: #fff; text-align: left; padding: 10px } ul li a span { color: #fff; text-align: center; } ul li a p { display: inline-block; padding-left: 30px; } h1 { color: #fff; font-size: 48px; text-shadow: 1px 0px 3px rgba(0,0,0,0.6); position: relative; top: 180px; text-align: center; } |
הקלאסים חדשים מופיעים ונעלמים עם כל לחיצה.
בשביל לגרום לתפריט להיכנס ולצאת בצורה יפה נצטרך אלמנט שיעשה עבורנו את העבודה הזו. כל מה שנצטרך זה קלאס class אחד עם מורכבות קלה של CSS וקצת JQUERY ואנחנו מסודרים! (עד לשלב הדסקטופ כי במובייל זה מעט יותר מורכב).
אפשר לראות שוב שה CSS של קלאס ה - menu מורכבת מ transition והגודל שלו רק 16 פיקסלים. בזכות Jquery ופונקציית toggleClass אני מוסיף ערך שמגדיל את ה menu לגודל של 200 פיקסלים לגובה וכך אני מקבל תפריט שמשנה את גודלו באנימציה. עוד עשיתי פונקציה שמעלימה ומחזיקה את התפריט וככה אנחנו מקבלים תצוגה של הלינקים של התפריט שלנו בצורה מגניבה.
להלן הקוד של ה Jquery:
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $(".menu").click(function(){ $(this).toggleClass("tran"); $("ul").fadeToggle(); }) }); |
צפו בדוגמה של התפריט בלינק הזה
יש לך מה להגיד? אשמח לתגובה