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

تمرین آسان 410 visibility link download flag

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

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

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

👨‍💻 11 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

reply 2

visibility 
<!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

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

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

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