حل شده توسط
وحید صالحی
سلام استاد وقتتون بخیر
ببخشید من برای تمرین بیشتر سعی کردم همین منو رو ریسپانسیو کنم برای موبایل
براتون میفرستم لطفا اشکالات کارم رو بهم بگین و اینکه ایا اصلا روشم درست بوده یا نه ؟
<!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*/
فقط استاد فایل سی اس اس ریست رو ضمیمه نکردم