فرادرسساخت منو با جاوا اسکریپت – از صفر تا صد + نمونه کد و مثال
ساخت منو با جاوا اسکریپت یکی از راه‌های ایجاد رابطهای کاربری تعاملی و پاسخگو است که کاربران را مشتاق به استفاده از وب‌سایت یا پلتفرم میکند. با ادغام یکپارچه جاوا اسکریپت، «HTML» و «CSS»، میتوان عملکرد وبسایتها را دگرگون کرد و به کاربران این امکان را داد که به آسان‌ترین شکل ممکن وب‌سایت را پیمایش کنند. منوها یکی از مهم‌ترین اجزای رابطهای کاربری در وبسایتها و وب اپلیکیشن‌ها هستند که «تجربه کاربری» (User Experience یا به اختصار UX) را بسیار بهبود می‌بخشند. در این مطلب از «مجله فرادرس» قصد داریم صفر تا صد ایجاد منو در جاوا اسکریپت را بیان کنیم و در کنار آن ۱۰ منوی جذاب و کاربردی را همراه با منبع کد آن‌ها ارائه کنیم، پس اگر دوست دارید ساخت منو با Javascript را یاد بگیرید و در کنار آن به نمونه منوهایی دسترسی داشته باشید که بتوانید با آن‌ها تمرین کنید، تا آخر این مطلب با ما همراه باشید.
منوی جاوا اسکریپت چیست؟
منوی وب‌سایت جنبه‌ای حیاتی از طراحی وب است که به عنوان رابط اصلی برای تعامل با کاربر عمل میکند. اگرچه منوی اولیه ساخته شده با HTML و CSS در بیشتر موارد پاسخگوی نیازهای وب‌سایت است اما یکپارچه‌سازی آن‌ها با جاوا اسکریپت خلاقیت را به پروژه تزریق میکند و تجربه کلی کاربر را ارتقا میدهد. منوهای جاوا اسکریپت، چه به صورت نوارهای کناری، ناوبری هدر، یا منوهای موبایل و غیره، تعاملی پیشرفته را ارائه می‌دهند. استفاده از جاوا اسکریپت امکان کنترل دقیق روی رویدادهای کلیک را فراهم میکند و از محدودیت‌های CSS به‌تنهایی فراتر می‌رود. نتیجه ادغام جاوا اسکریپت با HTML و CSS در ساخت منو، نه‌تنها موجب ایجاد منویی جذاب میشود، بلکه عملکردهای ارزشمندی فراتر از قابلیتهای HTML و CSS را نیز به منوهای ساده اضافه میکند.
برای ساخت منو از چه فناوری هایی استفاده میشود؟
برای ساخت منوهای ساده میتوان از دو فناوری مهم وب یعنی HTML و CSS استفاده کرد ولی با این حال بسته به نیازهای پروژه و ترجیات طراح سایت و توسعهدهنده وب میتوان از فناوریهای دیگری مانند زبان برنامه نویسی جاوا اسکریپت نیز بهره برد که استفاده از این فناوری موجب عملگرا کردن و جذابیت بخشیدن به منوها میشود.
مزایای ساخت منو با جاوا اسکریپت چیست؟
ساخت منو با جاوا اسکریپت امکانات بسیاری را به وبسایتها اضافه میکند. این روش به توسعهدهندگان اجازه میدهد تا منوهای پویا و تعاملی را با استفاده از قابلیتهای جاوا اسکریپت ایجاد کنند. با استفاده از جاوا اسکریپت، میتوان به سرعت واکنشگرایی و تغییرات بر اساس اطلاعات دینامیک را فراهم کرد. همچنین، این روش امکانات فراوانی در اختیار کاربران قرار خواهد داد و تجربه کاربری را بهبود میبخشد.
ساخت منو با جاوا اسکریپت
در این بخش از مطلب به صورت قدم به قدم به ساخت منو با جاوا اسکریپت خواهیم پرداخت. منویی که قرار است در این مطلب به ساخت آن بپردازیم از نوع منوی کشویی یا همان منوی «Dropdown» است که در بیشتر وبسایتها مورد استفاده قرار می‌گیرد. این منو قرار است در ٣ قدم ساده برای کاربران تشریح شود که در ادامه این مطلب این ٣ مرحله آمده است.
مرحله ۱. علامت گذاری برای ایجاد منوی کشویی
قدم اول در ساخت منو با جاوا اسکریپت، مربوط به علامت گذاری منو است. برای شروع، آیکون‌های موردنیاز را از «Boxicons» که نوعی کتابخانه آیکون رایگان بوده و استفاده از آن ساده است، وارد خواهیم کرد. برای این هدف باید تگ اسکریپت زیر را در هدر فایل HTML اضافه کرد:
1<head>
2 <link
3 href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
4 rel="stylesheet"
5 />
6 </head>پس از واردکردن نمادها، یک divکانتینری باید ایجاد شود تا هم دکمه و هم منوی کشویی را در بر بگیرد. همچنین در کانتینر باید نوعی عنصر دکمه ایجاد شود که کلاس و شناسه آن روی btnتنظیم شده است. متن دکمه را میتوان سفارشی کرد و نوعی نماد پیکان برای جذابیت بصری به آن افزود که این کار با کد زیر امکان‌پذیر است:
1<button class="btn" id="btn">
2 Dropdown
3 <i class="bx bx-chevron-down" id="arrow"></i>
4</button>حال نوبت به ادغام آیکون‌های منوی کشویی خواهد رسید. مستقیم در زیر تگ دکمه، باید نوعی عنصر divبا کلاس و id تنظیم شده به Dropdownساخته شود. در این div، باید برای هر آیتم منوی کشویی خاص، تگ A در HTML برای ایجاد لینک باید ایجاد شود و آیکون‌ها و متن مربوطه را باید به آن‌ها اختصاص داد. قطعه کد زیر برای انجام این کار است:
1<div class="dropdown" id="dropdown">
2 <a href="#create">
3 <i class="bx bx-plus-circle"></i>
4 Create New
5 </a>
6 <a href="#draft">
7 <i class="bx bx-book"></i>
8 All Drafts
9 </a>
10 <a href="#move">
11 <i class="bx bx-folder"></i>
12 Move To
13 </a>
14 <a href="#profile">
15 <i class="bx bx-user"></i>
16 Profile Settings
17 </a>
18 <a href="#notification">
19 <i class="bx bx-bell"></i>
20 Notification
21 </a>
22 <a href="#settings">
23 <i class="bx bx-cog"></i>
24 Settings
25 </a>
26</div>خروجی کد زیر چیزی شبیه به تصویر زیر خواهد بود:
کار هنوز تکمیل نشده است و منویی که ایجاد میشود باید تکمیل‌تر شود که در ادامه این مطلب از ساخت منو با جاوا اسکریپت به آن پرداخته شده است.
مرحله ۲. استایل بخشیدن به منو با Css
کار استایل بخشیدن به منوها با تنظیم مجدد «حاشیه» (Margin) پیش‌فرض و «فضای اطراف محتوا» (Padding) برای هر عنصر صفحه و ایجاد مقادیر قابل‌استفاده مجدد به وسیله متغیرها شروع خواهد شد. همچنین در این منو از خانواده فونت Interبرای زیبایی استفاده میشود. همچنین سبک‌های مورد استفاده برای عنصر بدنه، تنظیم حاشیه، رنگ پس‌زمینه، اندازه فونت و رنگ متن به صورت زیر هستند:
1@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);
2
3* {
4 margin: 0;
5 padding: 0;
6 box-sizing: border-box;
7 font-family: "Inter", sans-serif;
8 --shadow: rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
9 rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
10 --color: #166e67;
11 --gap: 0.5rem;
12 --radius: 5px;
13}
14
15body {
16 margin: 2rem;
17 background-color: #b3e6f4;
18 font-size: 0.9rem;
19 color: black;
20}کار بعدی در استایل بخشیدن به منو، شکل دادن به دکمه و کانتینر بازشو است که برای انجام این کار باید باید وظایف زیر را انجام داد:
- استفاده از متغیرهای تعریف شده برای مقادیر ثابت
- استفاده از box shadowsو رنگ‌های پس‌زمینه برای افزایش جذابیت بصری
- تنظیم paddingو «شعاع حاشیه» (border-radius) برای ظاهری صیقلی و جذاب
قطعه کد انجام این کار به صورت زیر است:
1.btn {
2 background-color: white;
3 display: flex;
4 align-items: center;
5 justify-content: flex-start;
6 column-gap: var(--gap);
7 padding: 0.6rem;
8 cursor: pointer;
9 border-radius: var(--radius);
10 border: none;
11 box-shadow: var(--shadow);
12 position: relative;
13}
14
15.bx {
16 font-size: 1.1rem;
17}
18
19.dropdown {
20 position: absolute;
21 width: 250px;
22 box-shadow: var(--shadow);
23 border-radius: var(--radius);
24 margin-top: 0.3rem;
25 background: white;
26}
27
28.dropdown a {
29 display: flex;
30 align-items: center;
31 column-gap: var(--gap);
32 padding: 0.8rem 1rem;
33 text-decoration: none;
34 color: black;
35}
36
37.dropdown a:hover {
38 background-color: var(--color);
39 color: white;
40}از آنجایی که منوهای کشویی معمولاً عناصر را پوشش می‌دهند، دکمه از نظر استراتژیک به صورت نسبی قرار می‌گیرد، در حالی که منوی کشویی به صورت مطلق تنظیم میشود. این امر نزدیکی بین دو عنصر را تضمین میکند و عناصر از نظر بصری روی یکدیگر قرار می‌گیرند. این نوع چیدمان دکمه از نمایش یکپارچه صفحه محافظت کرده و تجربه کاربری یکپارچه را حفظ میکند. خروجی کارهای بالا تا این مرحله از ساخت منو با جاوا اسکریپت به صورت زیر است:
اکنون‌که منوی کشویی ما تغییرات سبک خود را دریافت کرده است، هدف ما این خواهد بود که اطمینان حاصل کنیم که این منو فقط با کلیک روی دکمه ظاهر میشود، نه اینکه بلافاصله با باز شدن صفحه وب قابل‌مشاهده باشد. برای دستیابی به این هدف، از CSS برای مخفی کردن کشویی ابتدایی، استفاده خواهد شد. برای این کار باید از نوعی استراتژی برای پنهان کردن منوی کشویی استفاده شود. نمونه‌ای زنده از این نوع استراتژی نحوه پیاده‌سازی منوهای کشویی سایت «GitHub» هستند که هم قابل مشاهده بوده هم انتقال‌های متحرک را ارائه می‌دهند که تصویر آن به صورت زیر است:
برای دستیابی به هدف بالا باید در کلاس dropdownکه قبلاً تعریف شده بود، نوعی ویژگی visibilityرا روی hiddenو نوعی ویژگی opacity را که روی صفر تنظیم شده است، معرفی کرد. این پیکربندی پنهان‌سازی اولیه منوی کشویی را تضمین میکند. همچنین برای تکمیل کردن کارهای دستیابی به این هدف باید کلاسی مجزا به نام showایجاد شود. این کلاس دارای ویژگی visibilityتنظیم‌شده روی visibleو ویژگی opacityتنظیم‌شده روی ۱ است. این کلاس، هنگامی که با جاوا اسکریپت اعمال و ادغام شود، منوی کشویی را در معرض دید کاربر قرار میدهد. قطعه کد انجام این کار به صورت زیر است:
1.dropdown {
2 position: absolute;
3 width: 250px;
4 box-shadow: var(--shadow);
5 border-radius: var(--radius);
6 margin-top: 0.3rem;
7 background: white;
8 transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);
9
10 transform: translateY(0.5rem);
11 visibility: hidden;
12 opacity: 0;
13}
14
15.show {
16 transform: translateY(0rem);
17 visibility: visible;
18 opacity: 1;
19}
20
21.arrow {
22 transform: rotate(180deg);
23 transition: 0.2s ease;
24}علاوه بر این در کد بالا، کلاسی به نام arrowبرای نماد فلش معرفی شده است که چرخش ۱۸۰ درجه‌ای را با کلیک روی دکمه کشویی تسهیل میکند.
مرحله ۳. عملگرا کردن منوی کشویی با جاوا اسکریپت
این مرحله از ساخت منو با جاوا اسکریپت برای عملگرا کردن آن، با ذخیره عناصر مربوطه در متغیرها برای قابلیت استفاده مجدد شروع خواهد شد که کد انجام این کار به صورت زیر است:
1const dropdownBtn = document.getElementById("btn");
2const dropdownMenu = document.getElementById("dropdown");
3const toggleArrow = document.getElementById("arrow");متعاقباً، تابعی به نام «toggleDropdown»باید ایجاد شود که مسئول تغییر کلاس showدر عنصر کشویی و چرخش فلش کشویی با کلیک روی دکمه است که کد آن به صورت زیر خواهد بود:
1const toggleDropdown = function () {
2 dropdownMenu.classList.toggle("show");
3 toggleArrow.classList.toggle("arrow");
4};این تابع را باید با استفاده از «متد AddEventListener» در دکمه dropdownفراخوانی کرد. این کار تضمین میکند که کلیک کردن روی دکمه عملکرد را فعال کرده، نمایشگر را مدیریت میکند و منوی کشویی را پنهان خواهد کرد که قطعه کد انجام این کار به صورت زیر است:
1dropdownBtn.addEventListener("click", function (e) {
2 e.stopPropagation();
3 toggleDropdown();
4});همچنین در ساخت منوی بالا باید به گنجاندن stopPropagation()در داخل تابع dropdownتوجه کرد. این متد از انتشار تابع عنصر دکمه به عنصر والد جلوگیری کرده و در نتیجه از اجرای دوباره تابع جلوگیری میکند. خروجی منوی جاوا اسکریپتی ما در این مرحله به صورت زیر است:
نحوه بستن منوی کشویی هنگام کلیک روی عنصر DOM
در ساخت منو با جاوا اسکریپت بستن منوهای کشویی معمولاً شامل چهار سناریوی زیر است:
- با کلیک بر روی دکمه‌ای که آن را فعال میکند
- با کلیک روی هر یک از عناصر فرزند آن
- کلیک کردن در خارج از منو (روی بدنه)
- کلید جهت‌دار پایین صفحه‌کلید یا کلید اسکیپ (Escape)
در این مطلب، ما بر روی سه سناریو اول تمرکز خواهیم کرد که کار با انتخاب عنصر ریشه «html» با استفاده از «document.documentElement» شروع میشود. مانند قبل، تابع toggleDropdown()باید وارد شود. با این حال، این بار، شرطی را برای بررسی اینکه آیا منوی کشویی شامل کلاس showاست یا خیر، باید معرفی کنیم. فقط زمانی که این شرط برآورده شود باید تابع بستن فعال شود که قطعه کد انجام این کار به صورت زیر است:
1document.documentElement.addEventListener("click", function () {
2 if (dropdownMenu.classList.contains("show")) {
3 toggleDropdown();
4 }
5});با اجرای شنونده رویداد بالا، کلیک کردن در خارج از منوی کشویی روی بدنه، آن را می‌بندد، تعامل کاربر را بهبود میبخشد و تجربه یکپارچه را تضمین میکند که خروجی نهایی به صورت زیر خواهد بود:
قطعه کد کامل ساخت منو با جاوا اسکریپت از نوع کشویی
قطعه کد کامل ساخت منوی کشویی با جاوا اسکریپت در زیر قرار داده شده که قطعه کد HTML این منوی جذاب به صورت زیر است:
1<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
2
3<div class="container">
4 <button class="btn" id="btn">
5 Dropdown
6 <i class="bx bx-chevron-down" id="arrow"></i>
7 </button>
8
9 <div class="dropdown" id="dropdown">
10 <a href="#create">
11 <i class="bx bx-plus-circle"></i>
12 Create New
13 </a>
14 <a href="#draft">
15 <i class="bx bx-book"></i>
16 All Drafts
17 </a>
18 <a href="#move">
19 <i class="bx bx-folder"></i>
20 Move To
21 </a>
22 <a href="#profile">
23 <i class="bx bx-user"></i>
24 Profile Settings
25 </a>
26 <a href="#notification">
27 <i class="bx bx-bell"></i>
28 Notification
29 </a>
30 <a href="#settings">
31 <i class="bx bx-cog"></i>
32 Settings
33 </a>
34 </div>
35</div>همچنین قطعه کد CSS کلی منوی ساخته شده به صورت زیر است:
1@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);
2
3* {
4 margin: 0;
5 padding: 0;
6 box-sizing: border-box;
7 font-family: "Inter", sans-serif;
8 --shadow: rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
9 rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
10 --color: #166e67;
11 --gap: 0.5rem;
12 --radius: 5px;
13}
14
15body {
16 margin: 2rem;
17 background-color: #b3e6f4;
18 font-size: 0.9rem;
19 color: black;
20}
21
22.btn {
23 background-color: white;
24 display: flex;
25 align-items: center;
26 justify-content: flex-start;
27 column-gap: var(--gap);
28 padding: 0.6rem;
29 cursor: pointer;
30 border-radius: var(--radius);
31 border: none;
32 box-shadow: var(--shadow);
33 position: relative;
34}
35
36.bx {
37 font-size: 1.1rem;
38}
39
40.dropdown {
41 position: absolute;
42 width: 250px;
43 box-shadow: var(--shadow);
44 border-radius: var(--radius);
45 margin-top: 0.3rem;
46 background: white;
47
48 visibility: hidden;
49 opacity: 0;
50 transform: translateY(0.5rem);
51 transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);
52}
53
54.dropdown a {
55 display: flex;
56 align-items: center;
57 column-gap: var(--gap);
58 padding: 0.8rem 1rem;
59 text-decoration: none;
60 color: black;
61}
62
63.dropdown a:hover {
64 background-color: var(--color);
65 color: white;
66}
67
68.show {
69 visibility: visible;
70 opacity: 1;
71 transform: translateY(0rem);
72}
73
74.arrow {
75 transform: rotate(180deg);
76 transition: 0.2s ease;
77}و در نهایت قطعه کد کامل جاوا اسکریپت منویی که در بالا ساختیم به صورت زیر است:
1const dropdownBtn = document.getElementById("btn");
2const dropdownMenu = document.getElementById("dropdown");
3const toggleArrow = document.getElementById("arrow");
4
5// Toggle dropdown function
6const toggleDropdown = function () {
7 dropdownMenu.classList.toggle("show");
8 toggleArrow.classList.toggle("arrow");
9};
10
11// Toggle dropdown open/close when dropdown button is clicked
12dropdownBtn.addEventListener("click", function (e) {
13 e.stopPropagation();
14 toggleDropdown();
15});
16
17// Close dropdown when dom element is clicked
18document.documentElement.addEventListener("click", function () {
19 if (dropdownMenu.classList.contains("show")) {
20 toggleDropdown();
21 }
22});۱۰ منوی نمونه ساخته شده با جاوا اسکریپت، HTML و CSS
در این بخش به عنوان نوعی تمرین جاوا اسکریپت ۱۰ نمونه منوی ساخته شده با جاوا اسکریپت، HTML و CSS ارائه خواهد شد. کاربران می‌توانند از منوهای ارائه شده ایده گرفته و آن را در پروژه‌های طراحی سایت و توسعه وب خود به کار بگیرند.
۱. منوی جاوا اسکریپت شیب صفحه
قطعه کد HTML منوی جاوا اسکریپت شیب صفحه به صورت زیر است:
1<div id="paper-back">
2 <nav>
3 <div class="close"></div>
4 <a href="#">Home</a>
5 <a href="#">About Us</a>
6 <a href="#">Our Work</a>
7 <a href="#">Contact</a>
8 </nav>
9</div>
10<div id="paper-window">
11 <div id="paper-front">
12 <div class="hamburger"><span></span></div>
13 <div id="container">
14 <section>
15 <h1>Page Tilt Menu Effect</h1>
16 <p>Click the hamburger icon to see it in action</p>
17 </section>
18 <section></section>
19 <section></section>
20 <section></section>
21 </div>
22 </div>
23</div>همچنین قطعه کد CSS این پروژه جاوا اسکریپت به صورت زیر است:
1body {
2 font-family: "Architects Daughter", sans-serif;
3}
4
5#paper-back {
6 width: 100%;
7 height: 100vh;
8 background-color: #243040;
9 position: fixed;
10 top: 0;
11 left: 0;
12 font-size: 33px;
13}
14#paper-back nav {
15 padding: 120px 34px;
16}
17#paper-back nav a {
18 display: block;
19 margin-bottom: 25px;
20 text-decoration: none;
21 color: rgba(255, 255, 255, 0.7);
22}
23
24#paper-window {
25 height: 100vh;
26 width: 100vw;
27 position: relative;
28 overflow-x: hidden;
29 overflow-y: scroll;
30 z-index: 2;
31}
32#paper-window.tilt {
33 overflow: hidden;
34 pointer-events: none;
35}
36#paper-window.tilt #paper-front {
37 transform: rotate(10deg) translateZ(0);
38}
39
40#paper-front {
41 pointer-events: auto;
42 position: relative;
43 z-index: 3;
44 background-color: white;
45 box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
46 transform-origin: center 70%;
47 transition: all 0.3s ease;
48}
49
50#container section {
51 height: 600px;
52 text-align: center;
53}
54#container section:first-of-type {
55 padding-top: 10vh;
56}
57#container section:first-of-type h1 {
58 font-size: 45px;
59}
60#container section:first-of-type p {
61 font-size: 25px;
62}
63@media (max-width: 600px) {
64 #container section:first-of-type {
65 padding-top: 15vh;
66 }
67 #container section:first-of-type h1 {
68 font-size: 30px;
69 }
70 #container section:first-of-type p {
71 font-size: 18px;
72 }
73}
74#container section:nth-of-type(2n) {
75 background-color: #edf1f5;
76}
77
78.hamburger {
79 position: fixed;
80 z-index: 4;
81 top: 30px;
82 left: 30px;
83 width: 45px;
84 height: 34px;
85 cursor: pointer;
86 -webkit-user-select: none;
87 -moz-user-select: none;
88 -ms-user-select: none;
89 user-select: none;
90}
91.hamburger span {
92 position: relative;
93}
94.hamburger span, .hamburger span:before, .hamburger span:after {
95 display: block;
96 width: 45px;
97 height: 6px;
98 background-color: #243040;
99 border-radius: 2px;
100}
101.hamburger span:before, .hamburger span:after {
102 content: "";
103 position: absolute;
104}
105.hamburger span:before {
106 bottom: -14px;
107}
108.hamburger span:after {
109 bottom: -28px;
110}
111
112.close {
113 position: fixed;
114 top: 30px;
115 left: 30px;
116 width: 45px;
117 height: 34px;
118 cursor: pointer;
119}
120.close:before, .close:after {
121 content: "";
122 position: absolute;
123 display: block;
124 width: 45px;
125 height: 6px;
126 top: 50%;
127 background-color: white;
128 border-radius: 2px;
129}
130.close:before {
131 transform: translateY(-50%) rotate(45deg);
132}
133.close:after {
134 transform: translateY(-50%) rotate(-45deg);
135}قطعه کد جاوا اسکریپت این منو هم به صورت زیر است:
1var paperMenu = {
2 $window: $('#paper-window'),
3 $paperFront: $('#paper-front'),
4 $hamburger: $('.hamburger'),
5 offset: 1800,
6 pageHeight: $('#paper-front').outerHeight(),
7
8 open: function() {
9 this.$window.addClass('tilt');
10 this.$hamburger.off('click');
11 $('#container, .hamburger').on('click', this.close.bind(this));
12 this.hamburgerFix(true);
13 console.log('opening...');
14 },
15 close: function() {
16 this.$window.removeClass('tilt');
17 $('#container, .hamburger').off('click');
18 this.$hamburger.on('click', this.open.bind(this));
19 this.hamburgerFix(false);
20 console.log('closing...');
21 },
22 updateTransformOrigin: function() {
23 scrollTop = this.$window.scrollTop();
24 equation = (scrollTop + this.offset) / this.pageHeight * 100;
25 this.$paperFront.css('transform-origin', 'center ' + equation + '%');
26 },
27 //hamburger icon fix to keep its position
28 hamburgerFix: function(opening) {
29 if(opening) {
30 $('.hamburger').css({
31 position: 'absolute',
32 top: this.$window.scrollTop() + 30 + 'px'
33 });
34 } else {
35 setTimeout(function() {
36 $('.hamburger').css({
37 position: 'fixed',
38 top: '30px'
39 });
40 }, 300);
41 }
42 },
43 bindEvents: function() {
44 this.$hamburger.on('click', this.open.bind(this));
45 $('.close').on('click', this.close.bind(this));
46 this.$window.on('scroll', this.updateTransformOrigin.bind(this));
47 },
48 init: function() {
49 this.bindEvents();
50 this.updateTransformOrigin();
51 },
52};
53
54paperMenu.init()خروجی منوی بالا به صورت زیر است:
در منوی ارائه‌شده بالا نوعی افکت شیب صفحه متمایز برای نشان دادن منوی سمت چپ استفاده میشود. با کلیک بر روی نماد همبرگر، منو به زیبایی فعال شده و باعث میشود کل بدنه اصلی با شیبی ظریف به سمت راست تغییر کند. با باز کردن منوی بالا نوعی انیمیشن یکپارچه باز میشود و تجربه بصری منحصربه‌فرد را ارائه میدهد. منو دارای دکمه بستن مخصوص به خود بوده و این در حالی است که نماد همبرگر به‌راحتی از نمای بالای صفحه خارج میشود و به طراحی زیبا و کاربرپسند کمک میکند.
۲. نمونه منوی کشویی جاوا اسکریپت
این مثال هم از ساخت منو با جاوا اسکریپت همانند مثال اولی که مراحل ساخت آن را پیش رفتیم از نوع کشویی بوده که قطعه کد HTML آن به صورت زیر است:
1<div class="flexDiv">
2 <button class="sec_btn" onclick="openMulti();">Add to feature vector</button>
3 <div class="selectWrapper">
4 <div class="multiSelect" id="menu-0">
5 <div class="bottomBorder">New feature vector</div>
6 <div onclick="openMulti();">Vector_01</div>
7 <div onclick="openMulti();">myVector</div>
8 <div onclick="openMulti();">featureVector</div>
9 <div class="topBorder iconDiv" onclick="nextMenu(event);">Other projects<i class="material-icons">arrow_right</i></div>
10 </div>
11 <div class="multiSelect" id="menu-1">
12 <div class="bottomBorder iconDiv noSpace narrow placeholder"><i class="material-icons">search</i>Search</div>
13 <div class="iconDiv justHover" onclick="nextMenu(event);">Project Example<i class="material-icons">arrow_right</i></div>
14 <div class="iconDiv justHover" onclick="nextMenu(event);">David’s project<i class="material-icons">arrow_right</i></div>
15 <div class="iconDiv justHover" onclick="nextMenu(event);">Project Idan<i class="material-icons">arrow_right</i></div>
16 <div class="iconDiv justHover" onclick="nextMenu(event);">Manhattan<i class="material-icons">arrow_right</i></div>
17 <div class="topBorder iconDiv noSpace" onclick="prevMenu(event);"><i class="material-icons">arrow_back</i>Back</div>
18 </div>
19 <div class="multiSelect" id="menu-2">
20 <div class="bottomBorder titleDiv">Project Idan</div>
21 <div onclick="openMulti();">Idan Vector</div>
22 <div onclick="openMulti();">Testings</div>
23 <div onclick="openMulti();">Features_120</div>
24 <div onclick="openMulti();">Aggregators</div>
25 <div id="menu-1" class="topBorder iconDiv noSpace" onclick="prevMenu(event);"><i class="material-icons">arrow_back</i>Back</div>
26 </div>
27 <div>
28 </div>همچنین قطعه کد CSS این مثال به صورت زیر است:
1:root {
2 --bgColor: #0fddaf;
3 --txtColor: #ffffff;
4 --borColor: rgba(0, 0, 0, 0);
5 --sizeVar: 8px;
6 --textPrimary: #4b4760;
7 --textSecondary: #7f7989;
8 --borderColor: #cccccc;
9}
10body {
11 font-family: "Roboto", sans-serif;
12 font-weight: 400;
13 font-size: calc(var(--sizeVar) * 1.75);
14}
15.flexDiv {
16 display: flex;
17 flex-direction: column;
18 align-items: flex-start;
19 width: fit-content;
20 margin: 32px;
21}
22.selectWrapper {
23 width: 100%;
24 position: relative;
25 opacity: 0;
26 pointer-events: none;
27 transition: opacity 100ms linear 0s;
28 filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.24));
29 padding-top: calc(var(--sizeVar) / 2);
30}
31.multiSelect {
32 clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
33 border: 1px solid var(--borderColor);
34 box-sizing: border-box;
35 border-radius: calc(var(--sizeVar) / 2);
36 position: absolute;
37 width: auto;
38 left: 0;
39 right: 0;
40 overflow: hidden;
41 background: #ffffff;
42 transition: transform 300ms ease-in-out 0s, clip-path 300ms ease-in-out 0s;
43}
44.multiSelect div {
45 color: var(--textPrimary);
46 padding: 16px;
47 width: auto;
48 cursor: pointer;
49}
50.multiSelect div:hover {
51 background-color: #f6f6f6;
52}
53.bottomBorder {
54 border-bottom: 1px solid var(--borderColor);
55}
56.topBorder {
57 border-top: 1px solid var(--borderColor);
58}
59.iconDiv {
60 display: flex;
61 align-items: center;
62 justify-content: space-between;
63}
64.noSpace {
65 justify-content: flex-start;
66 gap: 6px;
67}
68.titleDiv {
69 pointer-events: none;
70 font-weight: 700;
71}
72.justHover i {
73 opacity: 0;
74}
75.justHover:hover i {
76 opacity: 1;
77}
78.multiSelect .placeholder {
79 color: var(--textSecondary);
80 font-style: italic;
81}
82.multiSelect .narrow {
83 padding-top: 10px;
84 padding-bottom: 10px;
85}
86.multiSelect i {
87 color: var(--textSecondary);
88}
89.multiSelect {
90 transform: translateX(100%);
91 clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
92}
93.multiSelect:nth-of-type(1) {
94 transform: translateX(0);
95 clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
96}
97.sec_btn {
98 --bgColor: #869cff;
99}
100button {
101 font-family: "Roboto", sans-serif;
102 font-size: calc(var(--sizeVar) * 1.75);
103 font-weight: 500;
104 border: none;
105 outline: none;
106 padding: var(--sizeVar) calc(var(--sizeVar) * 2);
107 border-radius: calc(var(--sizeVar) / 2);
108 cursor: pointer;
109 background-color: var(--bgColor);
110 color: var(--txtColor);
111 box-shadow: 0 0 0 1px var(--borColor) inset;
112}
113button:focus {
114 --borColor: rgba(0, 0, 0, 0.4);
115}
116button:hover {
117 --bgColor: #1fcc9e;
118}
119.sec_btn:hover {
120 --bgColor: #6279e7;
121}
122.tri_btn:hover {
123 --bgColor: #f8f7f8;
124}
125button:active {
126 --bgColor: #1db284;
127}
128.sec_btn:active {
129 --bgColor: #5468c7;
130}
131.tri_btn:active {
132 --bgColor: #e7e7e7;
133}قطعه کد جاوا اسکریپت کد بالا هم به صورت زیر است:
1function openMulti() {
2 if (document.querySelector(".selectWrapper").style.pointerEvents == "all") {
3 document.querySelector(".selectWrapper").style.opacity = 0;
4 document.querySelector(".selectWrapper").style.pointerEvents = "none";
5 resetAllMenus();
6 } else {
7 document.querySelector(".selectWrapper").style.opacity = 1;
8 document.querySelector(".selectWrapper").style.pointerEvents = "all";
9 }
10}
11function nextMenu(e) {
12 menuIndex = eval(event.target.parentNode.id.slice(-1));
13 document.querySelectorAll(".multiSelect")[menuIndex].style.transform =
14 "translateX(-100%)";
15 // document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)";
16 document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath =
17 "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)";
18 document.querySelectorAll(".multiSelect")[menuIndex + 1].style.transform =
19 "translateX(0)";
20 document.querySelectorAll(".multiSelect")[menuIndex + 1].style.clipPath =
21 "polygon(0 0, 100% 0, 100% 100%, 0% 100%)";
22}
23function prevMenu(e) {
24 menuIndex = eval(event.target.parentNode.id.slice(-1));
25 document.querySelectorAll(".multiSelect")[menuIndex].style.transform =
26 "translateX(100%)";
27 document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath =
28 "polygon(0 0, 0 0, 0 100%, 0% 100%)";
29 document.querySelectorAll(".multiSelect")[menuIndex - 1].style.transform =
30 "translateX(0)";
31 document.querySelectorAll(".multiSelect")[menuIndex - 1].style.clipPath =
32 "polygon(0 0, 100% 0, 100% 100%, 0% 100%)";
33}
34function resetAllMenus() {
35 setTimeout(function () {
36 var x = document.getElementsByClassName("multiSelect");
37 var i;
38 for (i = 1; i < x.length; i++) {
39 x[i].style.transform = "translateX(100%)";
40 x[i].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)";
41 }
42 document.querySelectorAll(".multiSelect")[0].style.transform =
43 "translateX(0)";
44 document.querySelectorAll(".multiSelect")[0].style.clipPath =
45 "polygon(0 0, 100% 0, 100% 100%, 0% 100%)";
46 }, 300);
47}خروجی کدهای بالا برای ساخت منوی کشویی به صورت زیر است:
منوی کشویی جاوا اسکریپت ساخته‌شده بالا به‌عنوان نوعی برنامه افزودنی همه‌کاره و قابل انطباق برای هر رابط کاربری و طراحی عمل میکند. برخلاف منوهای کشویی معمولی با یک سطح، این منو انعطاف‌پذیری چندین لایه را ارائه میدهد. کاربران می‌توانند یک زیرمجموعه را انتخاب کرده و از گزینه‌های منوی اضافی بهره ببرند. علاوه بر این، گزینه راحت «بازگشت» (Back)، در منوی بالا پیمایش یکپارچه را به سطح قبلی تسهیل میکند. همچنین پیاده‌سازی CSS در منوی بالا شامل متغیرهایی است که به‌راحتی قابل‌تغییر هستند که این کار امکان سفارشی‌سازی بدون زحمت استایل منو را برای مطابقت با ترجیحات طراحی خاص فراهم میکند.
۳. منوی متحرک زاویه دار
منوی بعدی، منوی متحرک زاویه‌داری است. قطعه کد HTML این منوی جذابه به صورت زیر خواهد بود:
1<nav class="navigation-menu js-nav-menu">
2 <div class="navigation-menu__toggle js-nav-menu-toggle">
3 <span class="navigation-menu__bars"></span>
4 </div>
5 <ul class="menu-list">
6 <li class="menu-list__item">Menu Item 1</li>
7 <li class="menu-list__item">Menu Item 2</li>
8 <li class="menu-list__item">Menu Item 3</li>
9 <li class="menu-list__item">Menu Item 4</li>
10 <li class="menu-list__item">Menu Item 5</li>
11 </ul>
12</nav>همچنین قطعه کد CSS آن به صورت زیر است:
1@import url(https://fonts.googleapis.com/css?family=Lato:400);
2
3$body-color: #fff;
4$menu-background-color: #4E567E;
5$menu-icons-color: #fff;
6$font-stack: 'Lato', sans-serif;
7
8* {
9 box-sizing: border-box;
10}
11
12html {
13 font-size: 62.5%;
14}
15
16body {
17 background: url(https://images.unsplash.com/photo-1444927714506-8492d94b4e3d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=067f0b097deff88a789e125210406ffe) center center no-repeat;
18 background-size: cover;
19 color: $body-color;
20 font-family: $font-stack;
21 font-size: 2.4rem;
22 height: 100vh;
23}
24
25%bars {
26 cursor: pointer;
27 border-radius: 1px;
28 height: 2px;
29 width: 25px;
30 background: $menu-icons-color;
31 position: absolute;
32 left: 0;
33 top: 50%;
34 display: block;
35 transition: all .3s;
36}
37
38.navigation-menu {
39 background-color: transparent;
40 height: 100%;
41 position: fixed;
42 width: 600px;
43 transform: translateX(-100%);
44 transition: transform .3s .3s;
45
46 &::before {
47 background: $menu-background-color;
48 content: '';
49 height: 400%;
50 left: 50%;
51 position: absolute;
52 top: 0;
53 transform: translate(-50%, -50%) rotate(40deg);
54 width: 100%;
55 z-index: 0;
56 }
57
58 &--open {
59 transform: translateX(0);
60
61 & .navigation-menu__bars {
62 background-color: transparent;
63
64 &::before,
65 &::after {
66 top: 0;
67 }
68
69 &::before {
70 transform: rotate(45deg);
71 }
72
73 &::after {
74 transform: rotate(-45deg);
75 }
76 }
77
78 .menu-list__item {
79 opacity: 1;
80 }
81
82 $menu-delay: 1s;
83 @for $i from 1 through 12 {
84 .menu-list__item:nth-child(#{$i}) {
85 transition-delay: $menu-delay;
86 }
87 $menu-delay: $menu-delay + .25s;
88 }
89 }
90
91 &__toggle {
92 cursor: pointer;
93 height: 30px;
94 position: absolute;
95 right: -40px;
96 top: 5px;
97 width: 30px;
98 }
99
100 &__bars {
101 @extend %bars;
102
103 &::before,
104 &::after {
105 @extend %bars;
106 content: '';
107 }
108
109 &::before {
110 left: 0;
111 top: -8px;
112 }
113
114 &::after {
115 left: 0;
116 top: 8px;
117 }
118 }
119}
120
121.menu-list {
122 padding: 60px 20px;
123 position: relative;
124 z-index: 10;
125
126 &__item {
127 margin: 40px 0;
128 opacity: 0;
129 transition: opacity .5s .5s;
130 }
131}
132
133@media only screen and (max-width: 700px) {
134 .navigation-menu {
135 min-width: 240px;
136 width: 80%;
137
138 &::before {
139 width: 110%;
140 }
141 }
142}
143
144@media only screen and (max-width: 480px) {
145 .navigation-menu {
146 background-color: $menu-background-color;
147 min-width: 240px;
148 width: 80%;
149
150 &::before {
151 transform: translate(-50%, -50%) rotate(45deg)
152 }
153 }
154}همچنین قطعه کد جاوا اسکریپت این منو به صورت زیر است:
1(function($) {
2 $('.js-nav-menu-toggle').on('click', function() {
3 $(this).parents('.navigation-menu').toggleClass('navigation-menu--open');
4 });
5
6 $('html').on('click', function(e) {
7 if(!$(e.target).closest('.js-nav-menu').length &&
8 ($('.js-nav-menu').hasClass('navigation-menu--open'))) {
9 $('.js-nav-menu').removeClass('navigation-menu--open');
10 }
11 });
12})(jQuery);خروجی منوی ساخته شده بالا به صورت زیر است:
با تغییر رنگ منو، سبک فونت و رنگ‌های پس‌زمینه با استفاده از CSS، بدون زحمت، منو را میتوان با سایت و برندهای مختلف هماهنگ کرد. متغیرهای ارائه شده با قابلیت تغییر آسان به کاربر این امکان را میدهد تا زیبایی منو را شخصی‌سازی کند. همچنین ساختار HTML منوی بالا ساده و قابل‌گسترش است و امکان افزودن آسان ویژگی‌ها و امکانات دیگر را فراهم میکند. منوی فوق با استفاده از جاوا اسکریپت، با انیمیشن‌های روان و کلاس پویا که با رویدادهای کلیک تغییر می‌کنند، جذابیت خاصی به طراحی داده و تعامل کاربر و جذابیت بصری را افزایش میدهد.
۴. منوی ناوبری هدر متحرک
در این بخش از ساخت منو با جاوا اسکریپت به بررسی نمونه منوی ناوبری با هدر متحرک می‌پردازیم که قطعه کد HTML آن به صورت زیر است:
1<div class="menu">
2 <div class="container">
3 <div class="toggle"></div>
4 </div><span class="hidden"><a href="#">Home </a></span><span class="hidden"><a href="#">About </a></span><span class="hidden"><a href="#">Info</a></span><span class="hidden"><a href="#">Contact</a></span>
5</div>همچنین قطعه کد این مثال به صورت زیر است:
1span:nth-of-type(4) {
2 transition-delay: 0.7s;
3}
4span.hidden {
5 width: 0;
6 visibility: hidden;
7 opacity: 0;
8 transform: rotateY(90deg);
9}
10span.hidden:nth-of-type(1) {
11 transition-delay: 0.3s;
12}
13span.hidden:nth-of-type(2) {
14 transition-delay: 0.2s;
15}
16span.hidden:nth-of-type(3) {
17 transition-delay: 0.1s;
18}
19span.hidden:nth-of-type(4) {
20 transition-delay: 0s;
21}
22span a {
23 color: black;
24 text-decoration: none;
25 font-size: 16.3636363636px;
26 transition: 0.3s;
27}
28span a:hover {
29 color: #1D90F5;
30}
31
32.container {
33 position: absolute;
34 top: 22.5px;
35 right: calc(100% - 73.125px);
36 height: 42.75px;
37 width: 58.5px;
38 transition: 1s;
39}
40.container.close {
41 right: 0;
42}
43
44.toggle {
45 position: relative;
46 height: 42.75px;
47 width: 58.5px;
48 cursor: pointer;
49}
50.toggle:after, .toggle:before {
51 content: "";
52 background: #1D90F5;
53 width: 36px;
54 height: 4.5px;
55 margin: auto;
56 position: absolute;
57 top: 0;
58 bottom: 0;
59 right: 0;
60 left: 0;
61 transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
62}
63.toggle:before {
64 top: -30%;
65}
66.toggle:after {
67 top: 30%;
68}
69.toggle.close:before {
70 transform: rotate(-225deg);
71 top: 0;
72}
73.toggle.close:after {
74 transform: rotate(225deg);
75 top: 0;
76}قطعه کد جاوا اسکریپت این مثال هم به صورت زیر است:
1$('.toggle').on('click', function() {
2 $('.menu').toggleClass('expanded');
3 $('span').toggleClass('hidden');
4 $('.container , .toggle').toggleClass('close');
5});خروجی مثال بالا به صورت زیر است:
منوهای جاوا اسکریپت به اشکال مختلفی ارائه می‌شوند و منوی بالا برای استفاده از تلفن همراه طراحی شده است که تطبیق‌پذیری آن به آن اجازه میدهد تا به طور یکپارچه به منوی ناوبری هدر اصلی تبدیل شود. کاربران می‌توانند این طراحی را در وب‌سایت خود پیاده کرده و وب‌سایت خود را جذاب و کاربرپسند کنند. همچنین منوی قابل تطبیق بالا به کاربر این امکان را میدهد تا ناوبری وب‌سایت خود را مطابق با طراحی منحصربه‌فرد و نیازهای عملکردی خود شکل دهد.
۵. منوی حبابی در جاوا اسکریپت
این مثال از ساخت منو با جاوا اسکریپت از نوع منوی حبابی بوده که بسیار منوی جذابی است.
قطعه کد HTML این مثال به صورت زیر است:
1<body>
2
3<nav id="nav">
4 <div class="bubble_all" id="icon">
5 <button class="va_menu_icon va_menu_icon-X">
6 <span></span>
7 </button>
8
9 </div>
10 <div class="bubble" id="one">
11 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 492.014 492.014" style="enable-background:new 0 0 492.014 492.014;" xml:space="preserve" width="40px" height="40px">
12<g id="XMLID_144_">
13 <path id="XMLID_151_" d="M339.277,459.566H34.922V32.446h304.354v105.873l32.446-32.447V16.223C371.723,7.264,364.458,0,355.5,0 H18.699C9.739,0,2.473,7.264,2.473,16.223v459.568c0,8.959,7.265,16.223,16.226,16.223H355.5c8.958,0,16.223-7.264,16.223-16.223 V297.268l-32.446,32.447V459.566z" fill="#111111"/>
14 <path id="XMLID_150_" d="M291.446,71.359H82.751c-6.843,0-12.396,5.553-12.396,12.398c0,6.844,5.553,12.397,12.396,12.397h208.694 c6.845,0,12.397-5.553,12.397-12.397C303.843,76.912,298.29,71.359,291.446,71.359z" fill="#111111"/>
15 <path id="XMLID_149_" d="M303.843,149.876c0-6.844-5.553-12.398-12.397-12.398H82.751c-6.843,0-12.396,5.554-12.396,12.398 c0,6.845,5.553,12.398,12.396,12.398h208.694C298.29,162.274,303.843,156.722,303.843,149.876z" fill="#111111"/>
16 <path id="XMLID_148_" d="M274.004,203.6H82.751c-6.843,0-12.396,5.554-12.396,12.398c0,6.845,5.553,12.397,12.396,12.397h166.457 L274.004,203.6z" fill="#111111"/>
17 <path id="XMLID_147_" d="M204.655,285.79c1.678-5.618,4.076-11.001,6.997-16.07h-128.9c-6.843,0-12.396,5.553-12.396,12.398 c0,6.844,5.553,12.398,12.396,12.398h119.304L204.655,285.79z" fill="#111111"/>
18 <path id="XMLID_146_" d="M82.751,335.842c-6.843,0-12.396,5.553-12.396,12.398c0,6.843,5.553,12.397,12.396,12.397h108.9 c-3.213-7.796-4.044-16.409-1.775-24.795H82.751z" fill="#111111"/>
19 <path id="XMLID_145_" d="M479.403,93.903c-6.496-6.499-15.304-10.146-24.48-10.146c-9.176,0-17.982,3.647-24.471,10.138 L247.036,277.316c-5.005,5.003-8.676,11.162-10.703,17.942l-14.616,48.994c-0.622,2.074-0.057,4.318,1.477,5.852 c1.122,1.123,2.624,1.727,4.164,1.727c0.558,0,1.13-0.08,1.688-0.249l48.991-14.618c6.782-2.026,12.941-5.699,17.943-10.702 l183.422-183.414c6.489-6.49,10.138-15.295,10.138-24.472C489.54,109.197,485.892,100.392,479.403,93.903z" fill="#111111"/>
20</g>
21<g>
22</g>
23<g>
24</g>
25<g>
26</g>
27<g>
28</g>
29<g>
30</g>
31<g>
32</g>
33<g>
34</g>
35<g>
36</g>
37<g>
38</g>
39<g>
40</g>
41<g>
42</g>
43<g>
44</g>
45<g>
46</g>
47<g>
48</g>
49<g>
50</g>
51</svg>
52 <h3>About</h3>
53 </div>
54 <div class="bubble" id="two">
55 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 512 512" enable-background="new 0 0 512 512" width="40px" height="40px">
56 <g>
57 <g>
58 <path d="M11,501h117.8V301.9H11V501z M31.9,321.7H108v158.5H31.9V321.7z" fill="#111111"/>
59 <path d="M197.6,501h116.8h1V220.6H197.6V501z M217.4,240.4h76.1v239.8h-76.1V240.4z" fill="#111111"/>
60 <path d="M383.2,11v490H501V11H383.2z M480.1,480.1H404V31.9h76.1V480.1z" fill="#111111"/>
61 </g>
62 </g>
63 </svg>
64 <h3>Skills</h3>
65 </div>
66 <div class="bubble" id="three">
67 <?xml version="1.0" encoding="iso-8859-1"?>
68 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
69 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 307.116 307.116" style="enable-background:new 0 0 307.116 307.116;" xml:space="preserve" width="40px" height="40px">
70<g>
71 <g>
72 <path d="M299.257,35.934c2.761,0,5-2.238,5-5V5c0-2.762-2.239-5-5-5H7.859c-2.761,0-5,2.238-5,5v25.934c0,2.762,2.239,5,5,5h9.451 v155.804H7.859c-2.761,0-5,2.238-5,5v25.934c0,2.762,2.239,5,5,5h140.699v15.399l-54.567,55.541 c-1.935,1.97-1.907,5.136,0.063,7.07c1.969,1.938,5.136,1.907,7.071-0.063l19.347-19.692h66.172l19.347,19.692 c1.934,1.97,5.102,1.998,7.071,0.063c1.97-1.935,1.998-5.101,0.063-7.07l-54.567-55.541v-15.399h140.699c2.761,0,5-2.238,5-5 v-25.934c0-2.762-2.239-5-5-5h-9.451V35.934H299.257z M176.819,275.927h-46.523l23.261-23.677L176.819,275.927z M294.257,201.737 v15.934H12.859v-15.934h9.451h262.496H294.257z M27.31,191.737V35.934h252.496v155.803H27.31z M12.859,25.934V10h281.398v15.934 C279.275,25.934,26.773,25.934,12.859,25.934z" fill="#111111"/>
73 </g>
74</g>
75<g>
76</g>
77<g>
78</g>
79<g>
80</g>
81<g>
82</g>
83<g>
84</g>
85<g>
86</g>
87<g>
88</g>
89<g>
90</g>
91<g>
92</g>
93<g>
94</g>
95<g>
96</g>
97<g>
98</g>
99<g>
100</g>
101<g>
102</g>
103<g>
104</g>
105</svg>
106
107 <h3>Projects</h3>
108 </div>
109 <div class="bubble" id="four">
110 <?xml version="1.0" encoding="iso-8859-1"?>
111 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
112 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 484.849 484.849" style="enable-background:new 0 0 484.849 484.849;" xml:space="preserve" width="40px" height="40px">
113<g>
114 <path d="M262.797,274.552c30.206,30.206,63.252,49.446,81.428,47.771c13.579-1.252,30.7-19.862,30.7-19.862l-38.945-38.944 l-15.532,15.532L258.3,216.901l15.532-15.532l-38.945-38.944c0,0-18.611,17.12-19.862,30.699 C213.351,211.3,232.59,244.345,262.797,274.552z" fill="#111111"/>
115 <path d="M49.924,0v113.712h-22.5v30h22.5v83.712h-25v30h25v83.712h-25v30h25v113.712h410V0H49.924z M79.924,371.136h25v-30h-25 v-83.712h25v-30h-25v-83.712h25v-30h-25V30h50v424.849h-50V371.136z M429.924,454.849h-270V30h270V454.849z" fill="#111111"/>
116</g>
117<g>
118</g>
119<g>
120</g>
121<g>
122</g>
123<g>
124</g>
125<g>
126</g>
127<g>
128</g>
129<g>
130</g>
131<g>
132</g>
133<g>
134</g>
135<g>
136</g>
137<g>
138</g>
139<g>
140</g>
141<g>
142</g>
143<g>
144</g>
145<g>
146</g>
147</svg>
148
149 <h3>Contact</h3>
150 </div>
151</nav>
152
153<section class="start">
154 <div class="content">
155 <h1>PenFolio</h1>
156 </div>
157</section>
158<section class="first">
159 <div class="content">
160 <h2>About</h2>
161 <p>Lorem ipsum dolor sit amet...</p>
162 </div>
163</section>
164<section class="second">
165 <div class="content">
166 <h2>Skills</h2>
167 <p>Lorem ipsum dolor sit amet...</p>
168 </div>
169</section>
170<section class="third">
171 <div class="content">
172 <h2>Projects</h2>
173 <p>Lorem ipsum dolor sit amet..</p>
174 </div>
175</section>
176<section class="fourth">
177 <div class="content">
178 <h2>Contact</h2>
179 <p>Lorem ipsum dolor sit amet...</p>
180 </div>
181</section>
182
183</body>قطعه کد CSS منوی حبابی مد نظر هم به صورت زیر است:
1@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
2* {
3 margin: 0;
4 padding: 0;
5}
6body {
7 overflow: hidden;
8}
9::-webkit-scrollbar {
10 display: none;
11}
12.va_menu_icon {
13 display: block;
14 position: absolute;
15 overflow: hidden;
16 margin: 0;
17 padding: 0;
18 width: 45px;
19 height: 45px;
20 font-size: 0;
21 text-indent: -9999px;
22 appearance: none;
23 box-shadow: none;
24 border-radius: none;
25 border: none;
26 cursor: pointer;
27 transition: background 0.3s;
28 top: 57%;
29 left: 50%;
30 transform: translate(-50%, -50%);
31 background-color: transparent;
32 z-index: 99;
33}
34
35.va_menu_icon:focus {
36 outline: none;
37}
38
39.va_menu_icon span {
40 display: block;
41 position: absolute;
42 top: 15px;
43 left: 0;
44 right: 0;
45 height: 7px;
46 background: #fff;
47}
48
49.va_menu_icon span:before, .va_menu_icon span:after {
50 position: absolute;
51 display: block;
52 left: 0;
53 width: 100%;
54 height: 7px;
55 background-color: #fff;
56 content: "";
57}
58
59.va_menu_icon span:before {
60 top: -14px;
61}
62
63.va_menu_icon span:after {
64 bottom: -14px;
65}
66
67.va_menu_icon-X span {
68 transition: background 0s 0.3s;
69}
70
71.va_menu_icon-X span:before, .va_menu_icon-X span:after {
72 transition-duration: 0.3s, 0.3s;
73 transition-delay: 0.3s, 0s;
74}
75
76.va_menu_icon-X span:before {
77 transition-property: top, transform;
78}
79
80.va_menu_icon-X span:after {
81 transition-property: bottom, transform;
82}
83
84.va_menu_icon-X.is-active span {
85 background: none;
86}
87
88.va_menu_icon-X.is-active span:before {
89 top: 0;
90 transform: rotate(45deg);
91}
92
93.va_menu_icon-X.is-active span:after {
94 bottom: 0;
95 transform: rotate(-45deg);
96}
97
98.va_menu_icon-X.is-active span:before, .va_menu_icon-X.is-active span:after {
99 transition-delay: 0s, 0.3s;
100}
101nav {
102 position: absolute;
103 top: 100px;
104 left: 100px;
105 transform: translate(-50%, -50%);
106 border-radius: 50%;
107 width: 75px;
108 height: 75px;
109 z-index: 4;
110}
111.bubble_all {
112 position: absolute;
113 top: 50%;
114 left: 50%;
115 transform: translate(-50%, -50%);
116 background-color: #FD898A;
117 border-radius: 50%;
118 width: 75px;
119 height: 75px;
120 z-index: 4;
121}
122#one, #two, #three, #four {
123 position: absolute;
124 top: 50%;
125 left: 50%;
126 transform: translate(-50%, -50%);
127 border-radius: 50%;
128 width: 65px;
129 height: 65px;
130 z-index: 3;
131 box-shadow: 0 0 20px -5px #111;
132 text-align: center;
133}
134.bubble svg:hover ~ h3 {
135 opacity: 1;
136}
137.bubble h3 {
138 opacity: 0;
139 transition: all 400ms;
140 -webkit-transition: all 600ms;
141}
142#one {
143 background-color: #FDEECF;
144}
145#one svg {
146 width: 40px;
147 margin-top: 12px;
148}
149#one>h3 {
150 position: absolute;
151 font-family: 'Roboto', sans-serif;
152 font-size: 16px;
153 color: #111111;
154 top: 50%;
155 left: 75px;
156 transform: translateY(-50%);
157}
158#two {
159 background-color: #FDD0BC;
160}
161#two svg {
162 width: 40px;
163 margin-top: 12px;
164}
165#two>h3 {
166 position: absolute;
167 font-family: 'Roboto', sans-serif;
168 font-size: 16px;
169 color: #111111;
170 top: 75px;
171 left: 50%;
172 transform: translateX(-50%);
173}
174#three {
175 background-color: #EDB4B5;
176}
177#three svg {
178 width: 40px;
179 margin-top: 14px;
180}
181#three>h3 {
182 position: absolute;
183 font-family: 'Roboto', sans-serif;
184 font-size: 16px;
185 color: #111111;
186 top: 50%;
187 left: -75px;
188 transform: translateY(-50%);
189}
190#four {
191 background-color: #CB86A0;
192}
193#four svg {
194 width: 40px;
195 margin-top: 12px;
196}
197#four>h3 {
198 position: absolute;
199 font-family: 'Roboto', sans-serif;
200 font-size: 16px;
201 color: #111111;
202 top: -30px;
203 left: 50%;
204 transform: translateX(-50%);
205}
206section {
207 width: 100vw;
208 height: 100vh;
209 position: absolute;
210}
211.start {
212 top: 0;
213 left: 0;
214 background-color: #445369;
215 text-align: center;
216}
217.first {
218 left: 100vw;
219 top: 0;
220 background-color: #FDEECF;
221}
222.second {
223 left: 0;
224 top: 100vh;
225 background-color: #FDD0BC;
226}
227.third {
228 left: -100vw;
229 top: 0;
230 background-color: #EDB4B5;
231}
232.fourth {
233 left: 0;
234 top: -100vh;
235 background-color: #CB86A0;
236}
237section:first-child.content {
238 width: 100%;
239 height: 100vh;
240 opacity: 1;
241}
242.content {
243 width: 70%;
244 height: 100vh;
245 opacity: 1;
246 margin: 0 auto;
247 overflow-y: scroll;
248}
249.start h1 {
250 font-family: 'Roboto', sans-serif;
251 font-size: 40px;
252 line-height: 100vh;
253 color: #111111;
254}
255h2 {
256 font-family: 'Roboto', sans-serif;
257 font-size: 40px;
258 color: #111111;
259 margin-top: 200px;
260}
261.content p {
262 font-family: 'Roboto', sans-serif;
263 font-size: 20px;
264 line-height: 1.3;
265 color: #111111;
266 margin: 50px 10px;
267}و در نهایت قطعه کد جاوا اسکریپت آن به صورت زیر است:
1var isTop = true;
2 var menuIsOpen = false;
3
4 var menuIcon = $('.va_menu_icon');
5
6 var one = $('#one');
7 var two = $('#two');
8 var three = $('#three');
9 var four = $('#four');
10
11 menuIcon.click(function() {
12 if (isTop === true) {
13 $('#nav').animate({ top: '50%', left: '50%' }, 400);
14 $('.content').animate({ opacity: '0' }, 700);
15 showBubbles();
16 isTop = false;
17 } else {
18 if (menuIsOpen === false) {
19 showBubbles();
20 } else {
21 hideBubbles();
22 }
23 }
24 });
25
26 function showBubbles() {
27 menuIcon.addClass('is-active');
28
29 one.animate({ opacity: '1' }, 10);
30 two.animate({ opacity: '1' }, 10);
31 three.animate({ opacity: '1' }, 10);
32 four.animate({ opacity: '1' }, 10);
33
34 one.animate({ left: '140px' }, 110);
35 two.animate({ top: '140px' }, 200);
36 one.animate({ left: '130px' }, 100);
37 three.animate({ left: '-65px' }, 300);
38 two.animate({ top: '130px' }, 210);
39 four.animate({ top: '-65px' }, 400);
40 three.animate({ left: '-55px' }, 310);
41 four.animate({ top: '-55px' }, 400);
42
43 menuIsOpen = true;
44 }
45
46 function hideBubbles() {
47 menuIcon.removeClass('is-active');
48
49 setTimeout(function() {
50 $('#nav').animate({ top: '100px', left: '100px' }, 400);
51 $('.content').animate({ opacity: '1' }, 900);
52 }, 500);
53 four.animate({ top: '-65px' }, 400);
54 three.animate({ left: '-65px' }, 300);
55 four.animate({ top: '50%' }, 400);
56 two.animate({ top: '140px' }, 200);
57 three.animate({ left: '50%' }, 310);
58 one.animate({ left: '140px' }, 110);
59 two.animate({ top: '50%' }, 200);
60 one.animate({ left: '50%' }, 110);
61
62 menuIsOpen = false;
63 isTop = true
64 }
65
66 $('.bubble').click(function() {
67 menuIcon.removeClass('is-active');
68 hideBubbles();
69 setTimeout(function() {
70 $('#nav').animate({ top: '100px', left: '100px' }, 400);
71 }, 500);
72 isTop = true;
73 });
74
75 one.click(function() {
76 moveToPage('0', '100vw', '-100vw', '-100vw');
77 });
78
79 two.click(function() {
80 moveToPage('100vw', '0', '-100vw', '-100vw');
81 });
82
83 three.click(function() {
84 moveToPage('100vw', '100vw', '0', '-100vw');
85 });
86
87 four.click(function() {
88 moveToPage('100vw', '100vw', '-100vw', '0');
89 });
90
91 function moveToPage(firstLeft, secondTop, thirdLeft, fourthTop) {
92 $('.first').animate({ left: firstLeft }, 400);
93 $('.second').animate({ top: secondTop }, 400);
94 $('.third').animate({ left: thirdLeft }, 400);
95 $('.fourth').animate({ top: fourthTop }, 400);
96
97 isTop = true;
98 }خروجی منوی ساخته شده بالا به صورت زیر است:
منوی پویا و تعاملی جاوا اسکریپت بالا تجربه کاربری صفحات را بسیار بالا می‌برد. با کلیک کردن روی نماد منو، اسلایدی یکپارچه با چهار گزینه ارائه میشود و کاربر می‌تواند بدون نیاز به پیمایش به بخش‌های مختلفی از سایت سر بزند. پس از انتخاب آیتم منو، انتقالی روان مانند برنامه‌های تک‌صفحه‌ای آغاز میشود. در مثال بالا نماد منو ثابت باقی می‌ماند و به راحتی به بخش‌های دیگر قابلیت پیمایش وجود دارد. انیمیشن‌های منوی بالا هم در بسیار روان هستند و به طرز ماهرانه‌ای یکپارچه شده‌اند که تجربه کلی کاربر را بهبود می‌بخشند.
۶. منوی ناوبری
این مثال از ساخت منو با جاوا اسکریپت مربوط به نوعی منوی پیمایشی بوده که قطعه کد HTML آن به صورت زیر است:
1<nav>
2 <div class="logo">
3 <h4>Navbar</h4>
4 </div>
5 <ul class="nav-links">
6 <a href="#">Home</a>
7 <a href="#">About</a>
8 <a href="#">Contact</a>
9 <a href="#">Blog</a>
10
11 </ul>
12 <div class="burger">
13 <div class="line1"></div>
14 <div class="<