ساخت منوی ریسپانسیو
سلام دوستان برنامه نویس🖐️
ببخشید ی سوال داشتم...
من میخوام یک منو ریسپانسیو (navigation bar) بسازم...
تا قسمت دسکتاپ که اوکیه👍🙂
ولی میخوام در موبایل وقتی روی لوگوی منو کلیک کردم لیستی از صفحات دیگر وبسایت نمایش داده بشه شبیه همین سایت راکت
حالا سوالم اینه که چه کد جاوا اسکریپتی باید بنویسم که وقتی رو لوگو کلید کردم اون div که از قبل کدشو زدم و لینک های صفحات دیگر سایت توش هست نمایش داده بشه
لطفا راهنمایی کنید :)
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ببینید راه حل رو بپرسید ولی کد دستوری رو راحت سرج کنید چون بعد خودتون توی مشکلات بزرگ تر گیر میکنید و کسی نیست ک بلد باشه یا کمک کنه
خیلی راحت همین چیزی که میگی رو سرج کردم منم بلد نبودم چون jquery کار کردم از اول خام نزدم js
add class to element with js
اینو سرج کردم و اولین سایت بهم کد زیرو داد
var element = document.getElementById("myDIV");
element.classList.add("mystyle");وقتی میخوایی با کلیک بر روی چیزی بخشی رو نمایش بدی ساده ترین حالت اینه که یه کلاس active داشته باشه که به اون المنت اضاف کنی با جاوا اسکریپت
حالا خیلی راحت توی حالت اولیه میگی مثلا display:none باشه و نمایش داده نشه و تو حالتی که کلاس active داره مثلا display:block;
پیشنهاداتی که بهت میدم اینه که حتما از transition استفاده کن
مثلا opacity رو کم کن بعد توی نیم ثانیه کامل کن
یا مثلا عرض رو صفر کن توی کمتر از نیم ثانیه هرجقد که نیازه باشه بکنش
یا اسلایدی بخوایی میتونی مارجین بهش منفی بدی خارج صفحه باشه توی زمان خاصی بیاد تو صفحه
نمونه هاش توی نت زیاده اگر کدشون رو ببینی درک میکنی
salar.mohammad2013@ خیلی ممنون از پاسختون .
من تو کد جاوا اسکریپتش موندم
که با جاوا اسکریپت چی بنویسم که با کلیک کردن کلاس active اضافه بشه.
اگه میشه کد جاوا اسکریپت رو ینویسید...
ببینید راه حل رو بپرسید ولی کد دستوری رو راحت سرج کنید چون بعد خودتون توی مشکلات بزرگ تر گیر میکنید و کسی نیست ک بلد باشه یا کمک کنه
خیلی راحت همین چیزی که میگی رو سرج کردم منم بلد نبودم چون jquery کار کردم از اول خام نزدم js
add class to element with js
اینو سرج کردم و اولین سایت بهم کد زیرو داد
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
همونطوری که محمد رضا گفت کاملا درسته اینم یه نمونه:
html:
<button class="menu-btn">menu</button>
<div class="menu">...</div>css:
.menu {
display: none;
}
.menu.active {
display: block;
}js:
const menu = document.querySelector('.menu')
const menuBtn = document.querySelector('.menu-btn')
menuBtn.addEventListener('click', e => menu.classList.toggle('active'))البته این یه نمونه خیلی سادس توی کدپن بگرد نمونه های پیشرفته خوبی پیدا میکنی
چرا کلیک میکنم منو باز نمیشه؟؟😕
html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>منو ریسپانسیو</title>
</head>
<body>
<header>
<div class="menu">
<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>
</div>
<button onclick="myFunction()">منو</button>
<div id="menu-phone">
<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>
</div>
</header>
<script src="main.js"></script>
</body>
</html>css
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
direction: rtl;
font-family: 'tahoma';
}
header {
width: 100%;
height: 80px;
float: left;
display: flex;
background-color: #303030;
padding: 0 50px;
}
.menu {
width: 100%;
float: right;
}
.menu ul {
text-align: right;
}
.menu ul li {
list-style: none;
display: inline-block;
}
.menu ul li a {
text-decoration: none;
color: #fff;
font-size: 18px;
padding: 30px 20px;
display: inline-block;
transition: all .2s ease-in-out;
}
.menu ul li a:hover {
color: #74b9ff;
}
/***منوی ریسپانسیو***/
.menu-phone {
width: 100%;
float: right;
}
button {
display: none;
width: 50px;
height: 50px;
margin: 15px 0;
}
.active {
display: block;
}
#menu-phone {
display: none;
}
#menu-phone ul {
width: 300px;
height: 500px;
background-color: #34495e;
}
#menu-phone ul li {
list-style: none;
display: block;
}
#menu-phone ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
padding: 30px 20px;
display: inline-block;
transition: all .2s ease-in-out;
}
@media (max-width: 768px) {
.menu {
display: none;
}
button {
display: block;
}
}js
function myFunction() {
var element = document.getElementById("menu-phone");
element.classList.add("active");
}خب ببین مشکلت اینه که باید توی کلاس اکتیو !important رو بزاری
.active {
display: block !important;
}دلیلشم اینه که ایدی به کلاس ارجعیت داره و استلایل ای دی ارجع تره
حالا مشکل چطوری پیدا شد ؟ خیلی راحت بدون کد جاوا اسکریپتی کلاس اکتیو رو دستی دادم به کدات دیدم منو نمایش داده نمیشه اصلا
یعنی انتظار داشتم با قرار دادن کلاس اکتیو همیشه ببینم منو رو ولی ندیدم
پس مشخص شد مشکل استایل هاته
در مرحله دوم اگر همچین چیزی درست بود یه console.log() ساده توی فانکشن میزاری ببینی اصلا فانکشن صدا زده میشه کار میکنه یا نه
که کار میکرد و درست شد موضوع مشکل همون !important بود فقط