Чтобы создать раскрывающееся меню из трех точек в CSS, вы можете использовать различные методы. Вот несколько методов и примеры кода:
Метод 1: использование CSS Flexbox и псевдоэлементов
HTML:
<div class="dropdown">
<div class="dots"></div>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
CSS:
.dropdown {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.dots {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 10px;
display: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Метод 2: использование CSS-сетки и флажка
HTML:
<div class="dropdown">
<input type="checkbox" id="dropdown-checkbox" class="dropdown-checkbox">
<label for="dropdown-checkbox" class="dots"></label>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
CSS:
.dropdown {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
cursor: pointer;
}
.dots {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
}
.dropdown-menu {
grid-column: 1 / -1;
background-color: #fff;
padding: 10px;
display: none;
}
.dropdown-checkbox:checked ~ .dropdown-menu {
display: block;
}
Метод 3. Использование CSS-позиционирования и JavaScript
HTML:
<div class="dropdown">
<div class="dots"></div>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
CSS:
.dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}
.dots {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 10px;
display: none;
}
.show-dropdown .dropdown-menu {
display: block;
}
JavaScript:
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function() {
this.classList.toggle('show-dropdown');
});
Это всего лишь несколько примеров того, как можно создать раскрывающееся меню из трех точек в CSS. Вы можете настроить стили и функции в соответствии со своими требованиями.