فرادرسساخت منو با جاوا اسکریپت – از صفر تا صد + نمونه کد و مثال
۲۵۶۵ بازدید
آخرین به‌روزرسانی: ۰۱ بهمن ۱۴۰۲
زمان مطالعه: ۳۹ دقیقه
ساخت منو با جاوا اسکریپت یکی از راه‌های ایجاد رابطهای کاربری تعاملی و پاسخگو است که کاربران را مشتاق به استفاده از وب‌سایت یا پلتفرم میکند. با ادغام یکپارچه جاوا اسکریپت، «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="line2"></div>
15 <div class="line3"></div>
16 </div>
17</nav>همچنین قطعه کد CSS این پروژه ساخت منو با Javascript به صورت زیر است:
1body{
2 margin: 0;
3 padding: 0;
4 font-family: sans-serif;
5 overflow: hidden;
6 background: #111;
7}
8div{
9 box-sizing: border-box;
10}
11nav{
12 background: #333;
13 display: flex;
14 justify-content:space-around;
15 align-items: center;
16 color: #fff;
17}
18.nav-links {
19 display: flex;
20 justify-content:space-around;
21 width: 50%;
22 text-transform: uppercase;
23}
24.nav-links a{
25 display: block;
26 text-transform: uppercase;
27 text-decoration: none;
28 color: #fff;
29 border-bottom:2px solid transparent;
30 transition:0.5s ease;
31 transform: translateX(0%);
32}
33.nav-links a:hover{
34 color:#38b8ff;
35 letter-spacing: 5px;
36}
37.burger{
38 display: none;
39}
40.burger div{
41 width: 25px;
42 height: 3px;
43 background: #fff;
44 margin: 5px;
45 transition:all 0.5s ease;
46}
47@media only screen and (max-width: 760px){
48 nav{
49 justify-content: space-between;
50 padding: 0 5vw;
51 }
52 .nav-links{
53 position: absolute;
54 right: 0;
55 top:8vh;
56 min-height:92vh;
57 background: #333;
58 display: flex;
59 flex-direction: column;
60 align-items: center;
61 width: 50%;
62 margin: 0;
63 padding: 0;
64 transform: translateX(100%);
65 transition:All 0.5s ease-in;
66 }
67 .nav-links a{
68 opacity: 0;
69
70 }
71 .burger{
72 display: block;
73 }
74
75}
76@media only screen and (max-width: 640px){
77 nav{
78 justify-content: space-between;
79 padding: 0 5vw;
80 }
81}
82.nav-active{
83 transform: translateX(0);
84}
85@media only screen and (max-width: 460px){
86 .nav-links{
87 width: 100%;
88 transition:All 0.5s ease;
89 }
90}
91.nav-active{
92 transform: translateX(0);
93}
94@keyframes navLinkFade{
95 from{
96 opacity: 0;
97 transform: translateX(50px);
98 }
99 to{
100 opacity: 1;
101 transform: translateX(0);
102 }
103}
104.toggle .line1{
105 transform: rotate(-45deg) translate(-5px,6px );
106}
107.toggle .line2{
108 opacity: 0;
109}
110.toggle .line3{
111 transform: rotate(45deg) translate(-5px,-6px );
112}قطعه کد جاوا اسکریپت این مثال هم به صورت زیر است:
1const navSlide = () => {
2 const burger = document.querySelector(".burger");
3 const nav = document.querySelector(".nav-links");
4 const navLinks = document.querySelectorAll(".nav-links a");
5
6 burger.addEventListener("click", () => {
7 nav.classList.toggle("nav-active");
8
9 navLinks.forEach((link, index) => {
10 if (link.style.animation) {
11 link.style.animation = "";
12 } else {
13 link.style.animation = `navLinkFade 0.5s ease forwards ${
14 index / 7 + 0.5
15 }s `;
16 }
17 });
18 burger.classList.toggle("toggle");
19 });
20 //
21};
22
23navSlide();خروجی پروژه منوی جاوا اسکریپتی بالا به صورت زیر است:
منوهای ناوبری معمولی و ساده، مانند مثال فوق برای ارائه تجربه کاربری روان بسیار مفید هستند ولی با این حال، جاوا اسکریپت تعامل و خلاقیت را به منوها اضافه کرده و در عین اینکه به آن‌ها جذابیت خاصی میبخشد، آن‌ها را به منوهای کاربری‌تری تبدیل میکند. در این زمینه، جاوا اسکریپت نقش اساسی در اعمال عملکردهای پویا و حذف استایل‌های CSS ایفا خواهد کرد. این رویکرد منو را متحول کرده، خلاقیت را به پروژه میبخشد و اطمینان میدهد که منو با زیبایی‌شناسی متمایزی در دید کاربران قرار می‌گیرد.
۷. شبیه سازی منوی تویتر
در این بخش از ساخت منو با جاوا اسکریپت به شبیه سازی منوی تویتر خواهیم پرداخت.
قطعه کد HTML انجام این کار به صورت زیر است:
1<aside>
2 <svg class="logo" viewBox="0 0 28 28">
3 <path d="M27.5831 5.75986C26.6089 6.19153 25.5624 6.48319 24.4623 6.61503C25.5846 5.94303 26.4456 4.87669 26.8516 3.60736C25.8016 4.23036 24.6384 4.68303 23.4006 4.92569C22.4089 3.87103 20.9973 3.21069 19.4339 3.21069C16.4333 3.21069 13.9996 5.64436 13.9996 8.64736C13.9996 9.07203 14.0486 9.48503 14.1396 9.88403C9.62111 9.65653 5.61827 7.49236 2.93727 4.20469C2.47061 5.00969 2.20227 5.94303 2.20227 6.93703C2.20227 8.82236 3.16244 10.4872 4.61961 11.4614C3.72827 11.4322 2.89061 11.1884 2.15794 10.7812V10.8512C2.15794 13.4844 4.03044 15.6812 6.51777 16.1805C6.06044 16.3042 5.58094 16.3695 5.08627 16.3695C4.73627 16.3695 4.39444 16.3369 4.06311 16.2739C4.75494 18.4322 6.76161 20.0049 9.14044 20.0469C7.27961 21.5052 4.93577 22.3744 2.39011 22.3744C1.95144 22.3744 1.51861 22.3487 1.09277 22.2985C3.49844 23.842 6.35444 24.7404 9.42277 24.7404C19.4211 24.7404 24.8869 16.4594 24.8869 9.27736C24.8869 9.04403 24.8811 8.80836 24.8706 8.57503C25.9323 7.80736 26.8539 6.85186 27.5808 5.76336L27.5831 5.75986Z" />
4 </svg>
5 <nav>
6 <button class="home">
7 <div>
8 <div class="icon">
9 <svg class="house" viewBox="0 0 24 24">
10 <g class="outline">
11 <path d="M22.601 7.49432L12.3602 1.97113C12.1341 1.84963 11.8635 1.84963 11.6375 1.97113L1.3987 7.49432C1.02974 7.69378 0.89188 8.15447 1.09157 8.52403C1.22841 8.77716 1.49094 8.92194 1.76057 8.92194C1.8822 8.92194 2.00688 8.89157 2.12142 8.83082L2.94754 8.38532L4.59875 20.0422C4.81567 21.2724 5.92459 22.13 7.29301 22.13H16.7016C18.072 22.13 19.1799 21.2714 19.4009 20.0169L21.0491 8.38329L21.8782 8.83082C22.2472 9.02623 22.7094 8.89157 22.9091 8.52302C23.1078 8.15548 22.9699 7.69479 22.601 7.49432V7.49432ZM17.8997 19.779C17.7913 20.3926 17.1871 20.6113 16.7036 20.6113H7.29503C6.80849 20.6113 6.20537 20.3926 6.10097 19.8033L4.37575 7.61582L11.9983 3.50304L19.6229 7.61379L17.8997 19.779V19.779Z" />
12 <path d="M8.21973 12.3C8.21973 14.384 9.91473 16.08 11.9997 16.08C14.0847 16.08 15.7797 14.384 15.7797 12.3C15.7797 10.216 14.0847 8.52002 11.9997 8.52002C9.91473 8.52002 8.21973 10.216 8.21973 12.3ZM14.2797 12.3C14.2797 13.558 13.2577 14.58 11.9997 14.58C10.7417 14.58 9.71973 13.558 9.71973 12.3C9.71973 11.042 10.7417 10.02 11.9997 10.02C13.2577 10.02 14.2797 11.042 14.2797 12.3Z" />
13 </g>
14 <path class="fill" d="M22.4824 7.448L12.4695 1.995C12.1753 1.835 11.8215 1.835 11.5282 1.995L1.52027 7.448C1.0387 7.712 0.859349 8.318 1.11896 8.804C1.29732 9.139 1.63918 9.329 1.99094 9.329C2.14948 9.329 2.31199 9.291 2.46161 9.209L3.18892 8.813L4.76442 20.063C4.97846 21.277 6.06248 22.125 7.40018 22.125H16.5976C17.9353 22.125 19.0193 21.277 19.2353 20.037L20.8088 8.812L21.5391 9.21C22.0197 9.473 22.6212 9.292 22.8808 8.806C23.1414 8.32 22.96 7.713 22.4805 7.451L22.4824 7.448ZM11.9989 15.533C10.2202 15.533 8.7785 14.078 8.7785 12.283C8.7785 10.488 10.2202 9.033 11.9989 9.033C13.7775 9.033 15.2192 10.488 15.2192 12.283C15.2192 14.078 13.7775 15.533 11.9989 15.533Z" />
15 </svg>
16 <svg class="feather left" viewBox="0 0 14 7">
17 <path d="M9.16667 1L13.5 3.94648C11.6429 6.89297 4.83333 6.89297 0.5 2.47324C3.59524 1 6.69048 2.47324 6.69048 2.47324L5.45238 1L9.16667 2.47324V1Z" />
18 <path d="M12 4.1C9 4.65 4.5 3.5 4.5 3.5" />
19 </svg>
20 <svg class="feather right" viewBox="0 0 14 7">
21 <path d="M4.83333 1L0.499999 3.94648C2.35714 6.89297 9.16667 6.89297 13.5 2.47324C10.4048 1 7.30952 2.47324 7.30952 2.47324L8.54762 1L4.83333 2.47324V1Z" />
22 <path d="M2 4.1C5 4.65 9.5 3.5 9.5 3.5" />
23 </svg>
24 </div>
25 Home
26 </div>
27 </button>
28 <button class="explore">
29 <div>
30 <div class="icon">
31 <svg viewBox="0 0 24 24">
32 <path class="outline" d="M20.1215 3.68027C20.2477 3.62291 20.3775 3.75271 20.3202 3.87889L15.4927 14.4992C15.2926 14.9394 14.9398 15.2923 14.4996 15.4924L3.87927 20.3198C3.7531 20.3771 3.6233 20.2473 3.68065 20.1212L8.50808 9.50082C8.70818 9.0606 9.06099 8.70779 9.5012 8.50769L20.1215 3.68027Z" />
33 <path class="triangle" d="M14.6722 14.6718L9.32861 9.32822C9.08175 9.08137 9.15745 8.66395 9.47526 8.51949L20.1215 3.68027C20.2477 3.62291 20.3775 3.75271 20.3202 3.87889L15.4809 14.5252C15.3365 14.843 14.9191 14.9187 14.6722 14.6718Z" />
34 </svg>
35 </div>
36 Explore
37 </div>
38 </button>
39 <button class="notifications active">
40 <div>
41 <div class="icon">
42 <svg viewBox="0 0 24 24">
43 <path class="ring" d="M15.75 17.5H8.24914C8.24914 17.5 8.00047 21.5 12 21.5C15.9995 21.5 15.75 17.5 15.75 17.5Z" />
44 <path class="bell" d="M21 17.5H3C5.07944 15.9703 5.25 11.5 5.5 8.5C5.50037 6.17481 8.67481 3 12 3C15.3252 3 18.5001 6.17481 18.5 8.5C18.75 11.5 18.9206 15.9703 21 17.5Z" />
45 </svg>
46 </div>
47 Notifications
48 </div>
49 </button>
50 <button class="messages">
51 <div>
52 <div class="icon">
53 <div class="top">
54 <svg class="default" viewBox="0 0 24 13">
55 <path d="M11.1321 11.4858L11.133 11.4864C11.6584 11.8379 12.3416 11.8379 12.867 11.4864L22.417 5.09804L22.75 4.87529V4.47466V4.2579C22.75 2.60182 21.4067 1.25 19.75 1.25H4.25C2.59331 1.25 1.25 2.60182 1.25 4.2579V4.45559V4.85556L1.58214 5.0784L11.1321 11.4858Z" />
56 </svg>
57 <svg class="inner" viewBox="0 0 24 13">
58 <path d="M11.133 1.51361L11.1321 1.51417L1.58214 7.92157L1.25 8.14441V8.54438V11V11.75L2.00002 11.75H2.00007H2.00021H2.00076H2.00296H2.01167L2.04584 11.75L2.17721 11.75L2.66002 11.75L4.25 11.75H19.75L21.34 11.75L21.8228 11.75L21.9542 11.75L21.9883 11.75H21.997H21.9992H21.9998H21.9999H22L22.75 11.75V11V8.52531V8.12468L22.417 7.90193L12.867 1.51362C12.867 1.51361 12.867 1.5136 12.867 1.51359C12.3416 1.16213 11.6583 1.16214 11.133 1.51361Z" />
59 <rect x="2" y="11" width="20" height="1.5" />
60 </svg>
61 </div>
62 <svg viewBox="0 0 24 24">
63 <rect class="background" x="1.25" y="2.25" width="21.5" height="19.95" rx="3" />
64 <path class="front" d="M2.41843 6.8296L1.25 6.04411V7.45203V19.1891C1.25 20.8464 2.59174 22.202 4.25 22.202H19.75C21.4083 22.202 22.75 20.8464 22.75 19.1891V7.47013V6.06476L21.5825 6.84707L12.8425 12.7035L12.7821 12.744C12.5397 12.8907 12.2708 12.9628 12 12.9628C11.7065 12.9628 11.4157 12.8781 11.1584 12.7052L2.41843 6.8296Z" />
65 </svg>
66 </div>
67 Messages
68 </div>
69 </button>
70 <button class="bookmark">
71 <div>
72 <div class="icon">
73 <svg viewBox="0 0 24 24">
74 <defs>
75 <clipPath id="default-clip">
76 <path d="M3.25 4.75C3.25 3.36929 4.36929 2.25 5.75 2.25H18.25C19.6307 2.25 20.75 3.36929 20.75 4.75V22.25H3.25V4.75Z" />
77 </clipPath>
78 </defs>
79 <g clip-path="url(#default-clip)">
80 <path class="background" d="M3.25 4.75C3.25 3.36929 4.36929 2.25 5.75 2.25H18.25C19.6307 2.25 20.75 3.36929 20.75 4.75V15.25H3.25V4.75Z" />
81 <path class="default" d="M4 4.7736C4 3.79407 4.79594 3 5.77778 3H18.2222C19.2041 3 20 3.79407 20 4.7736V20.3337C20 20.8741 19.3884 21.1889 18.947 20.8758L12 15.9473L5.05302 20.8758C4.61163 21.1889 4 20.8741 4 20.3337V4.7736Z" />
82 </g>
83 <path class="corner" d="M5.5 3L12 3.01L18.5 3V3.01H5.5V3Z" />
84 </svg>
85 </div>
86 Bookmarks
87 </div>
88 </button>
89 <button class="lists">
90 <div>
91 <div class="icon">
92 <svg class="pencil" viewBox="0 0 8 22">
93 <path d="M1.34869 4.87898L6.65199 4.87898M6.65193 16.8942L4.00028 20.6065L1.34863 16.8942L1.34863 2.66652C1.34869 2.26878 1.50672 1.88734 1.78797 1.60609C2.06922 1.32484 2.45066 1.16681 2.84841 1.16675L5.15216 1.16675C5.54991 1.16681 5.93134 1.32484 6.21259 1.60609C6.49384 1.88734 6.65187 2.26878 6.65193 2.66652V16.8942Z" />
94 </svg>
95 <svg class="list" viewBox="0 0 24 24">
96 <rect x="2.5" y="2.5" width="19" height="19" rx="2.25" />
97 <path class="top" d="M7 8H17" />
98 <path class="middle" d="M7 12H17" />
99 <path class="bottom" d="M7 16H12" />
100 </svg>
101 </div>
102 Lists
103 </div>
104 </button>
105 <button class="profile">
106 <div>
107 <div class="icon">
108 <svg viewBox="0 0 24 24">
109 <path class="head" d="M16 7C16 9.76142 15.7614 11 12 11C8.23858 11 8 9.76142 8 7C8 4.23858 9.23858 2.25 12 2.25C14.7614 2.25 16 4.23858 16 7Z" />
110 <path d="M11.9999 14C15.9613 14 18.962 16.5405 19.4799 19.5352C19.6485 20.5106 18.7676 21.25 17.7778 21.25H6.22181C5.23198 21.25 4.35113 20.5106 4.51978 19.5352C5.03763 16.5405 8.03845 14 11.9999 14Z" />
111 </svg>
112 </div>
113 Profile
114 </div>
115 </button>
116 </nav>
117</aside>
118
119<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
120<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>همچنین قطعه CSS آن به صورت زیر است:
1:root {
2 --c-sidebar: #000000;
3 --c-default: #D9D9D9;
4 --c-active: #1DA1F2;
5 --c-hover: #081018;
6}
7
8aside {
9 width: 280px;
10 border-radius: 24px;
11 padding: 40px;
12 background: var(--c-sidebar);
13}
14aside .logo {
15 display: block;
16 width: 28px;
17 height: 28px;
18 fill: var(--logo-color, var(--c-default));
19 margin-bottom: 36px;
20}
21aside nav {
22 display: grid;
23 grid-gap: 36px;
24}
25aside nav button {
26 --c-color: var(--c-default);
27 --c-background: var(--c-sidebar);
28 --icon-fill: var(--c-background);
29 -webkit-tap-highlight-color: transparent;
30 -webkit-appearance: none;
31 outline: none;
32 background: none;
33 border: none;
34 padding: 0;
35 margin: 0;
36 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
37 font-size: 19px;
38 line-height: 24px;
39 font-weight: bold;
40 text-align: left;
41 display: block;
42 cursor: pointer;
43 position: relative;
44 color: var(--c-color);
45}
46aside nav button.active {
47 --icon-fill: var(--c-active);
48 --c-color: var(--c-active);
49}
50aside nav button .icon {
51 margin-right: 16px;
52 position: relative;
53}
54aside nav button .icon svg {
55 display: block;
56 width: 24px;
57 height: 24px;
58}
59aside nav button > div {
60 display: inline-flex;
61 padding: 10px 20px 10px 12px;
62 margin: -10px -20px -10px -12px;
63 border-radius: 21px;
64 background: var(--c-background);
65}
66aside nav button.home {
67 --icon-fill-size: 0px;
68 --icon-house-s: 1;
69 --icon-outline-o: 1;
70 --icon-outline-s: 1;
71 --icon-feather-left-o: 1;
72 --icon-feather-left-s: 0;
73 --icon-feather-left-x: -7px;
74 --icon-feather-left-y: -3.5px;
75 --icon-feather-left-r: 0deg;
76 --icon-feather-right-o: 1;
77 --icon-feather-right-s: 0;
78 --icon-feather-right-x: -7px;
79 --icon-feather-right-y: -3.5px;
80 --icon-feather-right-r: 0deg;
81}
82aside nav button.home.active {
83 --icon-outline-o: 0;
84 --icon-outline-s: .9;
85 --icon-fill-size: 12px;
86}
87aside nav button.home .icon svg.house {
88 fill: var(--c-color);
89 transform: scale(var(--icon-house-s)) translateZ(0);
90}
91aside nav button.home .icon svg.house .fill {
92 fill: var(--c-active);
93 -webkit-clip-path: circle(var(--icon-fill-size) at 50% 50%);
94 clip-path: circle(var(--icon-fill-size) at 50% 50%);
95}
96aside nav button.home .icon svg.house .outline {
97 opacity: var(--icon-outline-o);
98 transform: scale(var(--icon-outline-s)) translateZ(0);
99 transform-origin: 12px 12px;
100}
101aside nav button.home .icon svg.feather {
102 position: absolute;
103 left: 50%;
104 top: 12px;
105 width: 14px;
106 height: 7px;
107 stroke: var(--c-background);
108 fill: var(--c-active);
109 stroke-width: 0.5px;
110 stroke-linecap: round;
111 stroke-linejoin: round;
112 opacity: var(--icon-feather-left-o);
113 transform: translate(var(--icon-feather-left-x), var(--icon-feather-left-y)) scale(var(--icon-feather-left-s)) rotate(var(--icon-feather-left-r)) translateZ(0);
114}
115aside nav button.home .icon svg.feather.right {
116 opacity: var(--icon-feather-right-o);
117 transform: translate(var(--icon-feather-right-x), var(--icon-feather-right-y)) scale(var(--icon-feather-right-s)) rotate(var(--icon-feather-right-r)) translateZ(0);
118}
119aside nav button.explore {
120 --icon-r: 0deg;
121 --icon-triangle-fill: var(--c-background);
122 --icon-stroke: 1.5px;
123}
124aside nav button.explore.active {
125 --icon-triangle-fill: var(--c-active);
126 --icon-stroke: 2px;
127}
128aside nav button.explore .icon {
129 transform: rotate(var(--icon-r));
130}
131aside nav button.explore .icon svg {
132 stroke: currentColor;
133 stroke-linejoin: round;
134 stroke-linecap: round;
135}
136aside nav button.explore .icon svg .outline {
137 stroke-width: var(--icon-stroke);
138}
139aside nav button.explore .icon svg .triangle {
140 fill: var(--icon-triangle-fill);
141 stroke-width: 1.5px;
142}
143aside nav button.notifications {
144 --icon-r: 0deg;
145 --icon-ring-x: 0px;
146 --icon-bell-fill: var(--c-background);
147 --icon-stroke: 1.5px;
148}
149aside nav button.notifications.active {
150 --icon-bell-fill: var(--c-active);
151 --icon-stroke: 2px;
152}
153aside nav button.notifications .icon svg {
154 stroke: currentColor;
155 stroke-linejoin: round;
156 stroke-linecap: round;
157 transform-origin: 50% 10%;
158 transform: rotate(var(--icon-r)) translateZ(0);
159}
160aside nav button.notifications .icon svg .bell {
161 stroke-width: 1.5px;
162 fill: var(--icon-bell-fill);
163}
164aside nav button.notifications .icon svg .ring {
165 stroke-width: var(--icon-stroke);
166 transform: translateX(var(--icon-ring-x));
167}
168aside nav button.messages {
169 --top-r: 0deg;
170 --icon-stroke: var(--c-color);
171}
172aside nav button.messages.active {
173 --icon-stroke: var(--c-sidebar);
174}
175aside nav button.messages .icon .top {
176 position: absolute;
177 top: 1px;
178 left: 0;
179 transform-style: preserve-3d;
180 transform-origin: 50% 15%;
181 transform: rotateX(var(--top-r));
182}
183aside nav button.messages .icon .top svg {
184 height: 13px;
185 -webkit-backface-visibility: hidden;
186 backface-visibility: hidden;
187 stroke-width: 1.5px;
188 stroke-linecap: round;
189 stroke-linejoin: round;
190}
191aside nav button.messages .icon .top svg.default {
192 fill: var(--icon-fill);
193 stroke: var(--icon-stroke);
194}
195aside nav button.messages .icon .top svg.inner {
196 position: absolute;
197 left: 0;
198 top: 0;
199 transform: rotateX(180deg);
200 stroke: var(--c-sidebar);
201}
202aside nav button.messages .icon .top svg.inner rect {
203 fill: #0168A7;
204 stroke: none;
205}
206aside nav button.messages .icon .top svg.inner path {
207 fill: #0168A7;
208}
209aside nav button.messages .icon svg {
210 fill: var(--icon-fill);
211 stroke: var(--icon-stroke);
212 stroke-width: 1.5px;
213}
214aside nav button.messages .icon svg .background {
215 fill: #0168A7;
216}
217aside nav button.bookmark {
218 --icon-default-y: 0px;
219 --icon-background-y: -17.5px;
220 --icon-corner-fill: var(--c-background);
221}
222aside nav button.bookmark.active {
223 --icon-corner-fill: var(--c-active);
224}
225aside nav button.bookmark .icon svg {
226 stroke: currentColor;
227 stroke-width: 1.5px;
228 stroke-linejoin: round;
229 stroke-linecap: round;
230}
231aside nav button.bookmark .icon svg .background {
232 stroke: none;
233 fill: currentColor;
234 transform: translateY(var(--icon-background-y));
235}
236aside nav button.bookmark .icon svg .corner {
237 fill: var(--icon-corner-fill);
238}
239aside nav button.bookmark .icon svg .default {
240 transform: translateY(var(--icon-default-y));
241 fill: var(--icon-fill);
242}
243aside nav button.lists {
244 --icon-pencil-o: 0;
245 --icon-pencil-x: 0;
246 --icon-pencil-y: -.5px;
247 --icon-pencil-r: 45deg;
248 --icon-line: var(--c-color);
249 --icon-line-top: 0px;
250 --icon-line-middle: 0px;
251 --icon-line-bottom: 0px;
252}
253aside nav button.lists.active {
254 --icon-line: var(--c-background);
255}
256aside nav button.lists .icon svg {
257 stroke-width: 1.5px;
258 stroke-linejoin: round;
259 stroke-linecap: round;
260}
261aside nav button.lists .icon svg.pencil {
262 width: 8px;
263 height: 22px;
264 fill: var(--c-active);
265 stroke: var(--c-sidebar);
266 position: absolute;
267 pointer-events: none;
268 left: 2px;
269 top: -12px;
270 transform-origin: 50% 21px;
271 opacity: var(--icon-pencil-o);
272 transform: translate(var(--icon-pencil-x), var(--icon-pencil-y)) rotate(var(--icon-pencil-r));
273}
274aside nav button.lists .icon svg.list {
275 stroke: currentColor;
276}
277aside nav button.lists .icon svg.list rect {
278 fill: var(--icon-fill);
279}
280aside nav button.lists .icon svg.list path {
281 stroke: var(--icon-line);
282 stroke-dasharray: 10px;
283 stroke-dashoffset: var(--icon-line-top);
284}
285aside nav button.lists .icon svg.list path.middle {
286 stroke-dashoffset: var(--icon-line-middle);
287}
288aside nav button.lists .icon svg.list path.bottom {
289 stroke-dasharray: 5px;
290 stroke-dashoffset: var(--icon-line-bottom);
291}
292aside nav button.profile {
293 --icon-r: 0deg;
294 --icon-eye-r: 90deg;
295 --icon-eye-r-s: 1;
296}
297aside nav button.profile .icon:before, aside nav button.profile .icon:after {
298 content: "";
299 position: absolute;
300 left: 13px;
301 top: 5px;
302 width: 2px;
303 height: 2px;
304 border-radius: 1px;
305 border-radius: 1px;
306 background: var(--c-background);
307 box-shadow: 4px 0 0 var(--c-background);
308 transform: rotateX(var(--icon-eye-r));
309}
310aside nav button.profile .icon:before {
311 left: 9px;
312 transform: scaleX(var(--icon-eye-r-s)) rotateX(var(--icon-eye-r));
313}
314aside nav button.profile .icon svg {
315 fill: var(--icon-fill);
316 stroke: currentColor;
317 stroke-width: 1.5px;
318}
319aside nav button.profile .icon svg .head {
320 transform-origin: 12px 9px;
321 transform: rotate(var(--icon-r));
322}
323
324html {
325 box-sizing: border-box;
326 -webkit-font-smoothing: antialiased;
327}
328
329* {
330 box-sizing: inherit;
331}
332*:before, *:after {
333 box-sizing: inherit;
334}
335
336body {
337 min-height: 100vh;
338 display: flex;
339 justify-content: center;
340 align-items: center;
341 background: #15181C;
342 padding: 40px;
343}
344body .dribbble {
345 position: fixed;
346 display: block;
347 right: 20px;
348 bottom: 20px;
349}
350body .dribbble img {
351 display: block;
352 height: 28px;
353}
354body .twitter {
355 position: fixed;
356 display: block;
357 right: 64px;
358 bottom: 14px;
359}
360body .twitter svg {
361 width: 32px;
362 height: 32px;
363 fill: #1da1f2;
364}در نهایت کد CSS این منوی جذاب جاوا اسکریپتی به صورت زیر است:
1const { to, set, registerPlugin } = gsap
2
3registerPlugin(MorphSVGPlugin)
4
5let getVar = key => getComputedStyle(document.documentElement).getPropertyValue(key)
6
7const sidebar = document.querySelector('aside')
8
9sidebar.querySelectorAll('button').forEach(button => {
10 button.addEventListener('pointerenter', e => {
11 to(button, {
12 '--c-background': getVar('--c-hover'),
13 '--c-color': getVar('--c-active'),
14 duration: .15
15 })
16 })
17 button.addEventListener('pointermove', e => {
18 to(button, {
19 '--c-background': getVar('--c-hover'),
20 '--c-color': getVar('--c-active'),
21 duration: .15
22 })
23 })
24 button.addEventListener('pointerleave', e => {
25 to(button, {
26 '--c-background': getVar('--c-sidebar'),
27 '--c-color': button.classList.contains('active') || sidebar.animating === button ? getVar('--c-active') : getVar('--c-default'),
28 duration: .15
29 })
30 })
31})
32
33sidebar.querySelectorAll('.home').forEach(button => wrap(button, () => {
34 to(button, {
35 keyframes: [{
36 '--icon-fill-size': '12px',
37 '--icon-outline-s': .9,
38 '--icon-outline-o': 0,
39 '--icon-house-s': .85,
40 duration: .2
41 }, {
42 '--icon-house-s': 1,
43 duration: .65,
44 ease: 'elastic.out(1, .65)',
45 onStart() {
46 to(button, {
47 keyframes: [{
48 '--icon-feather-right-s': 1,
49 duration: .1,
50 delay: .2,
51 onStart() {
52 to(button, {
53 keyframes: [{
54 '--icon-feather-right-x': '0px',
55 '--icon-feather-right-r': '-16deg',
56 duration: .4
57 }, {
58 '--icon-feather-right-x': '-9px',
59 '--icon-feather-right-r': '16deg',
60 duration: .4
61 }, {
62 '--icon-feather-right-x': '3px',
63 '--icon-feather-right-r': '0deg',
64 duration: .4
65 }, {
66 '--icon-feather-right-o': 0,
67 duration: .15
68 }]
69 })
70 }
71 }, {
72 '--icon-feather-right-y': '10px',
73 duration: 1.2
74 }]
75 })
76 to(button, {
77 keyframes: [{
78 '--icon-feather-left-s': 1,
79 duration: .1,
80 onStart() {
81 to(button, {
82 keyframes: [{
83 '--icon-feather-left-x': '-14px',
84 '--icon-feather-left-r': '16deg',
85 duration: .4
86 }, {
87 '--icon-feather-left-x': '-10px',
88 '--icon-feather-left-r': '-12deg',
89 duration: .4
90 }, {
91 '--icon-feather-left-x': '-14px',
92 '--icon-feather-left-r': '0deg',
93 duration: .4
94 }, {
95 '--icon-feather-left-o': 0,
96 duration: .15
97 }]
98 })
99 }
100 }, {
101 '--icon-feather-left-y': '10px',
102 duration: 1.2
103 }]
104 })
105 },
106 onComplete() {
107 button.classList.add('active')
108 sidebar.animating = false
109 }
110 }]
111 })
112}))
113
114sidebar.querySelectorAll('.explore').forEach(button => wrap(button, () => {
115 to(button, {
116 '--icon-triangle-fill': getVar('--c-active'),
117 '--icon-stroke': '2px',
118 duration: .15
119 })
120 to(button, {
121 '--icon-r': '360deg',
122 duration: 1.2,
123 ease: 'elastic(1, .95)',
124 clearProps: true,
125 onComplete() {
126 button.classList.add('active')
127 sidebar.animating = false
128 }
129 })
130}))
131
132sidebar.querySelectorAll('.notifications').forEach(button => wrap(button, () => {
133 to(button, {
134 duration: 1,
135 keyframes: [{
136 '--icon-r': '-12deg',
137 '--icon-ring-x': '-2.5px',
138 '--icon-bell-fill': getVar('--c-active'),
139 '--icon-stroke': '2px'
140 }, {
141 '--icon-r': '12deg',
142 '--icon-ring-x': '4.5px'
143 }, {
144 '--icon-r': '-12deg',
145 '--icon-ring-x': '-4.5px'
146 }, {
147 '--icon-r': '12deg',
148 '--icon-ring-x': '4.5px'
149 }, {
150 '--icon-r': '0deg',
151 '--icon-ring-x': '0px',
152 onComplete() {
153 button.classList.add('active')
154 sidebar.animating = false
155 }
156 }]
157 })
158}))
159
160sidebar.querySelectorAll('.messages').forEach(button => wrap(button, () => {
161 to(button, {
162 keyframes: [{
163 '--icon-fill': getVar('--c-active'),
164 '--icon-stroke': getVar('--c-sidebar'),
165 duration: .15
166 }, {
167 '--top-r': '180deg',
168 duration: .3
169 }, {
170 '--top-r': '0deg',
171 duration: .25,
172 onComplete() {
173 button.classList.add('active')
174 sidebar.animating = false
175 }
176 }]
177 })
178}))
179
180sidebar.querySelectorAll('.bookmark').forEach(button => wrap(button, () => {
181 to(button, {
182 '--icon-default-y': '-20px',
183 duration: .3
184 })
185
186 to(button, {
187 keyframes: [{
188 '--icon-background-y': '-5px',
189 duration: .1,
190 delay: .12
191 }, {
192 '--icon-background-y': '0px',
193 duration: .16
194 }]
195 })
196
197 to(button.querySelector('.corner'), {
198 keyframes: [{
199 morphSVG: 'M5.68047 3H11.9995H18.3186C20.7497 3 21.9299 9 19.2215 9H4.77786C2.06991 9 3.24972 3 5.68047 3Z',
200 duration: .15
201 }, {
202 morphSVG: 'M4.36835 6C4.36835 6 5.71509 10.7143 12.0001 10.7143C18.2852 10.7143 19.6316 6 19.6316 6C23.6719 6 21.8766 12 19.1829 12H4.81702C2.12365 12 0.327912 6 4.36835 6Z',
203 duration: .125
204 }, {
205 morphSVG: {
206 shape: 'M4 20.3665C4.00001 20.8781 4.60713 21.1779 5.04898 20.8845L12 15.95L18.951 20.8845C19.3929 21.1779 20 20.8781 20 20.3664V15L4 14.9999V20.3665Z',
207 shapeIndex: 6
208 },
209 duration: .6,
210 ease: 'elastic.out(1, .75)',
211 clearProps: true,
212 onStart() {
213 set(button, {
214 '--icon-corner-fill': getVar('--c-active'),
215 delay: .05
216 })
217 },
218 onComplete() {
219 button.classList.add('active')
220 sidebar.animating = false
221 }
222 }]
223 })
224}))
225
226sidebar.querySelectorAll('.lists').forEach(button => wrap(button, () => {
227 to(button, {
228 keyframes: [{
229 '--icon-line-top': '10px',
230 '--icon-line-middle': '10px',
231 '--icon-line-bottom': '5px',
232 duration: .15
233 }, {
234 '--icon-fill': getVar('--c-active'),
235 '--icon-line': getVar('--c-sidebar'),
236 '--icon-pencil-o': 1,
237 duration: .15
238 }, {
239 '--icon-line-top': '0px',
240 '--icon-pencil-x': '10px',
241 duration: .15,
242 onStart() {
243 to(button, {
244 duration: .15,
245 keyframes: [{
246 '--icon-pencil-r': '40deg',
247 }, {
248 '--icon-pencil-r': '50deg',
249 }, {
250 '--icon-pencil-r': '45deg',
251 }]
252 })
253 }
254 }, {
255 '--icon-pencil-y': '4px',
256 '--icon-pencil-x': '0px',
257 duration: .1
258 }, {
259 '--icon-line-middle': '0px',
260 '--icon-pencil-x': '10px',
261 duration: .15,
262 onStart() {
263 to(button, {
264 duration: .15,
265 keyframes: [{
266 '--icon-pencil-r': '40deg',
267 }, {
268 '--icon-pencil-r': '50deg',
269 }, {
270 '--icon-pencil-r': '45deg',
271 }]
272 })
273 }
274 }, {
275 '--icon-pencil-y': '8px',
276 '--icon-pencil-x': '0px',
277 duration: .1
278 }, {
279 '--icon-pencil-x': '5px',
280 '--icon-line-bottom': '0px',
281 duration: .15
282 }, {
283 '--icon-pencil-o': 0,
284 '--icon-pencil-x': '10px',
285 duration: .1,
286 clearProps: true,
287 onComplete() {
288 button.classList.add('active')
289 sidebar.animating = false
290 }
291 }]
292 })
293}))
294
295sidebar.querySelectorAll('.profile').forEach(button => wrap(button, () => {
296 to(button, {
297 keyframes: [{
298 '--icon-fill': getVar('--c-active'),
299 duration: .15
300 }, {
301 '--icon-r': '-20deg',
302 duration: .15
303 }, {
304 '--icon-r': '20deg',
305 duration: .15
306 }, {
307 '--icon-r': '0deg',
308 duration: .2
309 }, {
310 duration: .15,
311 clearProps: true,
312 onComplete() {
313 button.classList.add('active')
314 sidebar.animating = false
315 }
316 }]
317 })
318}))
319
320function wrap(button, callback) {
321 button.addEventListener('click', e => {
322 if(sidebar.animating || button.classList.contains('active')) {
323 return;
324 }
325 sidebar.animating = button
326
327 sidebar.querySelectorAll('button.active').forEach(active => {
328 active.classList.remove('active')
329 active.removeAttribute('style')
330 if(active.querySelector('.corner')) {
331 set(active.querySelector('.corner'), {
332 morphSVG: 'M5.5 3L12 3.01L18.5 3V3.01H5.5V3Z'
333 })
334 }
335 })
336
337 set(button, {
338 '--c-color': getVar('--c-active')
339 })
340
341 return callback()
342
343 })
344}خروجی قطعه کد بالا به صورت زیر است:
کاربرانی که دنبال جذاب‌تر و خلاقانه‌تر کردن منوهای کناری هستند، می‌توانند از مثال بالا ایده بگیرند.
۹. منوی ناوبری با پوشش تمام صفحه
این مثال از ساخت منو با جاوا اسلکریپت مربوط به منوی ناوبری با پوشش تمام صفحه خواهد بود که قطعه کد HTML آن به صورت زیر است:
1<div id="nav-bg" class="btn"></div>
2<div id="toggle-btn" class="btn">
3 <span></span>
4 <span></span>
5 <span></span>
6</div>
7
8<div class="wrapper">
9 <nav>
10 <ul>
11 <li><a class="link" href="#0">Projects</a></li>
12 <li><a class="link" href="#0">About</a></li>
13 <li><a class="link" href="#0">Contact</a></li>
14 </ul>
15 </nav>
16
17 <div id="content">
18 <h1>Floating circle navigation ~60fps animation</h1>
19 </div>
20</div>قطعه کد CSS منوی تمام صفحه به صورت زیر است:
1/* =======
2IMPORTS
3======= */
4@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,600');
5
6
7/* =========
8VARIABLES
9========= */
10:root {
11 --offset-value: 30;
12 --btn-size: 60;
13
14 --green: #4ECA78;
15}
16
17
18/* =======
19WRAPPER
20======= */
21.wrapper {
22 font-family: 'Encode Sans Condensed', sans-serif;
23 font-weight: 600;
24 height: 100vh;
25 width: 100%;
26 position: relative;
27 background: linear-gradient(to top right, #4ECA78, #D0DB68);
28}
29
30
31/* =====================
32NAVIGATION BACKGROUND
33===================== */
34#nav-bg {
35 transform-origin: center center;
36 transition: transform .3s;
37 transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale));
38 will-change: transform;
39 pointer-events: none;
40}
41
42
43/* ======
44BUTTON
45====== */
46.btn {
47 position: fixed;
48 height: calc(var(--btn-size)*1px);
49 width: calc(var(--btn-size)*1px);
50 bottom: calc((var(--offset-value))*1px);
51 left: calc(var(--offset-value)*1px);
52 /*left: calc(50% - (var(--btn-size)/2*1px)); if you wish to center it */
53 border-radius: 50%;
54 background: #fafafa;
55 cursor: pointer;
56 margin: 0;
57 padding: 0 15px;
58 border: none;
59 z-index: 100;
60 user-select: none;
61 -webkit-tap-highlight-color: rgba(0,0,0,0);
62}
63
64#toggle-btn {
65 display: flex;
66 flex-direction: column;
67 justify-content: center;
68 align-items: center;
69 color: var(--green);
70 /*box-shadow: 0 6px 12px rgba(0,0,0,.1);*/
71 transition: transform .3s;
72}
73
74#toggle-btn span {
75 position: relative;
76 width: 100%;
77}
78
79#toggle-btn span {
80 margin-top: -4px;
81}
82#toggle-btn span + span {
83 margin-top: 8px;
84}
85
86#toggle-btn span:before,
87#toggle-btn span:after {
88 content: '';
89 position: absolute;
90 top: 0;
91 background: currentColor;
92 opacity: .8;
93 height: 100%;
94 width: 50%;
95 height: 4px;
96 transition: .25s cubic-bezier(.6,0,.3,1);
97 transform-origin: center center;
98}
99
100#toggle-btn span:before {
101 left: 0;
102 border-radius: 3px 0 0 3px;
103}
104
105#toggle-btn span:after {
106 right: 0;
107 border-radius: 0 3px 3px 0;
108}
109
110#toggle-btn.shown span:nth-of-type(1):before {
111 transform: translate3d(3px, 3.5px, 0) rotate(45deg);
112}
113
114#toggle-btn.shown span:nth-of-type(1):after {
115 transform: translate3d(-3px, 3.5px, 0) rotate(-45deg);
116}
117
118#toggle-btn.shown span:nth-of-type(3):before {
119 transform: translate3d(3px, -3.5px, 0) rotate(-45deg);
120}
121
122#toggle-btn.shown span:nth-of-type(3):after {
123 transform: translate3d(-3px, -3.5px, 0) rotate(45deg);
124}
125
126#toggle-btn.shown span:nth-of-type(2):before,
127#toggle-btn.shown span:nth-of-type(2):after {
128 opacity: 0.0001;
129}
130
131#toggle-btn.shown span:nth-of-type(2):before {
132 transform: translateX(-200%);
133}
134
135#toggle-btn.shown span:nth-of-type(2):after {
136 transform: translateX(200%);
137}
138
139#toggle-btn.shown:before {
140 transform: scale(.6);
141 transition: .2s;
142}
143
144#toggle-btn:before {
145 content: '';
146 transition: .2s .2s;
147 position: absolute;
148 top: 3px;
149 left: 0;
150 width: 100%;
151 height: 100%;
152 background: rgba(0,0,0,.1);
153 border-radius: inherit;
154 filter: blur(5px);
155 z-index: -2;
156}
157#toggle-btn:after {
158 content: '';
159 position: absolute;
160 top: 0;
161 left: 0;
162 width: 100%;
163 height: 100%;
164 border-radius: inherit;
165 background: #fafafa;
166 z-index: -1;
167}
168
169/* ==========
170NAVIGATION
171========== */
172nav {
173 width: 100%;
174 height: 100%;
175 background: transparent;
176 position: fixed;
177 top: 0;
178 left: 0;
179 overflow: hidden;
180 display: flex;
181 z-index: 200;
182 pointer-events: none;
183}
184
185nav ul {
186 margin: auto;
187 pointer-events: auto;
188 text-align: center;
189}
190
191nav li {
192 font-size: 30px;
193 color: #212121;
194 user-select: none;
195 transform: translate(-20px,20px) scale(.9);
196 transition: 0s;
197 opacity: 0.0001;
198 visibility: hidden;
199 will-change: transform;
200}
201
202nav li + li {
203 margin-top: 30px;
204}
205
206#toggle-btn.shown ~ .wrapper nav li {
207 transform: none;
208 opacity: 1;
209 visibility: visible;
210 transition: .35s cubic-bezier(.4,2.08,.55,1);
211}
212
213#toggle-btn.shown ~ .wrapper nav li:nth-child(1) {
214 transition-delay: .15s;
215}
216#toggle-btn.shown ~ .wrapper nav li:nth-child(2) {
217 transition-delay: .125s;
218}
219#toggle-btn.shown ~ .wrapper nav li:nth-child(3) {
220 transition-delay: .1s;
221}
222
223/* ============
224LINK EFFECT
225============ */
226.link {
227 position: relative;
228 touch-action: manipulation;
229 -webkit-tap-highlight-color: rgba(0,0,0,0);
230}
231
232.link:before,
233.link:after {
234 position: absolute;
235 content: '';
236 height: 3px;
237 width: 50%;
238 background: #4ECA78;
239 top: calc(50% + 2px);
240 transition: transform .3s cubic-bezier(.5,.5,0,1);
241}
242
243.link:before {
244 left: 0;
245 transform: translateX(calc(-100% - 10px)) scaleX(0);
246 transform-origin: left;
247}
248
249.link:after {
250 right: 0;
251 transform: translateX(calc(100% + 10px)) scaleX(0);
252 transform-origin: right;
253}
254
255.link:hover:before {
256 transform: translateX(calc(-100% - 10px)) scaleX(1);
257 transform-origin: right;
258}
259
260.link:hover:after {
261 transform: translateX(calc(100% + 10px)) scaleX(1);
262 transform-origin: left;
263}
264
265
266/* =======
267CONTENT
268======= */
269#content {
270 display: flex;
271 height: 100%;
272}
273
274#content h1 {
275 font-size: calc(4vmin + 1em);
276 text-align: center;
277 margin: auto;
278 color: #fff;
279 text-shadow: 0 6px 18px rgba(0,0,0,.1);
280}
281
282
283
284
285/* Usual suspects */
286* {
287 box-sizing: border-box;
288 margin: 0;
289 padding: 0;
290}
291
292html, body {
293 height: 100%;
294}
295
296a,
297a:visited,
298a:focus,
299a:active,
300a:link {
301 text-decoration: none;
302 outline: 0;
303}
304
305a {
306 color: currentColor;
307 transition: .2s ease-in-out;
308}
309
310ul {
311 padding: 0;
312 list-style: none;
313}
314
315img {
316 vertical-align: middle;
317 height: auto;
318 width: 100%;
319}همچنین قطعه کد جاوا اسکریپت این منو به صورت زیر است:
1const elem = document.querySelector('#nav-bg'),
2toggleBtn = document.querySelector('#toggle-btn'),
3elemH = elem.getBoundingClientRect().height,
4elemW = elem.getBoundingClientRect().width;
5
6let open = false;
7let scale, offsetX, offsetY;
8
9const calculateValues = () => {
10 const w = window.innerWidth;
11 const h = window.innerHeight;
12 //const cssStyles = getComputedStyle(elem);
13 //const offsetValue = Number(cssStyles.getPropertyValue('--offset-value'));
14 const offsetValue = Number(getComputedStyle(elem).getPropertyValue('--offset-value'));
15
16 // Offsets to center the circle
17 offsetX = w / 2 - elemW / 2 - offsetValue;
18 offsetY = h / 2 - elemH / 2 - offsetValue;
19
20 // Good old pythagoras
21 const radius = Math.sqrt(h ** 2 + w ** 2);
22 scale = radius / (elemW / 2) / 2 + .1; // Add '.1' to compensate for Safari sub pixel blur issue
23 return scale;
24};
25
26
27const openMenu = () => {
28 elem.style.setProperty("--translate-x", `${offsetX}px`);
29 elem.style.setProperty("--translate-y", `-${offsetY}px`);
30 elem.style.setProperty("--scale", scale);
31};
32const closeMenu = () => {
33 elem.style.setProperty("--scale", 1);
34 elem.style.setProperty("--translate-x", 0);
35 elem.style.setProperty("--translate-y", 0);
36};
37const animateMenu = () => {
38 open ? openMenu() : closeMenu();
39};
40
41const toggleMenu = () => {
42 open = !open;
43 animateMenu();
44 toggleBtn.classList.toggle('shown');
45};
46
47const resizeHandler = () => {
48 window.requestAnimationFrame(() => {
49 calculateValues();
50 animateMenu();
51 });
52};
53
54calculateValues();
55
56//toggleBtn.onclick = toggleMenu;
57toggleBtn.addEventListener('click', toggleMenu, false);
58window.addEventListener("resize", resizeHandler, false);خروجی نهایی کدهای بالا به صورت زیر است:
انیمیشن‌های «60 FPS» با کارایی بالا، منوی فوق را به منویی عمودی تمام صفحه تبدیل خواهند کرد و همچنین هنگام کلیک بر روری هر زیر منو، انیمیشنی متحرک با دو خط در چپ و راست خود دارند.
۹. منوی جاوا اسکریپت نواری
نمونه بعدی در ساخت منو با جاوا اسکریپت، منوی نواری با ظاهر شدن منوها از سمت راست آن بوده که قطعه کد HTML آن به صورت زیر است:
1<header>
2 <img class="activator" id="activator" src="//s.svgbox.net/hero-outline.svg?fill=fff#menu-alt-1" alt="">
3 <nav>
4 <ul>
5 <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#bell"></a></li>
6 <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#beaker"></a></li>
7 <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#chat"></a></li>
8 <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#cloud-download"></a></li>
9 <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#cog"></a></li>
10 </ul>
11 </nav>
12 </header>قطعه کد این منوی جاوا اسکریپت هم به صورت زیر است:
1body {
2 margin: 0;
3 height: 100vh;
4 background: #242831;
5 color: white;
6 display: grid;
7 place-content: center;
8}
9
10header {
11 display: flex;
12}
13header .activator {
14 padding: 1em;
15 border-radius: 100%;
16 cursor: pointer;
17}
18header .activator:hover {
19 background: #1e2129;
20}
21
22img {
23 width: 100%;
24 max-width: 45px;
25}
26
27ul {
28 list-style-type: none;
29 margin: 0;
30 padding: 0;
31}
32
33nav {
34 background: #292e38;
35 border-radius: 0 5em 5em 0;
36 padding: 0.5em;
37 clip-path: ellipse(50% 50% at -50% 50%);
38}
39nav ul {
40 display: flex;
41}
42nav ul li a {
43 display: block;
44 padding: 0.5em;
45 margin: 0 0.5em;
46 border-radius: 50%;
47}
48nav ul li a:hover {
49 background: #323844;
50}
51nav ul li a img {
52 opacity: 0;
53 transform: translateX(-10px);
54}کدهای جاوا اسکریپت منوی مد نظر به صورت زیر است:
1 var card = document.getElementById('activator');
2 var tl = gsap.timeline({defaults: {ease: "power2.inOut"}})
3
4 var toggle = false;
5
6 tl.to('.activator', {
7 background: '#805ad5',
8 'borderRadius': '5em 0 0 5em'
9 });
10 tl.to('nav', {
11 'clipPath': 'ellipse(100% 100% at 50% 50%)'
12 }, "-=.5")
13 tl.to('nav img', {
14 opacity: 1,
15 transform: 'translateX(0)',
16 stagger: .05
17 }, "-=.5")
18 tl.pause();
19
20 card.addEventListener('click', () => {
21 toggle = !toggle;
22 if (toggle ? tl.play() : tl.reverse());
23 })حال خروجی کدهای بالا برای ساخت منو با جاوا اسکریپت به صورت تصویر زیر است:
منوی بالا به خصوص برای استفاده در دستگاه‌های موبایل بسیار منوی جذابی خواهد شد و کاربر به راحتی می‌تواند استایل آن را مطابق استایل و سبک طراحی خود تغییر دهد.
۱۰. منوی پیمایش متحرک برای دستگاه های موبایل
مثال آخر از ساخت منو با جاوا اسکریپت در این مطلب از مجله فرادرس، منوی پیمایش متحرک برای دستگاه‌های موبایل خواهد بود که قطعه کد HTML آن به صورت زیر است:
1<!-- https://dribbble.com/shots/6251784-Navigation-Menu-Animation -->
2<nav>
3 <div class="link-background"></div>
4 <ul>
5 <li>
6 <a class="active">
7 <svg>
8 <use xlink:href="#home">
9 </svg>
10 <span class="link-text">Home</span>
11 </a>
12 </li>
13 <li>
14 <a>
15 <svg>
16 <use xlink:href="#inbox">
17 </svg>
18 <span class="link-text">Inbox</span>
19 </a>
20 </li>
21 <li>
22 <a>
23 <svg>
24 <use xlink:href="#profile">
25 </svg>
26 <span class="link-text">Profile</span>
27 </a>
28 </li>
29 </ul>
30</nav>
31<svg style=display:none;>
32 <symbol version="1.1" id="home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
33 viewBox="0 0 50 50">
34 <path fill="none" stroke="" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M31,44.738v-8.52
35 c0-1.505-0.69-2.929-1.877-3.87l0,0c-1.826-1.448-4.421-1.448-6.247,0l0,0C21.69,33.288,21,34.712,21,36.218v3.565"/>
36 <line fill="none" stroke="" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="15" y1="20.223" x2="29" y2="20.223"/>
37 <path fill="none" stroke="" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M8,19.232
38 L24.681,5.466c0.758-0.632,1.869-0.62,2.612,0.03l15.03,13.144C42.754,19.016,43,19.557,43,20.126v22.892
39 C43,44.113,42.105,45,41,45h-8.6H31H10c-1.105,0-2-0.887-2-1.982V28.151c0-1.095,0.895-1.982,2-1.982h7"/>
40 </symbol>
41 <symbol version="1.1" id="inbox" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
42 viewBox="0 0 50 50">
43 <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M45.5,39.5h-40c-1.657,0-3-1.343-3-3V23.55
44 c0-0.028,0.022-0.05,0.05-0.05h13.555l0.665,1.989c0.952,3.563,4.29,6.106,8.139,6.115c0.061,0,0.122,0,0.183,0
45 c3.849-0.009,7.187-2.552,8.139-6.115l0.665-1.989H47.45c0.028,0,0.05,0.022,0.05,0.05V37.5C47.5,38.605,46.605,39.5,45.5,39.5z"/>
46 <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M47.5,23.5l-7.109-11.664
47 c-0.556-0.835-1.493-1.336-2.496-1.336H12.106c-1.003,0-1.94,0.501-2.496,1.336L2.5,23.5"/>
48 </symbol>
49 <symbol version="1.1" id="profile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
50 viewBox="0 0 50 50">
51 <line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="18.5" y1="37" x2="28.5" y2="37"/>
52 <line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="14.5" y1="42" x2="21.5" y2="42"/>
53 <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M35.857,27.299
54 C32.753,25.216,29.019,24,25,24C14.735,24,6.323,31.931,5.557,42"/>
55 <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M35.857,29.299"/>
56 <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M39.665,30.648"/>
57 <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M44.443,42
58 c-0.269-3.539-1.483-6.815-3.391-9.574"/>
59 <circle fill="none" stroke="" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" cx="25.5" cy="17" r="9"/>
60 </symbol>
61</svg>قطعه کد CSS این مثال به صورت زیر است:
1@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
2body,
3html {
4 height: 100%;
5}
6body {
7 margin: 0;
8 display: flex;
9 align-items: center;
10 justify-content: center;
11 background: #e9ecff;
12 font-family: "Roboto";
13}
14nav {
15 position: relative;
16}
17ul {
18 list-style-type: none;
19 padding: 0;
20 background: #432fbf;
21 border-bottom-left-radius: 40px;
22 border-bottom-right-radius: 40px;
23 box-shadow: 2px 10px 20px rgba(67, 47, 191, 0.5);
24}
25li {
26 display: inline-block;
27 margin: 40px 20px;
28}
29li:first-child {
30 margin-left: 30px;
31}
32li:last-child {
33 margin-right: 30px;
34}
35a {
36 cursor: pointer;
37 display: flex;
38 align-items: center;
39 padding: 10px 25px;
40}
41svg {
42 stroke: #9386ea;
43 width: 44px;
44 height: 44px;
45 transform: translateX(35px);
46 transition: 0.4s ease all;
47}
48a.active {
49 color: white;
50}
51a.active svg {
52 stroke: white;
53 transform: translateX(0px);
54}
55.link-text {
56 color: white;
57 margin-left: 16px;
58 opacity: 0;
59 transition: 0.3s ease all;
60 user-select: none;
61 height: 42px;
62 display: flex;
63 align-items: center;
64 z-index: 1;
65}
66a.active .link-text {
67 opacity: 1;
68 transition-delay: 0.1s;
69}
70.link-background {
71 position: absolute;
72 left: 30px;
73 top: 53px;
74 background: #5e4ecb;
75 border-radius: 18px;
76 width: 153px;
77 height: 70px;
78 z-index: 0;
79 transition: 0.4s cubic-bezier(0.7, 0, 0.38, 0.86) all;
80}همچنین قطعه کد جاوا اسکریپت این مثال به صورت زیر است:
1let links = document.querySelectorAll('a');
2let background = document.querySelector('.link-background');
3
4
5const clickHandler = el => {
6 links.forEach(link => {
7 link.classList.remove('active');
8 });
9 el.classList.add('active');
10};
11links.forEach((link, index) => {
12 link.addEventListener('click', e => {
13 e.preventDefault();
14 // Update background position
15 background.style.transform = `translateX(${128.25 * index}%)`;
16 clickHandler(e.currentTarget);
17
18 });
19});خروجی کدهای بالا منوی جذاب زیر است:
سخن پایانی
منوهای جاوا اسکریپت قابلیت بسیار کاربردی و جذابی هستند که کارهای پیمایش وب‌سایت یا وب اپلیکیشن را بسیار ساده کرده و به کاربران نهایی این امکان را می‌دهند که به راحتی به بخش‌های مختلف سایت سر بکشند. این منوها در کنار اینکه جذابیت خاصی به پروژه‌های توسعه وب می‌بخشند، بسیار کاربردی و کاربرپسند نیز هستند به گونه‌ای که در حال حاضر کمتر وب‌سایتی پیدا میشود که از منوهای ناوبری استفاده نکند.
در مطلب آموزش ساخت منو با جاوا اسکریپت از مجله فرادرس در کنار آموزش ساخت منویی جذاب و کاربردی به صورت قدم به قدم، ۱۰ تا منوی جذاب و کاربردی نیز همراه قطعه کدهای آن ها ارائه شد. کاربران می‌توانند از نمونه منوهای بالا ایده گرفته و یا حتی از خود آن‌ها در پروژه‌های توسعه وب استفاده کنند.
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
https://b.fdrs.ir/a6q
کامل بهرامی دانش‌آموخته کارشناسی ارشد رشته مهندسی کامپیوتر گرایش نرم‌افزار از دانشگاه ارومیه است. به حوزه کامپیوتر، برنامه‌نویسی و فناوری اطلاعات علاقه‌مند است و در حوزه‌های مذکور در مجله فرادرس محتوا تولید میکند.
مطالب مرتبط
خیلی ممنون از ارائه دستورات ایجاد منو. ببخشید من یک منو طراحی کردم البته با روش گفته شده شما فرق می کند. مشکلی که داره اینه که در مرورگر فایرفاکس حالت پرشی منو بالا و پایین می رود ولی در کروم اینجوری نیست.حتی دکمه های input اختصاصی هم که ایجاد می کنم در فایرفاکس باید دوبار کلیک کنم تا انتخاب بشود و در کروم همون یک بار کلیک انتخاب می شود. لطف میکنید بگید مشکل از کجاست؟
سپاس