مشاوره و آموزش تحصیلی ریسمونک
09196099979
0
فهرست
  1. صفحه نخست
  2. وبلاگ

چگونه با جاوا اسکریپت منو بسازیم ؟

تاریخ انتشار ۲۵ آذر ۱۴۰۲
دسته بندی

چگونه با جاوا اسکریپت منو بسازیم ؟

ساخت منو با جاوا اسکریپت یکی از راه‌های ایجاد رابط‌های کاربری تعاملی و پاسخگو است که کاربران را مشتاق به استفاده از وب‌سایت یا پلتفرم می‌کند. با ادغام یکپارچه جاوا اسکریپت، «HTML» و «CSS»، می‌توان عملکرد وب‌سایت‌ها را دگرگون کرد و به کاربران این امکان را داد که به آسان‌ترین شکل ممکن وب‌سایت را پیمایش کنند. منوها یکی از مهم‌ترین اجزای رابط‌‌های کاربری در وب‌سایت‌ها و وب اپلیکیشن‌ها هستند که «تجربه کاربری» (User Experience یا به اختصار UX) را بسیار بهبود می‌بخشند. در این مطلب از «مجله فرادرس» قصد داریم صفر تا صد ایجاد منو در جاوا اسکریپت را بیان کنیم و در کنار آن ۱۰ منوی جذاب و کاربردی را همراه با منبع کد آن‌ها ارائه کنیم، پس اگر دوست دارید ساخت منو با Javascript را یاد بگیرید و در کنار آن به نمونه منوهایی دسترسی داشته باشید که بتوانید با آن‌ها تمرین کنید، تا آخر این مطلب با ما همراه باشید.

فهرست مطالب این نوشته

منوی جاوا اسکریپت چیست؟

ساخت منو با جاوا اسکریپت

۱۰ منوی نمونه ساخته شده با جاوا اسکریپت، HTML و CSS

سخن پایانی

منوی جاوا اسکریپت چیست؟

منوی وب‌سایت جنبه‌ای حیاتی از طراحی وب است که به عنوان رابط اصلی برای تعامل با کاربر عمل می‌کند. اگرچه منوی اولیه ساخته شده با HTML و CSS در بیشتر موارد پاسخگوی نیازهای وب‌سایت است اما یکپارچه‌سازی آن‌ها با جاوا اسکریپت خلاقیت را به پروژه تزریق می‌کند و تجربه کلی کاربر را ارتقا می‌دهد. منوهای جاوا اسکریپت، چه به صورت نوارهای کناری، ناوبری هدر، یا منوهای موبایل و غیره، تعاملی پیشرفته را ارائه می‌دهند. استفاده از جاوا اسکریپت امکان کنترل دقیق روی رویدادهای کلیک را فراهم می‌کند و از محدودیت‌های CSS به‌تنهایی فراتر می‌رود. نتیجه ادغام جاوا اسکریپت با HTML و CSS در ساخت منو، نه‌تنها موجب ایجاد منویی جذاب می‌شود، بلکه عملکردهای ارزشمندی فراتر از قابلیت‌های HTML و CSS را نیز به منوهای ساده اضافه می‌کند.

آموزش JavaScript ES6 جاوا اسکریپت
فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس
کلیک کنید

برای ساخت منو از چه فناوری هایی استفاده می‌شود؟

برای ساخت منوهای ساده می‌توان از دو فناوری مهم وب یعنی HTML و CSS استفاده کرد ولی با این حال بسته به نیازهای پروژه و ترجیات طراح سایت و توسعه‌دهنده وب می‌توان از فناوری‌های دیگری مانند زبان برنامه نویسی جاوا اسکریپت نیز بهره برد که استفاده از این فناوری موجب عملگرا کردن و جذابیت بخشیدن به منوها می‌شود.

مزایای ساخت منو با جاوا اسکریپت چیست؟

ساخت منو با جاوا اسکریپت امکانات بسیاری را به وب‌سایت‌ها اضافه می‌کند. این روش به توسعه‌دهندگان اجازه می‌دهد تا منوهای پویا و تعاملی را با استفاده از قابلیت‌های جاوا اسکریپت ایجاد کنند. با استفاده از جاوا اسکریپت، می‌توان به سرعت واکنش‌گرایی و تغییرات بر اساس اطلاعات دینامیک را فراهم کرد. همچنین، این روش امکانات فراوانی در اختیار کاربران قرار خواهد داد و تجربه کاربری را بهبود می‌بخشد.

ساخت منو با جاوا اسکریپت

در این بخش از مطلب به صورت قدم به قدم به ساخت منو با جاوا اسکریپت خواهیم پرداخت. منویی که قرار است در این مطلب به ساخت آن بپردازیم از نوع منوی کشویی یا همان منوی «Dropdown» است که در بیشتر وب‌سایت‌ها مورد استفاده قرار می‌گیرد. این منو قرار است در ۳ قدم ساده برای کاربران تشریح شود که در ادامه این مطلب این ۳ مرحله آمده است.

فردی در حال طراحی منوهای جذاب با جاوا اسکریپت، HTML و CSS

مرحله ۱. علامت گذاری برای ایجاد منوی کشویی

قدم اول در ساخت منو با جاوا اسکریپت، مربوط به علامت گذاری منو است. برای شروع، آیکون‌های موردنیاز را از «Boxicons» که نوعی کتابخانه آیکون رایگان بوده و استفاده از آن ساده است، وارد خواهیم کرد. برای این هدف باید تگ اسکریپت زیر را در هدر فایل HTML اضافه کرد:

<head>
   <link 
     href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" 
     rel="stylesheet"
    />
 </head>

پس از واردکردن نمادها، یک div کانتینری باید ایجاد شود تا هم دکمه و هم منوی کشویی را در بر بگیرد. همچنین در کانتینر باید نوعی عنصر دکمه ایجاد شود که کلاس و شناسه آن روی btn تنظیم شده است. متن دکمه را می‌توان سفارشی کرد و نوعی نماد پیکان برای جذابیت بصری به آن افزود که این کار با کد زیر امکان‌پذیر است:

<button class="btn" id="btn">
  Dropdown
  <i class="bx bx-chevron-down" id="arrow"></i>
</button>

حال نوبت به ادغام آیکون‌های منوی کشویی خواهد رسید. مستقیم در زیر تگ دکمه، باید نوعی عنصر div با کلاس و id تنظیم شده به Dropdown ساخته شود. در این div ، باید برای هر آیتم منوی کشویی خاص، تگ A در HTML برای ایجاد لینک باید ایجاد شود و آیکون‌ها و متن مربوطه را باید به آن‌ها اختصاص داد. قطعه کد زیر برای انجام این کار است:

<div class="dropdown" id="dropdown">
  <a href="#create">
    <i class="bx bx-plus-circle"></i>
    Create New
  </a>
  <a href="#draft">
    <i class="bx bx-book"></i>
    All Drafts
  </a>
  <a href="#move">
    <i class="bx bx-folder"></i>
    Move To
  </a>
  <a href="#profile">
    <i class="bx bx-user"></i>
    Profile Settings
  </a>
  <a href="#notification">
    <i class="bx bx-bell"></i>
    Notification
  </a>
  <a href="#settings">
    <i class="bx bx-cog"></i>
    Settings
  </a>
</div>

خروجی کد زیر چیزی شبیه به تصویر زیر خواهد بود:

طرح اولیه از ساخت منوی کشویی با جاوا اسکریپت که شامل ۶ زیر منو است

کار هنوز تکمیل نشده است و منویی که ایجاد می‌شود باید تکمیل‌تر شود که در ادامه این مطلب از ساخت منو با جاوا اسکریپت به آن پرداخته شده است.

 

 

نرم افزار ETABS‌ چیست و چه کاربردی دارد؟(در یک برگه جدید مرورگر باز میکند)نوشته
۶۹ دستور مهم جاوا اسکریپت که باید بدانید(در یک برگه جدید مرورگر باز میکند)نوشته
html چیست و چرا همیشه با css همراه است(در یک برگه جدید مرورگر باز میکند)نوشته
ساده ترین زبان برنامه نویسی چیست؟(در یک برگه جدید مرورگر باز میکند)نوشته

جاوا چیست ؟ از صفر تاصد(در یک برگه جدید مرورگر باز میکند)نوش

 

 

مرحله ۲. استایل بخشیدن به منو با Css

کار استایل بخشیدن به منوها با تنظیم مجدد «حاشیه» (Margin) پیش‌فرض و «فضای اطراف محتوا» (Padding) برای هر عنصر صفحه و ایجاد مقادیر قابل‌استفاده مجدد به وسیله متغیرها شروع خواهد شد. همچنین در این منو از خانواده فونت Inter برای زیبایی استفاده می‌شود. همچنین سبک‌های مورد استفاده برای عنصر بدنه، تنظیم حاشیه، رنگ پس‌زمینه، اندازه فونت و رنگ متن به صورت زیر هستند:

@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);

* {
  margin: ۰;
  padding: ۰;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  --shadow: rgba(۰, ۰, ۰, ۰.۰۵) ۰px ۶px ۱۰px ۰px,
    rgba(۰, ۰, ۰, ۰.۱) ۰px ۰px ۰px ۱px;
  --color: #166e67;
  --gap: ۰.۵rem;
  --radius: ۵px;
}

body {
  margin: ۲rem;
  background-color: #b3e6f4;
  font-size: ۰.۹rem;
  color: black;
}

کار بعدی در استایل بخشیدن به منو، شکل دادن به دکمه و کانتینر بازشو است که برای انجام این کار باید باید وظایف زیر را انجام داد:

  • استفاده از متغیرهای تعریف شده برای مقادیر ثابت
  • استفاده از box shadows و رنگ‌های پس‌زمینه برای افزایش جذابیت بصری
  • تنظیم padding و «شعاع حاشیه» ( border-radius ) برای ظاهری صیقلی و جذاب

قطعه کد انجام این کار به صورت زیر است:

.btn {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--gap);
  padding: ۰.۶rem;
  cursor: pointer;
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow);
  position: relative;
}

.bx {
  font-size: ۱.۱rem;
}

.dropdown {
  position: absolute;
  width: ۲۵۰px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: ۰.۳rem;
  background: white;
}

.dropdown a {
  display: flex;
  align-items: center;
  column-gap: var(--gap);
  padding: ۰.۸rem ۱rem;
  text-decoration: none;
  color: black;
}

.dropdown a:hover {
  background-color: var(--color);
  color: white;
}

از آنجایی که منوهای کشویی معمولاً عناصر را پوشش می‌دهند، دکمه از نظر استراتژیک به صورت نسبی قرار می‌گیرد، در حالی که منوی کشویی به صورت مطلق تنظیم می‌شود. این امر نزدیکی بین دو عنصر را تضمین می‌کند و عناصر از نظر بصری روی یکدیگر قرار می‌گیرند. این نوع چیدمان دکمه از نمایش یکپارچه صفحه محافظت کرده و تجربه کاربری یکپارچه را حفظ می‌کند. خروجی کارهای بالا تا این مرحله از ساخت منو با جاوا اسکریپت به صورت زیر است:

یک منوی جذاب ساخته شده با جاوا اسکریپت، HTML و CSS - ساخت منو با جاوا اسکریپت

اکنون‌که منوی کشویی ما تغییرات سبک خود را دریافت کرده است، هدف ما این خواهد بود که اطمینان حاصل کنیم که این منو فقط با کلیک روی دکمه ظاهر می‌شود، نه اینکه بلافاصله با باز شدن صفحه وب قابل‌مشاهده باشد. برای دستیابی به این هدف، از CSS برای مخفی کردن کشویی ابتدایی، استفاده خواهد شد. برای این کار باید از نوعی استراتژی برای پنهان کردن منوی کشویی استفاده شود. نمونه‌ای زنده از این نوع استراتژی نحوه پیاده‌سازی منوهای کشویی سایت «GitHub» هستند که هم قابل مشاهده بوده هم انتقال‌های متحرک را ارائه می‌دهند که تصویر آن به صورت زیر است:

نمایی از منوهای کشویی گیت هاب همراه با سورس کد آن ها
برای مشاهده تصویر در ابعاد بزرگ روی آن کلیک کنید.

برای دستیابی به هدف بالا باید در کلاس dropdown که قبلاً تعریف شده بود، نوعی ویژگی visibility را روی hidden و نوعی ویژگی opacity  را که روی صفر تنظیم شده‌ است، معرفی کرد. این پیکربندی پنهان‌سازی اولیه منوی کشویی را تضمین می‌کند. همچنین برای تکمیل کردن کارهای دستیابی به این هدف باید کلاسی مجزا به نام show ایجاد شود. این کلاس دارای ویژگی visibility تنظیم‌شده روی visible و ویژگی opacity تنظیم‌شده روی ۱ است. این کلاس، هنگامی که با جاوا اسکریپت اعمال و ادغام شود، منوی کشویی را در معرض دید کاربر قرار می‌دهد. قطعه کد انجام این کار به صورت زیر است:

.dropdown {
  position: absolute;
  width: ۲۵۰px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: ۰.۳rem;
  background: white;
  transition: all ۰.۱s cubic-bezier(۰.۱۶, ۱, ۰.۵, ۱);
    
  transform: translateY(۰.۵rem);
  visibility: hidden;
  opacity: ۰;
}

.show {
  transform: translateY(۰rem);
  visibility: visible;
  opacity: ۱;
}

.arrow {
  transform: rotate(۱۸۰deg);
  transition: ۰.۲s ease;
}

علاوه بر این در کد بالا، کلاسی به نام arrow برای نماد فلش معرفی شده است که چرخش ۱۸۰ درجه‌ای را با کلیک روی دکمه کشویی تسهیل می‌کند.

آموزش پروژه محور HTML و CSS – ساخت مگامنو یا منوی چند سطحی
فیلم آموزش پروژه محور HTML و CSS – ساخت مگامنو یا منوی چند سطحی در فرادرس
کلیک کنید

مرحله ۳. عملگرا کردن منوی کشویی با جاوا اسکریپت

این مرحله از ساخت منو با جاوا اسکریپت برای عمل‌گرا کردن آن، با ذخیره عناصر مربوطه در متغیرها برای قابلیت استفاده مجدد شروع خواهد شد که کد انجام این کار به صورت زیر است:

const dropdownBtn = document.getElementById("btn");
const dropdownMenu = document.getElementById("dropdown");
const toggleArrow = document.getElementById("arrow");

متعاقباً، تابعی به نام «toggleDropdown» باید ایجاد شود که مسئول تغییر کلاس show در عنصر کشویی و چرخش فلش کشویی با کلیک روی دکمه است که کد آن به صورت زیر خواهد بود:

const toggleDropdown = function () {
  dropdownMenu.classList.toggle("show");
  toggleArrow.classList.toggle("arrow");
};

این تابع را باید با استفاده از «متد AddEventListener» در دکمه dropdown فراخوانی کرد. این کار تضمین می‌کند که کلیک کردن روی دکمه عملکرد را فعال کرده، نمایشگر را مدیریت می‌کند و منوی کشویی را پنهان خواهد کرد که قطعه کد انجام این کار به صورت زیر است:

dropdownBtn.addEventListener("click", function (e) {
  e.stopPropagation();
  toggleDropdown();
});

همچنین در ساخت منوی بالا باید به گنجاندن stopPropagation() در داخل تابع dropdown توجه کرد. این متد از انتشار تابع عنصر دکمه به عنصر والد جلوگیری کرده و در نتیجه از اجرای دوباره تابع جلوگیری می‌کند. خروجی منوی جاوا اسکریپتی ما در این مرحله به صورت زیر است:

یک منوی ساخته شده با جاوا اسکریپی، اچ تی ام ال و سی اس اس

نحوه بستن منوی کشویی هنگام کلیک روی عنصر DOM

در ساخت منو با جاوا اسکریپت بستن منوهای کشویی معمولاً شامل چهار سناریوی زیر است:

  • با کلیک بر روی دکمه‌ای که آن را فعال می‌کند
  • با کلیک روی هر یک از عناصر فرزند آن
  • کلیک کردن در خارج از منو (روی بدنه)
  • کلید جهت‌دار پایین صفحه‌کلید یا کلید اسکیپ (Escape)

در این مطلب، ما بر روی سه سناریو اول تمرکز خواهیم کرد که کار با انتخاب عنصر ریشه « html » با استفاده از « document.documentElement » شروع می‌شود. مانند قبل، تابع toggleDropdown() باید وارد شود. با این حال، این بار، شرطی را برای بررسی اینکه آیا منوی کشویی شامل کلاس show است یا خیر، باید معرفی کنیم. فقط زمانی که این شرط برآورده شود باید تابع بستن فعال شود که قطعه کد انجام این کار به صورت زیر است:

document.documentElement.addEventListener("click", function () {
  if (dropdownMenu.classList.contains("show")) {
    toggleDropdown();
  }
});

با اجرای شنونده رویداد بالا، کلیک کردن در خارج از منوی کشویی روی بدنه، آن را می‌بندد، تعامل کاربر را بهبود می‌بخشد و تجربه یکپارچه را تضمین می‌کند که خروجی نهایی به صورت زیر خواهد بود:

یک منوی جاوا اسکریپت کشویی که هنگام کلیک بر روی بدنه محتوا منو بسته میشود.

قطعه کد کامل ساخت منو با جاوا اسکریپت از نوع کشویی

قطعه کد کامل ساخت منوی کشویی با جاوا اسکریپت در زیر قرار داده شده که قطعه کد HTML این منوی جذاب به صورت زیر است:

<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />

<div class="container">
  <button class="btn" id="btn">
    Dropdown
    <i class="bx bx-chevron-down" id="arrow"></i>
  </button>

  <div class="dropdown" id="dropdown">
    <a href="#create">
      <i class="bx bx-plus-circle"></i>
      Create New
    </a>
    <a href="#draft">
      <i class="bx bx-book"></i>
      All Drafts
    </a>
    <a href="#move">
      <i class="bx bx-folder"></i>
      Move To
    </a>
    <a href="#profile">
      <i class="bx bx-user"></i>
      Profile Settings
    </a>
    <a href="#notification">
      <i class="bx bx-bell"></i>
      Notification
    </a>
    <a href="#settings">
      <i class="bx bx-cog"></i>
      Settings
    </a>
  </div>
</div>

همچنین قطعه کد CSS کلی منوی ساخته شده به صورت زیر است:

@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);

* {
  margin: ۰;
  padding: ۰;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  --shadow: rgba(۰, ۰, ۰, ۰.۰۵) ۰px ۶px ۱۰px ۰px,
    rgba(۰, ۰, ۰, ۰.۱) ۰px ۰px ۰px ۱px;
  --color: #166e67;
  --gap: ۰.۵rem;
  --radius: ۵px;
}

body {
  margin: ۲rem;
  background-color: #b3e6f4;
  font-size: ۰.۹rem;
  color: black;
}

.btn {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--gap);
  padding: ۰.۶rem;
  cursor: pointer;
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow);
  position: relative;
}

.bx {
  font-size: ۱.۱rem;
}

.dropdown {
  position: absolute;
  width: ۲۵۰px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: ۰.۳rem;
  background: white;

  visibility: hidden;
  opacity: ۰;
  transform: translateY(۰.۵rem);
  transition: all ۰.۱s cubic-bezier(۰.۱۶, ۱, ۰.۵, ۱);
}

.dropdown a {
  display: flex;
  align-items: center;
  column-gap: var(--gap);
  padding: ۰.۸rem ۱rem;
  text-decoration: none;
  color: black;
}

.dropdown a:hover {
  background-color: var(--color);
  color: white;
}

.show {
  visibility: visible;
  opacity: ۱;
  transform: translateY(۰rem);
}

.arrow {
  transform: rotate(۱۸۰deg);
  transition: ۰.۲s ease;
}

و در نهایت قطعه کد کامل جاوا اسکریپت منویی که در بالا ساختیم به صورت زیر است:

const dropdownBtn = document.getElementById("btn");
const dropdownMenu = document.getElementById("dropdown");
const toggleArrow = document.getElementById("arrow");

// Toggle dropdown function
const toggleDropdown = function () {
  dropdownMenu.classList.toggle("show");
  toggleArrow.classList.toggle("arrow");
};

// Toggle dropdown open/close when dropdown button is clicked
dropdownBtn.addEventListener("click", function (e) {
  e.stopPropagation();
  toggleDropdown();
});

// Close dropdown when dom element is clicked
document.documentElement.addEventListener("click", function () {
  if (dropdownMenu.classList.contains("show")) {
    toggleDropdown();
  }
});

۱۰ منوی نمونه ساخته شده با جاوا اسکریپت، HTML و CSS

در این بخش به عنوان نوعی تمرین جاوا اسکریپت ۱۰ نمونه منوی ساخته شده با جاوا اسکریپت، HTML و CSS ارائه خواهد شد. کاربران می‌توانند از منوهای ارائه شده ایده گرفته و آن را در پروژه‌های طراحی سایت و توسعه وب خود به کار بگیرند.

آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا
فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس
کلیک کنید

۱. منوی جاوا اسکریپت شیب صفحه

قطعه کد HTML منوی جاوا اسکریپت شیب صفحه به صورت زیر است:

<div id="paper-back">
  <nav>
    <div class="close"></div>
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Our Work</a>
    <a href="#">Contact</a>
  </nav>
</div>
<div id="paper-window">
  <div id="paper-front">
    <div class="hamburger"><span></span></div>
    <div id="container">
      <section>
        <h1>Page Tilt Menu Effect</h1>
        <p>Click the hamburger icon to see it in action</p>
      </section>
      <section></section>
      <section></section>
      <section></section>
    </div>
  </div>
</div>

همچنین قطعه کد CSS این پروژه جاوا اسکریپت به صورت زیر است:

body {
  font-family: "Architects Daughter", sans-serif;
}

#paper-back {
  width: ۱۰۰%;
  height: ۱۰۰vh;
  background-color: #۲۴۳۰۴۰;
  position: fixed;
  top: ۰;
  left: ۰;
  font-size: ۳۳px;
}
#paper-back nav {
  padding: ۱۲۰px ۳۴px;
}
#paper-back nav a {
  display: block;
  margin-bottom: ۲۵px;
  text-decoration: none;
  color: rgba(۲۵۵, ۲۵۵, ۲۵۵, ۰.۷);
}

#paper-window {
  height: ۱۰۰vh;
  width: ۱۰۰vw;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: ۲;
}
#paper-window.tilt {
  overflow: hidden;
  pointer-events: none;
}
#paper-window.tilt #paper-front {
  transform: rotate(۱۰deg) translateZ(۰);
}

#paper-front {
  pointer-events: auto;
  position: relative;
  z-index: ۳;
  background-color: white;
  box-shadow: ۰ ۰ ۲۰px rgba(۰, ۰, ۰, ۰.۷);
  transform-origin: center ۷۰%;
  transition: all ۰.۳s ease;
}

#container section {
  height: ۶۰۰px;
  text-align: center;
}
#container section:first-of-type {
  padding-top: ۱۰vh;
}
#container section:first-of-type h1 {
  font-size: ۴۵px;
}
#container section:first-of-type p {
  font-size: ۲۵px;
}
@media (max-width: ۶۰۰px) {
  #container section:first-of-type {
    padding-top: ۱۵vh;
  }
  #container section:first-of-type h1 {
    font-size: ۳۰px;
  }
  #container section:first-of-type p {
    font-size: ۱۸px;
  }
}
#container section:nth-of-type(2n) {
  background-color: #edf1f5;
}

.hamburger {
  position: fixed;
  z-index: ۴;
  top: ۳۰px;
  left: ۳۰px;
  width: ۴۵px;
  height: ۳۴px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.hamburger span {
  position: relative;
}
.hamburger span, .hamburger span:before, .hamburger span:after {
  display: block;
  width: ۴۵px;
  height: ۶px;
  background-color: #۲۴۳۰۴۰;
  border-radius: ۲px;
}
.hamburger span:before, .hamburger span:after {
  content: "";
  position: absolute;
}
.hamburger span:before {
  bottom: -۱۴px;
}
.hamburger span:after {
  bottom: -۲۸px;
}

.close {
  position: fixed;
  top: ۳۰px;
  left: ۳۰px;
  width: ۴۵px;
  height: ۳۴px;
  cursor: pointer;
}
.close:before, .close:after {
  content: "";
  position: absolute;
  display: block;
  width: ۴۵px;
  height: ۶px;
  top: ۵۰%;
  background-color: white;
  border-radius: ۲px;
}
.close:before {
  transform: translateY(-۵۰%) rotate(۴۵deg);
}
.close:after {
  transform: translateY(-۵۰%) rotate(-۴۵deg);
}

قطعه کد جاوا اسکریپت این منو هم به صورت زیر است:

var paperMenu = {
  $window: $('#paper-window'),
  $paperFront: $('#paper-front'),
  $hamburger: $('.hamburger'),
  offset: ۱۸۰۰,
  pageHeight: $('#paper-front').outerHeight(),
  
  open: function() {
    this.$window.addClass('tilt');
    this.$hamburger.off('click');
    $('#container, .hamburger').on('click', this.close.bind(this));
    this.hamburgerFix(true);
    console.log('opening...');
  },
  close: function() {
    this.$window.removeClass('tilt'); 
    $('#container, .hamburger').off('click');
    this.$hamburger.on('click', this.open.bind(this));
    this.hamburgerFix(false);
    console.log('closing...');
  },
  updateTransformOrigin: function() {
    scrollTop = this.$window.scrollTop();
    equation = (scrollTop + this.offset) / this.pageHeight * ۱۰۰;
    this.$paperFront.css('transform-origin', 'center ' + equation + '%');
  },
  //hamburger icon fix to keep its position
  hamburgerFix: function(opening) {
      if(opening) {
        $('.hamburger').css({
          position: 'absolute',
          top: this.$window.scrollTop() + ۳۰ + 'px'
        });
      } else {
        setTimeout(function() {
          $('.hamburger').css({
            position: 'fixed',
            top: '30px'
          });
        }, ۳۰۰);
      }
    },
  bindEvents: function() {
    this.$hamburger.on('click', this.open.bind(this));
    $('.close').on('click', this.close.bind(this));
    this.$window.on('scroll', this.updateTransformOrigin.bind(this));
  },
  init: function() {
    this.bindEvents();
    this.updateTransformOrigin();
  },
};

paperMenu.init()

خروجی منوی بالا به صورت زیر است:

منوی جذاب ساخته شده با جاوا اسکریپت و HTML و CSS

در منوی ارائه‌شده بالا نوعی افکت شیب صفحه متمایز برای نشان دادن منوی سمت چپ استفاده می‌شود. با کلیک بر روی نماد همبرگر، منو به زیبایی فعال شده و باعث می‌شود کل بدنه اصلی با شیبی ظریف به سمت راست تغییر کند. با باز کردن منوی بالا نوعی انیمیشن یکپارچه باز می‌شود و تجربه بصری منحصربه‌فرد را ارائه می‌دهد. منو دارای دکمه بستن مخصوص به خود بوده و این در حالی است که نماد همبرگر به‌راحتی از نمای بالای صفحه خارج می‌شود و به طراحی زیبا و کاربرپسند کمک می‌کند.

۲. نمونه منوی کشویی جاوا اسکریپت

این مثال هم از ساخت منو با جاوا اسکریپت همانند مثال اولی که مراحل ساخت آن را پیش رفتیم از نوع کشویی بوده که قطعه کد HTML آن به صورت زیر است:

<div class="flexDiv">
  <button class="sec_btn" onclick="openMulti();">Add to feature vector</button>
  <div class="selectWrapper">
    <div class="multiSelect" id="menu-0">
      <div class="bottomBorder">New feature vector</div>
      <div onclick="openMulti();">Vector_01</div>
      <div onclick="openMulti();">myVector</div>
      <div onclick="openMulti();">featureVector</div>
      <div class="topBorder iconDiv" onclick="nextMenu(event);">Other projects<i class="material-icons">arrow_right</i></div>
    </div>
    <div class="multiSelect" id="menu-1">
      <div class="bottomBorder iconDiv noSpace narrow placeholder"><i class="material-icons">search</i>Search</div>
      <div class="iconDiv justHover" onclick="nextMenu(event);">Project Example<i class="material-icons">arrow_right</i></div>
      <div class="iconDiv justHover" onclick="nextMenu(event);">David’s project<i class="material-icons">arrow_right</i></div>
      <div class="iconDiv justHover" onclick="nextMenu(event);">Project Idan<i class="material-icons">arrow_right</i></div>
      <div class="iconDiv justHover" onclick="nextMenu(event);">Manhattan<i class="material-icons">arrow_right</i></div>
      <div class="topBorder iconDiv noSpace" onclick="prevMenu(event);"><i class="material-icons">arrow_back</i>Back</div>
    </div>
    <div class="multiSelect" id="menu-2">
      <div class="bottomBorder titleDiv">Project Idan</div>
      <div onclick="openMulti();">Idan Vector</div>
      <div onclick="openMulti();">Testings</div>
      <div onclick="openMulti();">Features_120</div>
      <div onclick="openMulti();">Aggregators</div>
      <div id="menu-1" class="topBorder iconDiv noSpace" onclick="prevMenu(event);"><i class="material-icons">arrow_back</i>Back</div>
    </div>
    <div>
    </div>

همچنین قطعه کد CSS این مثال به صورت زیر است:

:root {
  --bgColor: #0fddaf;
  --txtColor: #ffffff;
  --borColor: rgba(۰, ۰, ۰, ۰);
  --sizeVar: ۸px;
  --textPrimary: #4b4760;
  --textSecondary: #7f7989;
  --borderColor: #cccccc;
}
body {
  font-family: "Roboto", sans-serif;
  font-weight: ۴۰۰;
  font-size: calc(var(--sizeVar) * ۱.۷۵);
}
.flexDiv {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  margin: ۳۲px;
}
.selectWrapper {
  width: ۱۰۰%;
  position: relative;
  opacity: ۰;
  pointer-events: none;
  transition: opacity ۱۰۰ms linear ۰s;
  filter: drop-shadow(۰ ۶px ۲۶px rgba(۰, ۰, ۰, ۰.۲۴));
  padding-top: calc(var(--sizeVar) / ۲);
}
.multiSelect {
  clip-path: polygon(۰ ۰, ۱۰۰% ۰, ۱۰۰% ۱۰۰%, ۰% ۱۰۰%);
  border: ۱px solid var(--borderColor);
  box-sizing: border-box;
  border-radius: calc(var(--sizeVar) / ۲);
  position: absolute;
  width: auto;
  left: ۰;
  right: ۰;
  overflow: hidden;
  background: #ffffff;
  transition: transform ۳۰۰ms ease-in-out ۰s, clip-path ۳۰۰ms ease-in-out ۰s;
}
.multiSelect div {
  color: var(--textPrimary);
  padding: ۱۶px;
  width: auto;
  cursor: pointer;
}
.multiSelect div:hover {
  background-color: #f6f6f6;
}
.bottomBorder {
  border-bottom: ۱px solid var(--borderColor);
}
.topBorder {
  border-top: ۱px solid var(--borderColor);
}
.iconDiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.noSpace {
  justify-content: flex-start;
  gap: ۶px;
}
.titleDiv {
  pointer-events: none;
  font-weight: ۷۰۰;
}
.justHover i {
  opacity: ۰;
}
.justHover:hover i {
  opacity: ۱;
}
.multiSelect .placeholder {
  color: var(--textSecondary);
  font-style: italic;
}
.multiSelect .narrow {
  padding-top: ۱۰px;
  padding-bottom: ۱۰px;
}
.multiSelect i {
  color: var(--textSecondary);
}
.multiSelect {
  transform: translateX(۱۰۰%);
  clip-path: polygon(۰ ۰, ۰ ۰, ۰ ۱۰۰%, ۰% ۱۰۰%);
}
.multiSelect:nth-of-type(۱) {
  transform: translateX(۰);
  clip-path: polygon(۰ ۰, ۱۰۰% ۰, ۱۰۰% ۱۰۰%, ۰% ۱۰۰%);
}
.sec_btn {
  --bgColor: #869cff;
}
button {
  font-family: "Roboto", sans-serif;
  font-size: calc(var(--sizeVar) * ۱.۷۵);
  font-weight: ۵۰۰;
  border: none;
  outline: none;
  padding: var(--sizeVar) calc(var(--sizeVar) * ۲);
  border-radius: calc(var(--sizeVar) / ۲);
  cursor: pointer;
  background-color: var(--bgColor);
  color: var(--txtColor);
  box-shadow: ۰ ۰ ۰ ۱px var(--borColor) inset;
}
button:focus {
  --borColor: rgba(۰, ۰, ۰, ۰.۴);
}
button:hover {
  --bgColor: #1fcc9e;
}
.sec_btn:hover {
  --bgColor: #6279e7;
}
.tri_btn:hover {
  --bgColor: #f8f7f8;
}
button:active {
  --bgColor: #1db284;
}
.sec_btn:active {
  --bgColor: #5468c7;
}
.tri_btn:active {
  --bgColor: #e7e7e7;
}

قطعه کد جاوا اسکریپت کد بالا هم به صورت زیر است:

function openMulti() {
  if (document.querySelector(".selectWrapper").style.pointerEvents == "all") {
    document.querySelector(".selectWrapper").style.opacity = ۰;
    document.querySelector(".selectWrapper").style.pointerEvents = "none";
    resetAllMenus();
  } else {
    document.querySelector(".selectWrapper").style.opacity = ۱;
    document.querySelector(".selectWrapper").style.pointerEvents = "all";
  }
}
function nextMenu(e) {
  menuIndex = eval(event.target.parentNode.id.slice(-۱));
  document.querySelectorAll(".multiSelect")[menuIndex].style.transform =
    "translateX(-100%)";
  // document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)";
  document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath =
    "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)";
  document.querySelectorAll(".multiSelect")[menuIndex + ۱].style.transform =
    "translateX(0)";
  document.querySelectorAll(".multiSelect")[menuIndex + ۱].style.clipPath =
    "polygon(0 0, 100% 0, 100% 100%, 0% 100%)";
}
function prevMenu(e) {
  menuIndex = eval(event.target.parentNode.id.slice(-۱));
  document.querySelectorAll(".multiSelect")[menuIndex].style.transform =
    "translateX(100%)";
  document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath =
    "polygon(0 0, 0 0, 0 100%, 0% 100%)";
  document.querySelectorAll(".multiSelect")[menuIndex - ۱].style.transform =
    "translateX(0)";
  document.querySelectorAll(".multiSelect")[menuIndex - ۱].style.clipPath =
    "polygon(0 0, 100% 0, 100% 100%, 0% 100%)";
}
function resetAllMenus() {
  setTimeout(function () {
    var x = document.getElementsByClassName("multiSelect");
    var i;
    for (i = ۱; i < x.length; i++) {
      x[i].style.transform = "translateX(100%)";
      x[i].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)";
    }
    document.querySelectorAll(".multiSelect")[۰].style.transform =
      "translateX(0)";
    document.querySelectorAll(".multiSelect")[۰].style.clipPath =
      "polygon(0 0, 100% 0, 100% 100%, 0% 100%)";
  }, ۳۰۰);
}

خروجی کدهای بالا برای ساخت منوی کشویی به صورت زیر است:

منوی کشویی جاوا اسکریپت ساخته‌شده بالا به‌عنوان نوعی برنامه افزودنی همه‌کاره و قابل انطباق برای هر رابط کاربری و طراحی عمل می‌کند. برخلاف منوهای کشویی معمولی با یک سطح، این منو انعطاف‌پذیری چندین لایه را ارائه می‌دهد. کاربران می‌توانند یک زیرمجموعه را انتخاب کرده و از گزینه‌های منوی اضافی بهره ببرند. علاوه بر این، گزینه راحت «بازگشت» (Back)، در منوی بالا پیمایش یکپارچه را به سطح قبلی تسهیل می‌کند. همچنین پیاده‌سازی CSS در منوی بالا شامل متغیرهایی است که به‌راحتی قابل‌تغییر هستند که این کار امکان سفارشی‌سازی بدون زحمت استایل منو را برای مطابقت با ترجیحات طراحی خاص فراهم می‌کند.

آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript
فیلم آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript در فرادرس
کلیک کنید

۳. منوی متحرک زاویه دار

منوی بعدی، منوی متحرک زاویه‌داری است. قطعه کد HTML این منوی جذابه به صورت زیر خواهد بود:

<nav class="navigation-menu js-nav-menu">
  <div class="navigation-menu__toggle js-nav-menu-toggle">
    <span class="navigation-menu__bars"></span>
  </div>
  <ul class="menu-list">
    <li class="menu-list__item">Menu Item 1</li>
    <li class="menu-list__item">Menu Item 2</li>
    <li class="menu-list__item">Menu Item 3</li>
    <li class="menu-list__item">Menu Item 4</li>
    <li class="menu-list__item">Menu Item 5</li>
  </ul>
</nav>

همچنین قطعه کد CSS آن به صورت زیر است:

@import url(https://fonts.googleapis.com/css?family=Lato:400);

$body-color: #fff;
$menu-background-color: #4E567E;
$menu-icons-color: #fff;
$font-stack: 'Lato', sans-serif;

* {
  box-sizing: border-box;
}

html {
  font-size: ۶۲.۵%;
}

body {
  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;
  background-size: cover;
  color: $body-color;
  font-family: $font-stack;
  font-size: ۲.۴rem;
  height: ۱۰۰vh;
}

%bars {
  cursor: pointer;
    border-radius: ۱px;
    height: ۲px;
    width: ۲۵px;
    background: $menu-icons-color;
    position: absolute;
    left: ۰;
    top: ۵۰%;
    display: block;
    transition: all .۳s;
}

.navigation-menu {
  background-color: transparent;
  height: ۱۰۰%;
  position: fixed;
  width: ۶۰۰px;
  transform: translateX(-۱۰۰%);
  transition: transform .۳s .۳s;
  
  &::before {
    background: $menu-background-color;
    content: '';
    height: ۴۰۰%;
    left: ۵۰%;
    position: absolute;
    top: ۰;
    transform: translate(-۵۰%, -۵۰%) rotate(۴۰deg);
    width: ۱۰۰%;
    z-index: ۰;
  }
  
  &--open {
    transform: translateX(۰);
    
    & .navigation-menu__bars {
      background-color: transparent;
      
      &::before,
      &::after {
        top: ۰;
      }
    
      &::before {
        transform: rotate(۴۵deg);
      }

      &::after {
        transform: rotate(-۴۵deg);
      }
    }
    
    .menu-list__item {
      opacity: ۱;
    }
    
    $menu-delay: ۱s;
    @for $i from ۱ through ۱۲ {
      .menu-list__item:nth-child(#{$i}) {
        transition-delay: $menu-delay;
      }
      $menu-delay: $menu-delay + .۲۵s;
    }
  }
  
  &__toggle {
    cursor: pointer;
    height: ۳۰px;
    position: absolute;
    right: -۴۰px;
    top: ۵px;
    width: ۳۰px;
  }
  
  &__bars {
    @extend %bars;

    &::before,
    &::after {
      @extend %bars;
      content: '';
    }

    &::before {
      left: ۰;
      top: -۸px;
    }

    &::after {
      left: ۰;
      top: ۸px;
    }
  }
}

.menu-list {
  padding: ۶۰px ۲۰px;
  position: relative;
  z-index: ۱۰;

  &__item {
    margin: ۴۰px ۰;
    opacity: ۰;
    transition: opacity .۵s .۵s;
  }
}

@media only screen and (max-width: ۷۰۰px) {
  .navigation-menu {
    min-width: ۲۴۰px;
    width: ۸۰%;
    
    &::before {
      width: ۱۱۰%;
    }
  }
}

@media only screen and (max-width: ۴۸۰px) {
  .navigation-menu {
    background-color: $menu-background-color;
    min-width: ۲۴۰px;
    width: ۸۰%;
    
    &::before {
      transform: translate(-۵۰%, -۵۰%) rotate(۴۵deg)
    }
  }
}

همچنین قطعه کد جاوا اسکریپت این منو به صورت زیر است:

(function($) {
  $('.js-nav-menu-toggle').on('click', function() {
    $(this).parents('.navigation-menu').toggleClass('navigation-menu--open');
  });
  
  $('html').on('click', function(e) {
    if(!$(e.target).closest('.js-nav-menu').length &&
      ($('.js-nav-menu').hasClass('navigation-menu--open'))) {
        $('.js-nav-menu').removeClass('navigation-menu--open');
    }
  });
})(jQuery);

خروجی منوی ساخته شده بالا به صورت زیر است:

منوی Animated Angled Menu ساخته شده با جاوا اسکریپت

با تغییر رنگ منو، سبک فونت و رنگ‌های پس‌زمینه با استفاده از CSS، بدون زحمت، منو را می‌توان با سایت و برندهای مختلف هماهنگ کرد. متغیرهای ارائه شده با قابلیت تغییر آسان به کاربر این امکان را می‌دهد تا زیبایی منو را شخصی‌سازی کند. همچنین ساختار HTML منوی بالا ساده و قابل‌گسترش است و امکان افزودن آسان ویژگی‌ها و امکانات دیگر را فراهم می‌کند. منوی فوق با استفاده از جاوا اسکریپت، با انیمیشن‌های روان و کلاس پویا که با رویدادهای کلیک تغییر می‌کنند، جذابیت خاصی به طراحی داده و تعامل کاربر و جذابیت بصری را افزایش می‌دهد.

مطلب پیشنهادی:

ساخت مگامنوی چند سطحی واکنش‌گرا با CSS — از صفر تا صد

۴. منوی ناوبری هدر متحرک

در این بخش از ساخت منو با جاوا اسکریپت به بررسی نمونه منوی ناوبری با هدر متحرک می‌پردازیم که قطعه کد HTML آن به صورت زیر است:

<div class="menu">
  <div class="container">
    <div class="toggle"></div>
  </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>
</div>

همچنین قطعه کد این مثال به صورت زیر است:

span:nth-of-type(۴) {
  transition-delay: ۰.۷s;
}
span.hidden {
  width: ۰;
  visibility: hidden;
  opacity: ۰;
  transform: rotateY(۹۰deg);
}
span.hidden:nth-of-type(۱) {
  transition-delay: ۰.۳s;
}
span.hidden:nth-of-type(۲) {
  transition-delay: ۰.۲s;
}
span.hidden:nth-of-type(۳) {
  transition-delay: ۰.۱s;
}
span.hidden:nth-of-type(۴) {
  transition-delay: ۰s;
}
span a {
  color: black;
  text-decoration: none;
  font-size: ۱۶.۳۶۳۶۳۶۳۶۳۶px;
  transition: ۰.۳s;
}
span a:hover {
  color: #1D90F5;
}

.container {
  position: absolute;
  top: ۲۲.۵px;
  right: calc(۱۰۰% - ۷۳.۱۲۵px);
  height: ۴۲.۷۵px;
  width: ۵۸.۵px;
  transition: ۱s;
}
.container.close {
  right: ۰;
}

.toggle {
  position: relative;
  height: ۴۲.۷۵px;
  width: ۵۸.۵px;
  cursor: pointer;
}
.toggle:after, .toggle:before {
  content: "";
  background: #1D90F5;
  width: ۳۶px;
  height: ۴.۵px;
  margin: auto;
  position: absolute;
  top: ۰;
  bottom: ۰;
  right: ۰;
  left: ۰;
  transition: ۱.۳s cubic-bezier(۰.۵۳, ۰, ۰.۱۵, ۱.۳);
}
.toggle:before {
  top: -۳۰%;
}
.toggle:after {
  top: ۳۰%;
}
.toggle.close:before {
  transform: rotate(-۲۲۵deg);
  top: ۰;
}
.toggle.close:after {
  transform: rotate(۲۲۵deg);
  top: ۰;
}

قطعه کد جاوا اسکریپت این مثال هم به صورت زیر است:

$('.toggle').on('click', function() {
  $('.menu').toggleClass('expanded');  
  $('span').toggleClass('hidden');  
  $('.container , .toggle').toggleClass('close');  
});

خروجی مثال بالا به صورت زیر است:

یک منوی هدر متحرک ساخته شده با جاوا اسکریپت، اچ تی ام ال و سی اس اس

منوهای جاوا اسکریپت به اشکال مختلفی ارائه می‌شوند و منوی بالا برای استفاده از تلفن همراه طراحی شده است که تطبیق‌پذیری آن به آن اجازه می‌دهد تا به طور یکپارچه به منوی ناوبری هدر اصلی تبدیل شود. کاربران می‌توانند این طراحی را در وب‌سایت خود پیاده کرده و وب‌سایت خود را جذاب و کاربرپسند کنند. همچنین منوی قابل تطبیق بالا به کاربر این امکان را می‌دهد تا ناوبری وب‌سایت خود را مطابق با طراحی منحصربه‌فرد و نیازهای عملکردی خود شکل دهد.

۵. منوی حبابی در جاوا اسکریپت

این مثال از ساخت منو با جاوا اسکریپت از نوع منوی حبابی بوده که بسیار منوی جذابی است.

آموزش جاوا اسکریپت JavaScript
فیلم آموزش جاوا اسکریپت JavaScript در فرادرس
کلیک کنید

قطعه کد HTML این مثال به صورت زیر است:

<body>

<nav id="nav">
  <div class="bubble_all" id="icon">
    <button class="va_menu_icon va_menu_icon-X">
      <span></span>
    </button>

  </div>
  <div class="bubble" id="one">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="۱.۱" id="Capa_1" x="0px" y="0px" viewBox="۰ ۰ ۴۹۲.۰۱۴ ۴۹۲.۰۱۴" style="enable-background:new ۰ ۰ ۴۹۲.۰۱۴ ۴۹۲.۰۱۴;" xml:space="preserve" width="40px" height="40px">
<g id="XMLID_144_">
  <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="#۱۱۱۱۱۱"/>
  <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="#۱۱۱۱۱۱"/>
  <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="#۱۱۱۱۱۱"/>
  <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="#۱۱۱۱۱۱"/>
  <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="#۱۱۱۱۱۱"/>
  <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="#۱۱۱۱۱۱"/>
  <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="#۱۱۱۱۱۱"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
    <h3>About</h3>
  </div>
  <div class="bubble" id="two">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="۱.۱" viewBox="۰ ۰ ۵۱۲ ۵۱۲" enable-background="new 0 0 512 512" width="40px" height="40px">
      <g>
        <g>
          <path d="M11,501h117.8V301.9H11V501z M31.9,321.7H108v158.5H31.9V321.7z" fill="#۱۱۱۱۱۱"/>
          <path d="M197.6,501h116.8h1V220.6H197.6V501z M217.4,240.4h76.1v239.8h-76.1V240.4z" fill="#۱۱۱۱۱۱"/>
          <path d="M383.2,11v490H501V11H383.2z M480.1,480.1H404V31.9h76.1V480.1z" fill="#۱۱۱۱۱۱"/>
        </g>
      </g>
    </svg>
    <h3>Skills</h3>
  </div>
  <div class="bubble" id="three">
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="۱.۱" id="Layer_1" x="0px" y="0px" viewBox="۰ ۰ ۳۰۷.۱۱۶ ۳۰۷.۱۱۶" style="enable-background:new ۰ ۰ ۳۰۷.۱۱۶ ۳۰۷.۱۱۶;" xml:space="preserve" width="40px" height="40px">
<g>
  <g>
    <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="#۱۱۱۱۱۱"/>
  </g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

    <h3>Projects</h3>
  </div>
  <div class="bubble" id="four">
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="۱.۱" id="Layer_1" x="0px" y="0px" viewBox="۰ ۰ ۴۸۴.۸۴۹ ۴۸۴.۸۴۹" style="enable-background:new ۰ ۰ ۴۸۴.۸۴۹ ۴۸۴.۸۴۹;" xml:space="preserve" width="40px" height="40px">
<g>
  <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="#۱۱۱۱۱۱"/>
  <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="#۱۱۱۱۱۱"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

    <h3>Contact</h3>
  </div>
</nav>

<section class="start">
  <div class="content">
    <h1>PenFolio</h1>
  </div>
</section>
<section class="first">
  <div class="content">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</section>
<section class="second">
  <div class="content">
    <h2>Skills</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</section>
<section class="third">
  <div class="content">
    <h2>Projects</h2>
    <p>Lorem ipsum dolor sit amet..</p>
  </div>
</section>
<section class="fourth">
  <div class="content">
    <h2>Contact</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</section>

</body>

قطعه کد CSS منوی حبابی مد نظر هم به صورت زیر است:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
* {
    margin: ۰;
    padding: ۰;
}
body {
    overflow: hidden;
}
::-webkit-scrollbar {
    display: none;
}
.va_menu_icon {
    display: block;
    position: absolute;
    overflow: hidden;
    margin: ۰;
    padding: ۰;
    width: ۴۵px;
    height: ۴۵px;
    font-size: ۰;
    text-indent: -۹۹۹۹px;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    transition: background ۰.۳s;
    top: ۵۷%;
    left: ۵۰%;
    transform: translate(-۵۰%, -۵۰%);
    background-color: transparent;
    z-index: ۹۹;
}

.va_menu_icon:focus {
    outline: none;
}

.va_menu_icon span {
    display: block;
    position: absolute;
    top: ۱۵px;
    left: ۰;
    right: ۰;
    height: ۷px;
    background: #fff;
}

.va_menu_icon span:before, .va_menu_icon span:after {
    position: absolute;
    display: block;
    left: ۰;
    width: ۱۰۰%;
    height: ۷px;
    background-color: #fff;
    content: "";
}

.va_menu_icon span:before {
    top: -۱۴px;
}

.va_menu_icon span:after {
    bottom: -۱۴px;
}

.va_menu_icon-X span {
    transition: background ۰s ۰.۳s;
}

.va_menu_icon-X span:before, .va_menu_icon-X span:after {
    transition-duration: ۰.۳s, ۰.۳s;
    transition-delay: ۰.۳s, ۰s;
}

.va_menu_icon-X span:before {
    transition-property: top, transform;
}

.va_menu_icon-X span:after {
    transition-property: bottom, transform;
}

.va_menu_icon-X.is-active span {
    background: none;
}

.va_menu_icon-X.is-active span:before {
    top: ۰;
    transform: rotate(۴۵deg);
}

.va_menu_icon-X.is-active span:after {
    bottom: ۰;
    transform: rotate(-۴۵deg);
}

.va_menu_icon-X.is-active span:before, .va_menu_icon-X.is-active span:after {
    transition-delay: ۰s, ۰.۳s;
}
nav {
    position: absolute;
    top: ۱۰۰px;
    left: ۱۰۰px;
    transform: translate(-۵۰%, -۵۰%);
    border-radius: ۵۰%;
    width: ۷۵px;
    height: ۷۵px;
    z-index: ۴;
}
.bubble_all {
    position: absolute;
    top: ۵۰%;
    left: ۵۰%;
    transform: translate(-۵۰%, -۵۰%);
    background-color: #FD898A;
    border-radius: ۵۰%;
    width: ۷۵px;
    height: ۷۵px;
    z-index: ۴;
}
#one, #two, #three, #four {
    position: absolute;
    top: ۵۰%;
    left: ۵۰%;
    transform: translate(-۵۰%, -۵۰%);
    border-radius: ۵۰%;
    width: ۶۵px;
    height: ۶۵px;
    z-index: ۳;
    box-shadow: ۰ ۰ ۲۰px -۵px #۱۱۱;
    text-align: center;
}
.bubble svg:hover ~ h3 {
     opacity: ۱;
}
.bubble h3 {
    opacity: ۰;
    transition: all ۴۰۰ms;
    -webkit-transition: all ۶۰۰ms;
}
#one {
    background-color: #FDEECF;
}
#one svg {
    width: ۴۰px;
    margin-top: ۱۲px;
}
#one>h3 {
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-size: ۱۶px;
    color: #۱۱۱۱۱۱;
    top: ۵۰%;
    left: ۷۵px;
    transform: translateY(-۵۰%);
}
#two {
    background-color: #FDD0BC;
}
#two svg {
    width: ۴۰px;
    margin-top: ۱۲px;
}
#two>h3 {
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-size: ۱۶px;
    color: #۱۱۱۱۱۱;
    top: ۷۵px;
    left: ۵۰%;
    transform: translateX(-۵۰%);
}
#three {
    background-color: #EDB4B5;
}
#three svg {
    width: ۴۰px;
    margin-top: ۱۴px;
}
#three>h3 {
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-size: ۱۶px;
    color: #۱۱۱۱۱۱;
    top: ۵۰%;
    left: -۷۵px;
    transform: translateY(-۵۰%);
}
#four {
    background-color: #CB86A0;
}
#four svg {
    width: ۴۰px;
    margin-top: ۱۲px;
}
#four>h3 {
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-size: ۱۶px;
    color: #۱۱۱۱۱۱;
    top: -۳۰px;
    left: ۵۰%;
    transform: translateX(-۵۰%);
}
section {
    width: ۱۰۰vw;
    height: ۱۰۰vh;
    position: absolute;
}
.start {
    top: ۰;
    left: ۰;
    background-color: #۴۴۵۳۶۹;
    text-align: center;
}
.first {
    left: ۱۰۰vw;
    top: ۰;
    background-color: #FDEECF;
}
.second {
    left: ۰;
    top: ۱۰۰vh;
    background-color: #FDD0BC;
}
.third {
    left: -۱۰۰vw;
    top: ۰;
    background-color: #EDB4B5;
}
.fourth {
    left: ۰;
    top: -۱۰۰vh;
    background-color: #CB86A0;
}
section:first-child.content {
    width: ۱۰۰%;
    height: ۱۰۰vh;
    opacity: ۱;
}
.content {
    width: ۷۰%;
    height: ۱۰۰vh;
    opacity: ۱;
    margin: ۰ auto;
    overflow-y: scroll;
}
.start h1 {
    font-family: 'Roboto', sans-serif;
    font-size: ۴۰px;
    line-height: ۱۰۰vh;
    color: #۱۱۱۱۱۱;
}
h2 {
    font-family: 'Roboto', sans-serif;
    font-size: ۴۰px;
    color: #۱۱۱۱۱۱;
    margin-top: ۲۰۰px;
}
.content p {
    font-family: 'Roboto', sans-serif;
    font-size: ۲۰px;
    line-height: ۱.۳;
    color: #۱۱۱۱۱۱;
    margin: ۵۰px ۱۰px;
}

و در نهایت قطعه کد جاوا اسکریپت آن به صورت زیر است:

var isTop = true;
  var menuIsOpen = false;

  var menuIcon = $('.va_menu_icon');

  var one = $('#one');
  var two = $('#two');
  var three = $('#three');
  var four = $('#four');

  menuIcon.click(function() {
    if (isTop === true) {
      $('#nav').animate({ top: '۵۰%', left: '۵۰%' }, ۴۰۰);
      $('.content').animate({ opacity: '۰' }, ۷۰۰);
      showBubbles();
      isTop = false;
    } else {
      if (menuIsOpen === false) {
        showBubbles();
      } else {
        hideBubbles();
      }
    }
  });

  function showBubbles() {
    menuIcon.addClass('is-active');

    one.animate({ opacity: '۱' }, ۱۰);
    two.animate({ opacity: '۱' }, ۱۰);
    three.animate({ opacity: '۱' }, ۱۰);
    four.animate({ opacity: '۱' }, ۱۰);

    one.animate({ left: '140px' }, ۱۱۰);
    two.animate({ top: '140px' }, ۲۰۰);
    one.animate({ left: '130px' }, ۱۰۰);
    three.animate({ left: '-65px' }, ۳۰۰);
    two.animate({ top: '130px' }, ۲۱۰);
    four.animate({ top: '-65px' }, ۴۰۰);
    three.animate({ left: '-55px' }, ۳۱۰);
    four.animate({ top: '-55px' }, ۴۰۰);

    menuIsOpen = true;
  }

  function hideBubbles() {
    menuIcon.removeClass('is-active');

    setTimeout(function() {
      $('#nav').animate({ top: '100px', left: '100px' }, ۴۰۰);
      $('.content').animate({ opacity: '۱' }, ۹۰۰);
    }, ۵۰۰);
    four.animate({ top: '-65px' }, ۴۰۰);
    three.animate({ left: '-65px' }, ۳۰۰);
    four.animate({ top: '۵۰%' }, ۴۰۰);
    two.animate({ top: '140px' }, ۲۰۰);
    three.animate({ left: '۵۰%' }, ۳۱۰);
    one.animate({ left: '140px' }, ۱۱۰);
    two.animate({ top: '۵۰%' }, ۲۰۰);
    one.animate({ left: '۵۰%' }, ۱۱۰);

    menuIsOpen = false;
    isTop = true
  }

  $('.bubble').click(function() {
    menuIcon.removeClass('is-active');
    hideBubbles();
    setTimeout(function() {
      $('#nav').animate({ top: '100px', left: '100px' }, ۴۰۰);
    }, ۵۰۰);
    isTop = true;
  });

  one.click(function() {
    moveToPage('۰', '100vw', '-100vw', '-100vw');
  });

  two.click(function() {
    moveToPage('100vw', '۰', '-100vw', '-100vw');
  });

  three.click(function() {
    moveToPage('100vw', '100vw', '۰', '-100vw');
  });

  four.click(function() {
    moveToPage('100vw', '100vw', '-100vw', '۰');
  });

  function moveToPage(firstLeft, secondTop, thirdLeft, fourthTop) {
    $('.first').animate({ left: firstLeft }, ۴۰۰);
    $('.second').animate({ top: secondTop }, ۴۰۰);
    $('.third').animate({ left: thirdLeft }, ۴۰۰);
    $('.fourth').animate({ top: fourthTop }, ۴۰۰);

    isTop = true;
  }

خروجی منوی ساخته شده بالا به صورت زیر است:

منوی حبابی ساخته شده با جاوا اسکریپت

منوی پویا و تعاملی جاوا اسکریپت بالا تجربه کاربری صفحات را بسیار بالا می‌برد. با کلیک کردن روی نماد منو، اسلایدی یکپارچه با چهار گزینه ارائه می‌شود و کاربر می‌تواند بدون نیاز به پیمایش به بخش‌های مختلفی از سایت سر بزند. پس از انتخاب آیتم منو، انتقالی روان مانند برنامه‌های تک‌صفحه‌ای آغاز می‌شود. در مثال بالا نماد منو ثابت باقی می‌ماند و به راحتی به بخش‌های دیگر قابلیت پیمایش وجود دارد. انیمیشن‌های منوی بالا هم در بسیار روان هستند و به طرز ماهرانه‌ای یکپارچه‌ شده‌اند که تجربه کلی کاربر را بهبود می‌بخشند.

۶. منوی ناوبری

این مثال از ساخت منو با جاوا اسکریپت مربوط به نوعی منوی پیمایشی بوده که قطعه کد HTML آن به صورت زیر است:

<nav>
  <div class="logo">
      <h4>Navbar</h4>
  </div>
  <ul class="nav-links"> 
      <a href="#">Home</a>
      <a href="#">About</a> 
      <a href="#">Contact</a>
     <a href="#">Blog</a> 

  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>

همچنین قطعه کد CSS این پروژه ساخت منو با Javascript به صورت زیر است:

body{
  margin: ۰;
  padding: ۰;
  font-family: sans-serif;
  overflow: hidden;
  background: #۱۱۱;
}
div{
  box-sizing: border-box;
}
nav{
  background: #۳۳۳;
  display: flex;
  justify-content:space-around;
  align-items: center;
  color: #fff;
}
.nav-links {
    display: flex;
    justify-content:space-around;
    width: ۵۰%;
    text-transform: uppercase;
}
.nav-links a{
  display: block;
   text-transform: uppercase;
   text-decoration: none;
   color: #fff;
  border-bottom:۲px solid transparent;
  transition:۰.۵s ease;
  transform: translateX(۰%);
}
.nav-links a:hover{
  color:#38b8ff;
  letter-spacing: ۵px;
}
.burger{
  display: none;
}
.burger div{
  width: ۲۵px;
  height: ۳px;
  background: #fff;
  margin: ۵px;
  transition:all ۰.۵s ease;
}
@media only screen and (max-width: ۷۶۰px){
   nav{
    justify-content: space-between;
    padding: ۰ ۵vw;
  }
  .nav-links{
    position: absolute;
    right: ۰;
    top:۸vh;
    min-height:۹۲vh;
    background: #۳۳۳;
    display: flex;
    flex-direction: column;
    align-items: center;   
    width: ۵۰%;
    margin: ۰;
    padding: ۰;
    transform: translateX(۱۰۰%);
    transition:All ۰.۵s ease-in;
  }
  .nav-links a{
    opacity: ۰;
 
  }
  .burger{
    display: block;
  }
 
}
@media only screen and (max-width: ۶۴۰px){
  nav{
    justify-content: space-between;
    padding: ۰ ۵vw;
  }
}
.nav-active{
  transform: translateX(۰);
}
@media only screen and (max-width: ۴۶۰px){
  .nav-links{
    width: ۱۰۰%;
    transition:All ۰.۵s ease;
  }
}
.nav-active{
  transform: translateX(۰);
}
@keyframes navLinkFade{
  from{
    opacity: ۰;
    transform: translateX(۵۰px);
  }
  to{
    opacity: ۱;
    transform: translateX(۰);
  }
}
.toggle .line1{
   transform: rotate(-۴۵deg) translate(-۵px,۶px );
}
.toggle .line2{
   opacity: ۰;
}
.toggle .line3{
   transform: rotate(۴۵deg) translate(-۵px,-۶px );
}

قطعه کد جاوا اسکریپت این مثال هم به صورت زیر است:

const navSlide = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");
  const navLinks = document.querySelectorAll(".nav-links a");

  burger.addEventListener("click", () => {
    nav.classList.toggle("nav-active");

    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = "";
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${
          index / ۷ + ۰.۵
        }s `;
      }
    });
    burger.classList.toggle("toggle");
  });
  //
};

navSlide();

خروجی پروژه منوی جاوا اسکریپتی بالا به صورت زیر است:

نوعی منوی ناوبری ساخته شده با زبان برنامه نویسی جاوا اسکریپت به همراه HTML و همچنین CSS

منوهای ناوبری معمولی و ساده، مانند مثال فوق برای ارائه تجربه کاربری روان بسیار مفید هستند ولی با این حال، جاوا اسکریپت تعامل و خلاقیت را به منوها اضافه کرده و در عین اینکه به آن‌ها جذابیت خاصی می‌بخشد، آن‌ها را به منوهای کاربری‌تری تبدیل می‌کند. در این زمینه، جاوا اسکریپت نقش اساسی در اعمال عملکردهای پویا و حذف استایل‌های CSS ایفا خواهد کرد. این رویکرد منو را متحول کرده، خلاقیت را به پروژه می‌بخشد و اطمینان می‌دهد که منو با زیبایی‌شناسی متمایزی در دید کاربران قرار می‌گیرد.

۷. شبیه سازی منوی تویتر

در این بخش از ساخت منو با جاوا اسکریپت به شبیه سازی منوی تویتر خواهیم پرداخت.

آموزش برنامه نویسی جاوا اسکریپت در ادوبی انیمیت Adobe Animate
فیلم آموزش برنامه نویسی جاوا اسکریپت در ادوبی انیمیت Adobe Animate در فرادرس
کلیک کنید

قطعه کد HTML انجام این کار به صورت زیر است:

<aside>
    <svg class="logo" viewBox="۰ ۰ ۲۸ ۲۸">
        <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" />
    </svg>
    <nav>
        <button class="home">
            <div>
                <div class="icon">
                    <svg class="house" viewBox="۰ ۰ ۲۴ ۲۴">
                        <g class="outline">
                            <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" />
                            <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" />
                        </g>
                        <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" />
                    </svg>
                    <svg class="feather left" viewBox="۰ ۰ ۱۴ ۷">
                        <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" />
                        <path d="M12 4.1C9 4.65 4.5 3.5 4.5 3.5" />
                    </svg>
                    <svg class="feather right" viewBox="۰ ۰ ۱۴ ۷">
                        <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" />
                        <path d="M2 4.1C5 4.65 9.5 3.5 9.5 3.5" />
                    </svg>
                </div>
                Home
            </div>
        </button>
        <button class="explore">
            <div>
                <div class="icon">
                    <svg viewBox="۰ ۰ ۲۴ ۲۴">
                        <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" />
                        <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" />
                    </svg>
                </div>
                Explore
            </div>
        </button>
        <button class="notifications active">
            <div>
                <div class="icon">
                    <svg viewBox="۰ ۰ ۲۴ ۲۴">
                        <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" />
                        <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" />
                    </svg>
                </div>
                Notifications
            </div>
        </button>
        <button class="messages">
            <div>
                <div class="icon">
                    <div class="top">
                        <svg class="default" viewBox="۰ ۰ ۲۴ ۱۳">
                            <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" />
                        </svg>
                        <svg class="inner" viewBox="۰ ۰ ۲۴ ۱۳">
                            <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" />
                            <rect x="۲" y="۱۱" width="۲۰" height="۱.۵" />
                        </svg>
                    </div>
                    <svg viewBox="۰ ۰ ۲۴ ۲۴">
                        <rect class="background" x="۱.۲۵" y="۲.۲۵" width="۲۱.۵" height="۱۹.۹۵" rx="۳" />
                        <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" />
                    </svg>
                </div>
                Messages
            </div>
        </button>
        <button class="bookmark">
            <div>
                <div class="icon">
                    <svg viewBox="۰ ۰ ۲۴ ۲۴">
                        <defs>
                            <clipPath id="default-clip">
                                <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" />
                            </clipPath>
                        </defs>
                        <g clip-path="url(#default-clip)">
                            <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" />
                            <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" />
                        </g>
                        <path class="corner" d="M5.5 3L12 3.01L18.5 3V3.01H5.5V3Z" />
                    </svg>
                </div>
                Bookmarks
            </div>
        </button>
        <button class="lists">
            <div>
                <div class="icon">
                    <svg class="pencil" viewBox="۰ ۰ ۸ ۲۲">
                        <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" />
                    </svg>
                    <svg class="list" viewBox="۰ ۰ ۲۴ ۲۴">
                        <rect x="۲.۵" y="۲.۵" width="۱۹" height="۱۹" rx="۲.۲۵" />
                        <path class="top" d="M7 8H17" />
                        <path class="middle" d="M7 12H17" />
                        <path class="bottom" d="M7 16H12" />
                    </svg>
                </div>
                Lists
            </div>
        </button>
        <button class="profile">
            <div>
                <div class="icon">
                    <svg viewBox="۰ ۰ ۲۴ ۲۴">
                        <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" />
                        <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" />
                    </svg>
                </div>
                Profile
            </div>
        </button>
    </nav>
</aside>

<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="۷۲" height="۷۲" viewBox="۰ ۰ ۷۲ ۷۲"><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 آن به صورت زیر است:

:root {
  --c-sidebar: #۰۰۰۰۰۰;
  --c-default: #D9D9D9;
  --c-active: #1DA1F2;
  --c-hover: #۰۸۱۰۱۸;
}

aside {
  width: ۲۸۰px;
  border-radius: ۲۴px;
  padding: ۴۰px;
  background: var(--c-sidebar);
}
aside .logo {
  display: block;
  width: ۲۸px;
  height: ۲۸px;
  fill: var(--logo-color, var(--c-default));
  margin-bottom: ۳۶px;
}
aside nav {
  display: grid;
  grid-gap: ۳۶px;
}
aside nav button {
  --c-color: var(--c-default);
  --c-background: var(--c-sidebar);
  --icon-fill: var(--c-background);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  background: none;
  border: none;
  padding: ۰;
  margin: ۰;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: ۱۹px;
  line-height: ۲۴px;
  font-weight: bold;
  text-align: left;
  display: block;
  cursor: pointer;
  position: relative;
  color: var(--c-color);
}
aside nav button.active {
  --icon-fill: var(--c-active);
  --c-color: var(--c-active);
}
aside nav button .icon {
  margin-right: ۱۶px;
  position: relative;
}
aside nav button .icon svg {
  display: block;
  width: ۲۴px;
  height: ۲۴px;
}
aside nav button > div {
  display: inline-flex;
  padding: ۱۰px ۲۰px ۱۰px ۱۲px;
  margin: -۱۰px -۲۰px -۱۰px -۱۲px;
  border-radius: ۲۱px;
  background: var(--c-background);
}
aside nav button.home {
  --icon-fill-size: ۰px;
  --icon-house-s: ۱;
  --icon-outline-o: ۱;
  --icon-outline-s: ۱;
  --icon-feather-left-o: ۱;
  --icon-feather-left-s: ۰;
  --icon-feather-left-x: -۷px;
  --icon-feather-left-y: -۳.۵px;
  --icon-feather-left-r: ۰deg;
  --icon-feather-right-o: ۱;
  --icon-feather-right-s: ۰;
  --icon-feather-right-x: -۷px;
  --icon-feather-right-y: -۳.۵px;
  --icon-feather-right-r: ۰deg;
}
aside nav button.home.active {
  --icon-outline-o: ۰;
  --icon-outline-s: .۹;
  --icon-fill-size: ۱۲px;
}
aside nav button.home .icon svg.house {
  fill: var(--c-color);
  transform: scale(var(--icon-house-s)) translateZ(۰);
}
aside nav button.home .icon svg.house .fill {
  fill: var(--c-active);
  -webkit-clip-path: circle(var(--icon-fill-size) at ۵۰% ۵۰%);
          clip-path: circle(var(--icon-fill-size) at ۵۰% ۵۰%);
}
aside nav button.home .icon svg.house .outline {
  opacity: var(--icon-outline-o);
  transform: scale(var(--icon-outline-s)) translateZ(۰);
  transform-origin: ۱۲px ۱۲px;
}
aside nav button.home .icon svg.feather {
  position: absolute;
  left: ۵۰%;
  top: ۱۲px;
  width: ۱۴px;
  height: ۷px;
  stroke: var(--c-background);
  fill: var(--c-active);
  stroke-width: ۰.۵px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--icon-feather-left-o);
  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(۰);
}
aside nav button.home .icon svg.feather.right {
  opacity: var(--icon-feather-right-o);
  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(۰);
}
aside nav button.explore {
  --icon-r: ۰deg;
  --icon-triangle-fill: var(--c-background);
  --icon-stroke: ۱.۵px;
}
aside nav button.explore.active {
  --icon-triangle-fill: var(--c-active);
  --icon-stroke: ۲px;
}
aside nav button.explore .icon {
  transform: rotate(var(--icon-r));
}
aside nav button.explore .icon svg {
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-linecap: round;
}
aside nav button.explore .icon svg .outline {
  stroke-width: var(--icon-stroke);
}
aside nav button.explore .icon svg .triangle {
  fill: var(--icon-triangle-fill);
  stroke-width: ۱.۵px;
}
aside nav button.notifications {
  --icon-r: ۰deg;
  --icon-ring-x: ۰px;
  --icon-bell-fill: var(--c-background);
  --icon-stroke: ۱.۵px;
}
aside nav button.notifications.active {
  --icon-bell-fill: var(--c-active);
  --icon-stroke: ۲px;
}
aside nav button.notifications .icon svg {
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-linecap: round;
  transform-origin: ۵۰% ۱۰%;
  transform: rotate(var(--icon-r)) translateZ(۰);
}
aside nav button.notifications .icon svg .bell {
  stroke-width: ۱.۵px;
  fill: var(--icon-bell-fill);
}
aside nav button.notifications .icon svg .ring {
  stroke-width: var(--icon-stroke);
  transform: translateX(var(--icon-ring-x));
}
aside nav button.messages {
  --top-r: ۰deg;
  --icon-stroke: var(--c-color);
}
aside nav button.messages.active {
  --icon-stroke: var(--c-sidebar);
}
aside nav button.messages .icon .top {
  position: absolute;
  top: ۱px;
  left: ۰;
  transform-style: preserve-3d;
  transform-origin: ۵۰% ۱۵%;
  transform: rotateX(var(--top-r));
}
aside nav button.messages .icon .top svg {
  height: ۱۳px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  stroke-width: ۱.۵px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
aside nav button.messages .icon .top svg.default {
  fill: var(--icon-fill);
  stroke: var(--icon-stroke);
}
aside nav button.messages .icon .top svg.inner {
  position: absolute;
  left: ۰;
  top: ۰;
  transform: rotateX(۱۸۰deg);
  stroke: var(--c-sidebar);
}
aside nav button.messages .icon .top svg.inner rect {
  fill: #0168A7;
  stroke: none;
}
aside nav button.messages .icon .top svg.inner path {
  fill: #0168A7;
}
aside nav button.messages .icon svg {
  fill: var(--icon-fill);
  stroke: var(--icon-stroke);
  stroke-width: ۱.۵px;
}
aside nav button.messages .icon svg .background {
  fill: #0168A7;
}
aside nav button.bookmark {
  --icon-default-y: ۰px;
  --icon-background-y: -۱۷.۵px;
  --icon-corner-fill: var(--c-background);
}
aside nav button.bookmark.active {
  --icon-corner-fill: var(--c-active);
}
aside nav button.bookmark .icon svg {
  stroke: currentColor;
  stroke-width: ۱.۵px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
aside nav button.bookmark .icon svg .background {
  stroke: none;
  fill: currentColor;
  transform: translateY(var(--icon-background-y));
}
aside nav button.bookmark .icon svg .corner {
  fill: var(--icon-corner-fill);
}
aside nav button.bookmark .icon svg .default {
  transform: translateY(var(--icon-default-y));
  fill: var(--icon-fill);
}
aside nav button.lists {
  --icon-pencil-o: ۰;
  --icon-pencil-x: ۰;
  --icon-pencil-y: -.۵px;
  --icon-pencil-r: ۴۵deg;
  --icon-line: var(--c-color);
  --icon-line-top: ۰px;
  --icon-line-middle: ۰px;
  --icon-line-bottom: ۰px;
}
aside nav button.lists.active {
  --icon-line: var(--c-background);
}
aside nav button.lists .icon svg {
  stroke-width: ۱.۵px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
aside nav button.lists .icon svg.pencil {
  width: ۸px;
  height: ۲۲px;
  fill: var(--c-active);
  stroke: var(--c-sidebar);
  position: absolute;
  pointer-events: none;
  left: ۲px;
  top: -۱۲px;
  transform-origin: ۵۰% ۲۱px;
  opacity: var(--icon-pencil-o);
  transform: translate(var(--icon-pencil-x), var(--icon-pencil-y)) rotate(var(--icon-pencil-r));
}
aside nav button.lists .icon svg.list {
  stroke: currentColor;
}
aside nav button.lists .icon svg.list rect {
  fill: var(--icon-fill);
}
aside nav button.lists .icon svg.list path {
  stroke: var(--icon-line);
  stroke-dasharray: ۱۰px;
  stroke-dashoffset: var(--icon-line-top);
}
aside nav button.lists .icon svg.list path.middle {
  stroke-dashoffset: var(--icon-line-middle);
}
aside nav button.lists .icon svg.list path.bottom {
  stroke-dasharray: ۵px;
  stroke-dashoffset: var(--icon-line-bottom);
}
aside nav button.profile {
  --icon-r: ۰deg;
  --icon-eye-r: ۹۰deg;
  --icon-eye-r-s: ۱;
}
aside nav button.profile .icon:before, aside nav button.profile .icon:after {
  content: "";
  position: absolute;
  left: ۱۳px;
  top: ۵px;
  width: ۲px;
  height: ۲px;
  border-radius: ۱px;
  border-radius: ۱px;
  background: var(--c-background);
  box-shadow: ۴px ۰ ۰ var(--c-background);
  transform: rotateX(var(--icon-eye-r));
}
aside nav button.profile .icon:before {
  left: ۹px;
  transform: scaleX(var(--icon-eye-r-s)) rotateX(var(--icon-eye-r));
}
aside nav button.profile .icon svg {
  fill: var(--icon-fill);
  stroke: currentColor;
  stroke-width: ۱.۵px;
}
aside nav button.profile .icon svg .head {
  transform-origin: ۱۲px ۹px;
  transform: rotate(var(--icon-r));
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: ۱۰۰vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #15181C;
  padding: ۴۰px;
}
body .dribbble {
  position: fixed;
  display: block;
  right: ۲۰px;
  bottom: ۲۰px;
}
body .dribbble img {
  display: block;
  height: ۲۸px;
}
body .twitter {
  position: fixed;
  display: block;
  right: ۶۴px;
  bottom: ۱۴px;
}
body .twitter svg {
  width: ۳۲px;
  height: ۳۲px;
  fill: #1da1f2;
}
چگونه با جاوا اسکریپت منو بسازیم ؟
مطالب مرتبط
۱۵
ساده ترین راه تشخیص اسید و باز برای دانش آموزان
Untitled
روش پیدا کردن مصدر در زبان انگلیسی
Untitled
راحت ترین راه پیدا کردن فعل در جمله
فاقد تصویر شاخص
آموزش صفت نسبی در زبان فارسی به صورت رایگان
۱۵
۱۰ راه مناسب برای ایندکس در SQL
فاقد تصویر شاخص
گرامر Defining Relative Clauses به بیان ساده
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *