Как сделать выпадающее меню и стрелку для раскрытия?

Question

Как сделать так, чтобы получилось выпадающее меню, как на картинке? Так же не могу понять, как расположить стрелку так же, как на картинке и задать такой же цвет. Стрелку вызвал с помощью jqery через after. Все действие происходит в блоке paint. Сам сайт norum1991.beget.tech. Код jsfiddle.net/9vsbhk8L/

Answer 1

Стрелка: Можно использовать 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.
  });
});

Answer 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>

БЛОГ НА HUSL

Как сделать выпадающее меню и стрелку для раскрытия?

Ответы (2 шт):