طراحی منوی کشویی واکنش‌گرا با هاور و آیکون موبایل

تمرین آسان 325 visibility link download

برنامه ای بنویسید که یک منوی کشویی ایجاد کند که در حالت دسکتاپ با استفاده از ویژگی هاور (Hover) نمایش داده شود. در این حالت، کاربر با قرار دادن نشانگر ماوس بر روی منو، گزینه‌های زیرمجموعه را مشاهده خواهد کرد.

در حالت موبایل، منو باید به صورت یک آیکون ☰ نمایش داده شود و با کلیک بر روی این آیکون، منو باز شود و گزینه‌های آن قابل مشاهده باشند.

علاوه بر این، طراحی منو باید به گونه‌ای باشد که از قابلیت واکنشگرا (Responsive) پشتیبانی کند، به طوری که در اندازه‌های مختلف صفحه نمایش به درستی نمایش داده شود و تجربه کاربری مناسبی را فراهم کند.

👨‍💻 18 ساعت قبل Maede.khajavi این تمرین رو مشاهده کرد

reply 2 

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>منوی کشویی واکنش‌گرا</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
    }

    /* نوار منو */
    .navbar {
      background-color: #333;
      overflow: hidden;
    }

    .navbar a {
      float: right;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
    }

    .navbar a:hover {
      background-color: #575757;
    }

    /* زیرمنو */
    .dropdown {
      float: right;
      position: relative;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      right: 0;
      background-color: #444;
      min-width: 160px;
      z-index: 1;
    }

    .dropdown-content a {
      float: none;
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: right;
    }

    .dropdown-content a:hover {
      background-color: #666;
    }

    /* هاور در دسکتاپ */
    .dropdown:hover .dropdown-content {
      display: block;
    }

    /* آیکون موبایل */
    .menu-icon {
      display: none;
      float: left;
      font-size: 24px;
      color: white;
      padding: 14px 20px;
      cursor: pointer;
    }

    /* واکنش‌گرا */
    @media screen and (max-width: 768px) {
      .navbar a, .dropdown {
        display: none;
      }

      .menu-icon {
        display: block;
      }

      .navbar.responsive .dropdown,
      .navbar.responsive a {
        display: block;
        float: none;
        text-align: right;
      }

      .navbar.responsive .dropdown-content {
        position: static;
      }
    }
  </style>
</head>
<body>

<div class="navbar" id="navbar">
  <span class="menu-icon" onclick="toggleMenu()">☰</span>
  <a href="#home">خانه</a>
  <a href="#about">درباره ما</a>
  <div class="dropdown">
    <a href="javascript:void(0)">خدمات</a>
    <div class="dropdown-content">
      <a href="#design">طراحی</a>
      <a href="#development">برنامه‌نویسی</a>
      <a href="#seo">سئو</a>
    </div>
  </div>
  <a href="#contact">تماس با ما</a>
</div>

<script>
  function toggleMenu() {
    var nav = document.getElementById("navbar");
    nav.classList.toggle("responsive");
  }
</script>

</body>
</html>
Fataneh.51 JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>منوی کشویی</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .menu { display: flex; justify-content: space-between; align-items: center; }
        .menu ul { list-style: none; padding: 0; margin: 0; }
        .menu li { position: relative; }
        .menu a { text-decoration: none; padding: 10px; display: block; }
        .submenu { display: none; position: absolute; background: #fff; border: 1px solid #ccc; }
        .menu li:hover .submenu { display: block; }
        .menu-icon { display: none; cursor: pointer; }
        @media (max-width: 768px) {
            .menu ul { display: none; flex-direction: column; }
            .menu-icon { display: block; }
            .menu.active ul { display: flex; }
        }
    </style>
</head>
<body>

<div class="menu">
    <div class="menu-icon" onclick="toggleMenu()">☰</div>
    <ul>
        <li><a href="#">خانه</a></li>
        <li>
            <a href="#">خدمات</a>
            <ul class="submenu">
                <li><a href="#">خدمت ۱</a></li>
                <li><a href="#">خدمت ۲</a></li>
            </ul>
        </li>
        <li><a href="#">تماس</a></li>
    </ul>
</div>

<script>
    function toggleMenu() {
        document.querySelector('.menu').classList.toggle('active');
    }
</script>

</body>
</html>
Ai JavaScript HTML & CSS

reply ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • در متن جواب اطلاعات شخصی شامل ایمیل و شماره موبایل و آی دی و... ننویس
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن