#javascript #html #css #responsive-design #sidebar
Вопрос:
Мне нужна помощь, я создаю веб-страницу, на которой мне нужно создать отзывчивую боковую панель с подменю. До сих пор я выполнял часть html и css, я также добавил в нее js, но все равно она не работает, и я хочу добавить к этому отзывчивость, чтобы, когда пользователь нажимает меню гамбургера, открывалась боковая панель, а когда пользователь нажимает рядом с боковой панелью, она закрывалась (я хочу закрыть боковую панель, нажав рядом с ней, а не с помощью кнопки «Отмена»). Если быть более точным, я создаю клон веб-сайта myntra в мобильном представлении. ниже приведен мой код, пожалуйста, помогите, если вы можете поблагодарить вас. HTML:
<div class="sidebar-ul">
<ul class="menu-list">
<li class="menu-items">
<a href="" class="item-link">
<div class="toflex">
<span>Men</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
<ul class="drop-list" style="padding-left: 20px;">
<li class="drop-item">
<a href="" class="item-link">
<div class="toflex">
<span>Topwear</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
<ul class="drop-menu-list" style="padding-left: 20px;">
<li class="menu-item">
<a href="" class="item-link">
<div class="toflex">
<span>T-shirts</span>
</div>
</a>
</li>
<li class="menu-item">
<a href="" class="item-link">
<div class="toflex">
<span>Casual Shirts</span>
</div>
</a>
</li>
<li class="menu-item">
<a href="" class="item-link">
<div class="toflex">
<span>Formal Shirts</span>
</div>
</a>
</li>
<li class="menu-item">
<a href="" class="item-link">
<div class="toflex">
<span>Sweatshirts</span>
</div>
</a>
</li>
<li class="menu-item">
<a href="" class="item-link">
<div class="toflex">
<span>Jackets</span>
</div>
</a>
</li>
<li class="menu-item">
<a href="" class="item-link">
<div class="toflex">
<span>Rain Coats</span>
</div>
</a>
</li>
</ul>
</li>
<li class="drop-item">
<a href="" class="item-link">
<div class="toflex">
<span>Indian amp; Festival Wear</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
</li>
<li class="drop-item">
<a href="" class="item-link">
<div class="toflex">
<span>Bottomwear</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
</li>
<li class="drop-item">
<a href="" class="item-link">
<div class="toflex">
<span>innerwear amp; Sleepwear</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
</li>
<li class="drop-item">
<a href="" class="item-link">
<div class="toflex">
<span>Plus Size</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
</li>
<li class="drop-item">
<a href="" class="item-link">
<div class="toflex">
<span>Footwear</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
</li>
</ul>
</li>
<li class="menu-items">
<a href="" class="item-link">
<div class="toflex">
<span>Women</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
</li>
<li class="menu-items">
<a href="" class="item-link">
<div class="toflex">
<span>Kids</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
</li>
<li class="menu-items">
<a href="" class="item-link">
<div class="toflex">
<span>Home amp; Living</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
</li>
<li class="menu-items">
<a href="" class="item-link">
<div class="toflex">
<span>Beauty</span>
<i class="fas fa-chevron-right"></i>
</div>
</a>
</li>
</ul>
</div>
<div class="user-specific-links">
<ul class="specific-list">
<li class="specific-item">
<a href="">Myntra Studio</a>
</li>
<li class="specific-item">
<a href="">Myntra Mall</a>
</li>
<li class="specific-item">
<a href="">Myntra Insider</a>
</li>
<li class="specific-item">
<a href="">Gift Cards</a>
</li>
<li class="specific-item">
<a href="">Contact Us</a>
</li>
<li class="specific-item">
<a href="">FAQs</a>
</li>
<li class="specific-item">
<a href="">Legal</a>
</li>
</ul>
</div>
CSS:
.sidebar .sidebar-ul {
background-color: #fff;
border-bottom: 1px solid #eaeaec;
margin-bottom: 5px;
padding-bottom: 5px;
}
.sidebar .image-signUp-box{
position: relative;
}
.sidebar .sidebar-signup {
position: absolute;
bottom: 14%;
right: 18%;
}
.sidebar .login-link {
font-size: 12px;
color: #ff3f6c;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
}
.sidebar-ul > ul {
display: flex;
flex-direction: column;
padding: 0;
}
.sidebar-ul .item-link {
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: #3e4152;
text-decoration: none;
}
.sidebar .sidebar-ul .toflex {
display: flex;
justify-content: space-between;
padding: 14px 20px;
}
.sidebar .user-specific-links {
background-color: #fff;
}
.sidebar .specific-list {
display: flex;
flex-direction: column;
padding: 0;
}
.sidebar .specific-item a {
display: block;
color: #282c3f;
padding: 14px 20px;
text-decoration: none;
}
.sidebar .drop-list a {
font-weight: 400;
}
ul.drop-list {
display: none;
}
ul.drop-menu-list {
display: none;
}
Язык JavaScript:
var mainDrop = document.getElementsByClassName("menu-items");
var i;
for (i = 0; i < mainDrop.length; i ) {
mainDrop[i].addEventListener("click", function () {
this.classList.toggle("active");
var mainDropContent = this.children(".drop-list");
if (mainDropContent.style.display === "block") {
mainDropContent.style.display = "none";
} else {
mainDropContent.style.display = "block";
}
});
}
Комментарии:
1. куда вы положили
sidebar-uldiv?2. Я поместил его в раздел, называемый боковой панелью
3. Я обновил свой код для js, но снова подменю не отображается, так что это мой обновленный код в следующем комментарии
4. выпадающий список var = document.getElementsByClassName(«ссылка на элемент»); var i; для (i = 0; i