Мобильная версия
Также я не могу понять, как сделать, чтобы он открывался не вправо, а влево, но основная проблема теперь с отступами.
Код: Выделить всё
document.querySelectorAll('.dropdown').forEach((dropdown) => {
const button = dropdown.querySelector('a[data-toggle="dropdown"]');
const menu = dropdown.querySelector('.dropdown-menu');
button.addEventListener('click', (event) => {
event.preventDefault();
document.querySelectorAll('.dropdown-menu.show').forEach((openMenu) => {
if (openMenu !== menu) {
openMenu.classList.remove('show');
}
});
const buttonWidth = button.offsetWidth;
menu.style.width = `${buttonWidth}px`;
menu.classList.toggle('show');
});
});
// to close the dropdown when clicked anywhere else on the page
document.addEventListener('click', (event) => {
if (!event.target.closest('.dropdown')) {
document.querySelectorAll('.dropdown-menu.show').forEach((menu) => {
menu.classList.remove('show');
});
}
});Код: Выделить всё
nav {
width: 200px;
position: relative;
}
.nav-menu {
background-color: orange;
display: flex;
flex-direction: row;
}
.dropdown {
position: relative;
}
a[data-toggle="dropdown"] {
display: flex;
align-items: center;
background: transparent;
color: blue;
padding: 10px 15px;
border-radius: 4px;
transition: background 0.3s ease;
white-space: nowrap;
}
a[data-toggle="dropdown"]:hover {
color: black;
}
.nav-menu {
gap: 10px;
list-style-type: none;
padding: 0;
margin: 0;
align-items: center;
width: 100%;
}
.dropdown-menu {
list-style: none;
padding: 10px 15px;
margin: 0;
position: absolute;
top: 100%;
left: 0;
/* min-width: 200px; */
width: auto;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
border-radius: 6px;
overflow: hidden;
transform: scaleY(0);
transform-origin: top;
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
z-index: 1000;
}
.dropdown-menu.show {
transform: scaleY(1);
opacity: 1;
}
.dropdown-menu:before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
clip-path: inset(0 0 0 0);
}Код: Выделить всё
[list]
[*]
[url=#]About[/url]
[url=/foo.html]Foo[/url]
[*][url=/bar.html]Bar[/url]
[/list]
Я пытался добавить отступ справа в .dropdown- меню, но оно работает не так, как я ожидал.
Подробнее здесь: https://stackoverflow.com/questions/793 ... s-together
