Как сделать так, чтобы получилось выпадающее меню, как на картинке? Так же не могу понять, как расположить стрелку так же, как на картинке и задать такой же цвет. Стрелку вызвал с помощью jqery через after. Все действие происходит в блоке paint.
Сам сайт norum1991.beget.tech.
Код jsfiddle.net/9vsbhk8L/
-
учить html,css, и чутка js– Armen16 ноя 2020 в 20:26
-
или хотя бы вбить в google.ru свой же вопрос– Armen16 ноя 2020 в 20:27
-
Посмотрите элемент details– Kirill17 ноя 2020 в 1:28
2 ответа
Вариант на CSS:
Открытие при наведение:
.dropdown {
display: inline-block;
margin: 0 auto;
position: relative;
}
.dropdown .-hover {
color: #fdac7a;
}
.dropdown .-hover > span {
text-decoration: underline dashed;
font-style: italic;
}
.dropdown .-hover::after {
content: '\25BC';
font-size: 50%;
}
.dropdown .-list {
display: none;
width: calc(100% + 10px);
background: #fff;
box-shadow: 0 2px 3px rgba(0,0,0,.35);
padding: 5px;
box-sizing: border-box;
position: absolute;
top: 100%;
left: -5px;
z-index: 10;
}
.dropdown .-list a {
display: block;
text-decoration: none;
color: inherit;
}
.dropdown .-list a:hover {
color: #fdac7a;
}
.dropdown:hover .-list {
display: block;
}
.dropdown:hover .-hover::after {
content: '\25B2';
}
<div class="dropdown">
<div class="-hover">
<span>Декоративная краска</span>
</div>
<div class="-list">
<!-- Названия красок, наверное, взятые с первого попавшегося сайта, так, для примера -->
<a href="#">Decorazza Velours</a>
<a href="#">Decorazza Seta</a>
<a href="#">Decorazza Lucetezza</a>
<a href="#">Decorazza Velluto</a>
<a href="#">Decorazza Brezza</a>
<a href="#">Decorazza Aretino</a>
<a href="#">Decorazza Seta da Vinci</a>
<a href="#">Decorazza Effetto metallico</a>
<a href="#">Decorazza Craquelure</a>
</div>
</div>
Открытие при нажатии по стрелке:
.dropdown {
display: inline-block;
margin: 0 auto;
position: relative;
}
.dropdown #menu {
display: none;
}
.dropdown .-hover {
color: #fdac7a;
}
.dropdown .-hover > span {
text-decoration: underline dashed;
font-style: italic;
}
.dropdown .-arrow::after {
content: '\25BC';
font-size: 50%;
cursor: pointer;
}
.dropdown .-list {
display: none;
width: calc(100% + 10px);
background: #fff;
box-shadow: 0 2px 3px rgba(0,0,0,.35);
padding: 5px;
box-sizing: border-box;
position: absolute;
top: 100%;
left: -5px;
z-index: 10;
}
.dropdown .-list a {
display: block;
text-decoration: none;
color: inherit;
}
.dropdown .-list a:hover {
color: #fdac7a;
}
.dropdown #menu:checked ~ .-list {
display: block;
}
.dropdown #menu:checked ~ .-arrow::after {
content: '\25B2';
}
<div class="dropdown">
<input type="checkbox" id="menu">
<div class="-hover">
<span>Декоративная краска</span>
<label for="menu" class="-arrow"></label>
</div>
<div class="-list">
<!-- Названия красок, наверное, взятые с первого попавшегося сайта, так, для примера -->
<a href="#">Decorazza Velours</a>
<a href="#">Decorazza Seta</a>
<a href="#">Decorazza Lucetezza</a>
<a href="#">Decorazza Velluto</a>
<a href="#">Decorazza Brezza</a>
<a href="#">Decorazza Aretino</a>
<a href="#">Decorazza Seta da Vinci</a>
<a href="#">Decorazza Effetto metallico</a>
<a href="#">Decorazza Craquelure</a>
</div>
</div>
-
А как сделать так, чтобы список раскрывался при нажатии на стрелку и она так же переворачивалась при раскрытии списка?– Tempest17 ноя 2020 в 15:30
-
-
Стрелка: Можно использовать font-awesome и там стрелка внутри будеть как шрифт. Цвет: Нужно использовать color:orange например для цвета. Меню: Чтобы меня сделать нужно создать div и дать ему display none
<div id="#book" style="display:none"></div>
Выпадающее меня: На jQuery button.toggle
$( "#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
// Animation complete.
});
});