Reactive drop -down menu design with Hawra and Mobile icon

Practice Easy Download

187 Views

Write a program to create a drop -down menu that is displayed in desktop mode using the Hover feature. In this case, the user will see the subsidiary options by placing the mouse marker on the menu.

In mobile mode, the menu should be displayed as an icon and click on the icon to open the menu and its options will be visible.

In addition, the menu design should be in such a way that it supports Responsive, so that it is properly displayed in different size of the screen and provides a good user experience.

2 Answers

<!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;
    }

    # The menu bar
    .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;
    }

    # Subman
    .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;
    }

    # Hover on the desktop
    .dropdown:hover .dropdown-content {
      display: block;
    }

    # Mobile icon
    .menu-icon {
      display: none;
      float: left;
      font-size: 24px;
      color: white;
      padding: 14px 20px;
      cursor: pointer;
    }

    # Responsive
    @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

Download

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>

Download

JavaScript

HTML & CSS

Submit answer

Submitting answers is currently unavailable.

CodeSolved

Solved Programming Questions & Exercises

Reactive drop -down menu design with Hawra and Mobile icon

2 Answers

Submit answer

Reactive drop -down menu design with Hawra and Mobile icon

2 Answers

Submit answer

Account

I can't solve this exercise 😞