رسپانسیو کردن این منو

Question

سلام استاد وقتتون بخیر

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

براتون میفرستم لطفا اشکالات کارم رو بهم بگین و اینکه ایا اصلا روشم درست بوده یا نه ؟

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/mystyle.css">
  <title> 1 |منوی افقی</title>
</head>

<body>
  <nav class="desktop-nav">
    <a href="#">خانه </a>
    <a href="#"> دوره های آموزشی</a>
    <a href="#">بلاگ</a>
    <a href="#">تماس با ما</a>
    <a href="#">درباره ما</a>
    <div class="animation start-home"></div>
  </nav>
  <nav class="mobile-nav">
    <ul>
      <li><a href="#">خانه </a></li>
      <li><a href="#"> دوره های آموزشی</a></li>
      <li><a href="#">بلاگ</a></li>
      <li><a href="#">تماس با ما</a></li>
      <li><a href="#">درباره ما</a></li>
    </ul>
  </nav>
</body>

</html>

mystyle.css

/* استایل های اصلی استفاده شده در جلسه*/
body {
  background-color: #2c3e50;
}
nav {
  margin: 28px auto;
  position: relative;
  width: 620px;
  height: 50px;
  background-color: #34495e;
  border-radius: 8px;
}
nav a {
  line-height: 50px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  cursor: pointer;
}
nav a:nth-child(1) {
  width: 100px;
}
nav a:nth-child(2) {
  width: 110px;
}
nav a:nth-child(3) {
  width: 120px;
}
nav a:nth-child(4) {
  width: 130px;
}
nav a:nth-child(5) {
  width: 140px;
}

nav .animation {
  position: absolute;
  height: 100%;
  top: 0;

  transition: all 0.4s ease;
}

nav .start-home,
nav a:nth-child(1):hover ~ .animation {
  width: 100px;
  right: 0;
  border-bottom-right-radius: 8px;
  border-bottom: 1px solid #1abc9c;
}

nav a:nth-child(2):hover ~ .animation {
  width: 120px;
  right: 100px;
  border-radius: 0;
  border-bottom: 1px solid #c81cce;
}

nav a:nth-child(3):hover ~ .animation {
  width: 120px;
  right: 220px;
  border-radius: 0;
  border-bottom: 1px solid #b1e71b;
}

nav a:nth-child(4):hover ~ .animation {
  width: 160px;
  right: 330px;
  border-radius: 0;
  border-bottom: 1px solid #e71b1b;
}

nav a:nth-child(5):hover ~ .animation {
  width: 120px;
  right: 499px;
  border-radius: 0;
  border-bottom-left-radius: 8px;
  border-bottom: 1px solid #00aeff;
}
/* پایان استایل های استفاده شده در این جلسه*/


/* mobile nav  start*/

.mobile-nav {
  margin: 5px;
  width: 60px;
  height: 50px;
  background-color: #34495e;
  border-radius: 8px;
  display: none;
}
.mobile-nav::after {
  content: "=";
  text-align: center;
  line-height: 50px;
  margin: 0px auto;
  position: absolute;
  right: 16px;
  color: white;
  font-size: 50px;
}
.mobile-nav:hover ul {
  display: block;
  position: absolute;
  top: 53px;
  margin: 0;
}

@media screen and (max-width: 635px) {
  .mobile-nav {
    display: block;
  }
  .mobile-nav ul {
    display: none;
  }
  .desktop-nav {
    display: none;
  }
  .mobile-nav ul li a {
    width: 150px;
    text-align: right;
    padding-right: 15px;
    background-color: #34495e;
    border-radius: 8px;
    margin-bottom: 2px;
  }
}
.mobile-nav ul li:nth-child(1):hover a {
  background-color: rgb(151, 235, 16);
}
.mobile-nav ul li:nth-child(2):hover a {
  background-color: rgb(16, 137, 235);
}
.mobile-nav ul li:nth-child(3):hover a {
  background-color: rgb(184, 16, 235);
}
.mobile-nav ul li:nth-child(4):hover a {
  background-color: rgb(235, 16, 27);
}
.mobile-nav ul li:nth-child(5):hover a {
  background-color: rgb(16, 235, 107);
}
/* mobile nav  end*/

فقط استاد فایل سی اس اس ریست رو ضمیمه نکردم

طراحی وب

علی قربان زاده

14 شهریور 99

Answer 1

حذف شده

سلام درسته و مشکلی نداره

توسط

وحید صالحی

14 شهریور 99

رسپانسیو کردن این منو

سوالات مرتبط