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

منتشر شده در تاریخ : 7 مرداد 1401

در این آموزش ویدیویی از سری آموزش‌های مینی پروژه جاوا اسکریپت و مینی پروژه های HTML و CSS می خواهیم یک منوی بازشو طراحی کنیم که قابلیت نمایش و پنهان کردن یک منو را داشته باشد، در این پروژه از html و css و جاوا اسکریپت استفاده خواهیم کرد و البته از فونت آیکون فونت آسوم هم استفاده خواهیم کرد، پس با این آموزش جذاب همراه آکادمی وبکیما باشید.

راهنمای مطالعه:

قابلیت نمایش و مخفی کردن منو

در این آموزش می‌خواهیم یک مینی پروژه جاوا اسکریپت را طراحی کنیم تا با استفاده از آن یک دکمه طراحی کنیم و در نهایت با کلیک روی آن دکمه یک منو از غیب پدیدار شود!

کدهای HTML پروژه

در زیر می‌توانید کدهای html مربوط به پروژه منوی بازشو را مشاهده کنید.

<!DOCTYPE html>
<!-- Created By Navid Dev -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navid Dev - Animated Menu button with list</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="menu-container">
      <button class="button">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <ul class="menu-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">FeedBack</a></li>
      </ul>
    </div>

    <script src="script.js"></script>
  </body>
</html>

کدهای CSS پروژه

در زیر می‌توانید کدهای CSS مربوط به پروژه منوی بازشو را مشاهده کنید.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400i,600,700,800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  text-decoration: none;
}
body {
  background: #80deea;
  font-family: 'Open Sans', sans-serif;
}
.menu-container {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.menu-container.active {
  overflow: visible;
}
.button {
  position: relative;
  background: #1b1b1b;
  color: #fff;
  font-size: 20px;
  padding: 8px 20px;
  width: 150px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 25px;
  cursor: pointer;
  transition: width 0.4s;
}
.menu-container.active .button {
  width: 100%;
}
.menu-container.active .fas::before {
  content: '\f00d';
}
ul {
  position: absolute;
  top: 65px;
  background: #1b1b1b;
  list-style: none;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  transform: translateY(20%);
  opacity: 0;
  transition: transform 0.3s ease-in, opacity 0.2s ease;
}
.menu-container.active ul {
  transform: translateY(0);
  opacity: 1;
}
ul::before {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background: #1b1b1b;
  top: -10px;
  right: 15px;
  transform: rotate(45deg);
  z-index: -1;
}
ul li {
  line-height: 35px;
  padding: 8px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
ul li:last-child {
  border-bottom: none;
}
ul li:hover {
  box-shadow: inset 0 0 5px #33ffff, inset 0 0 10px #66ffff;
}
ul li:hover:first-child {
  border-radius: 5px 5px 0 0;
}
ul li:hover:last-child {
  border-radius: 0 0 5px 5px;
}
ul li a {
  color: #fff;
  font-size: 18px;
}
ul li:hover a {
  color: #33ffff;
}

کدهای جاوا اسکریپت پروژه

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

const menuContainer = document.querySelector('.menu-container');

menuContainer.addEventListener('click', function () {
  this.classList.toggle('active');
});

جمع بندی

در انتها امیدواریم که آموزش ساخت منوی بازشو در HTML CSS و جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.

4.7/5 - (3 امتیاز)

نظرات در “ساخت منوی بازشو در HTML CSS و جاوا اسکریپت”

امیر میگوید:
سلام
من همین پروژه رو درست کردم ولی برام اجرا نشد.(گزینه های منو رو به من نوشت نمیده، باید چیکار کنم؟)

در
برای پاسخ دادن وارد شوید
- پشتیبانی میگوید:
  سلام، کدهای خود را با کدهای قرار داده شده داخل این صفحه مقایسه کنید و ببینید که کجای کار را اشتباه انجام دادید.
  
  در
  برای پاسخ دادن وارد شوید
نازنین میگوید:
سلام
من همین پروژه رو درست کردم ولی برام اجرا نشد.(گزینه های منو رو بمن نوشت نمیده، باید چیکار کنم؟)

در
برای پاسخ دادن وارد شوید
- پشتیبانی میگوید:
  درود، در این رابطه باید موارد را مطابق با آموزش دنبال کنید.
  
  در
  برای پاسخ دادن وارد شوید

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.

آموزش طراحی فرم لاگین با HTML و CSS

اسلایدر کارت وبلاگ متحرک با HTML و CSS

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

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