• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Многоуровневое выпадающее меню на HTML + CSS (Как сделать многоуровневое вертикальное меню accordion сайта)
Многоуровневое выпадающее меню на HTML + CSS
Kosten
Дата: Понедельник, 2021-03-22, 00:22 | Сообщение 1
Оффлайн
Администраторы
Сообщений:38130
Награды: 65


Отличное решение для многоуровневое вертикальное меню аккордеон, которое создано на чистом CSS. Которое отлично подойдет под навигацию на сайте, где изначально занимает немного места, но при клике по заголовкам, будут появляться под категорий. По цветовой гамме оно идет в светло красном оттенке, где основа в яркой гамме, а под категорий в светлом формате.



HTML

Код
<div class="dropdown-wrap">
    <div class="dropdown">
        <input type="checkbox" />
            <a href="#" data-toggle="dropdown">Dropdown One</a>
    
            <ul class="dropdown-menu">
                <li><a href="">Option One</a></li>
                <li><a href="#">Option Two</a></li>
                <li><a href="#">Option Three</a></li>
            </ul>
      </div>
    
        <div class="dropdown">
        <input type="checkbox" />
            <a href="#" data-toggle="dropdown">Dropdown Two</a>
    
            <ul class="dropdown-menu">
                <li><a href="">Option One</a></li>
                <li><a href="#">Option Two</a></li>
                <li><a href="#">Option Three</a></li>
            </ul>
    </div>
    
        <div class="dropdown">
        <input type="checkbox" />
            <a href="#" data-toggle="dropdown">Dropdown Three</a>
    
            <ul class="dropdown-menu">
                <li><a href="">Option One</a></li>
                <li><a href="#">Option Two</a></li>
                <li><a href="#">Option Three</a></li>
             </ul>
    </div>
</div>

CSS

Код
.dropdown-wrap {
  margin: 5%  auto;
    text-align: left;
    width: 550px;
}
.dropdown {
    border-bottom: 1px solid #eee;
    position: relative;
}
.dropdown:last-child {
    border: none;
}
.dropdown:before {
    color: #eee;
    content: "▴";
    position: absolute;
    right: 20px;
    top: 5px;
}
.dropdown:after {
    color: #eee;
    content: "▾";
    position: absolute;
    right: 20px;
    top: 15px;
}
.dropdown a {
  text-decoration: none;
}
.dropdown a {
    display: block;
    color: #f3ebeb;
    background: #af1b0c;
    font: 300 20px Lato, Arial Sans Serif;
    padding: 10px;
}
.dropdown > .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
}
.dropdown > .dropdown-menu li {
  border-bottom: 1px solid #ccc;
  padding: 0;
}
.dropdown > .dropdown-menu li a {
  display: block;
  color: #6e6e6e;
  background: #eee;
  padding: 10px 10px;
}
.dropdown-menu li:last-child {
    border: none;
}
.dropdown > .dropdown-menu li a:hover {
  background: #f6f6f6;
}
.dropdown > input[type="checkbox"] {
  left: 0;
  right: 0;
  opacity: 0;
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}
.dropdown > input[type="checkbox"]:checked ~ .dropdown-menu {
  max-height: 9999px;
  display: block;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-transition: max-height 2s ease-in-out;
  -o-transition: max-height 2s ease-in-out;
  -webkit-transition: max-height 2s ease-in-out;
  transition: max-height 2s ease-in-out;
  z-index: 1;
}

.button {
    color: #00b4ff;
    border: 1px solid #00b4ff;
    display: inline-block;
    font-size: 1.2em;
    margin: 30px;
    overflow: hidden;
    padding: 1% 3%;
    position: relative;

    -webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;

    z-index: 1;
}

.button:after {
    background-color: #00b4ff;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;

    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);

    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;

    width: 100%;
    z-index: -1;
}

.button:hover {
    color: #fff;
}
.button:hover:after {
    height: 1000%;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }

  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }

  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }

  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

Установка завершена!

Демонстрация
Прикрепления: 8544576.png(14.9 Kb) · dropdown-menu-c.zip(4.9 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Многоуровневое выпадающее меню на HTML + CSS (Как сделать многоуровневое вертикальное меню accordion сайта)
  • Страница 1 из 1
  • 1
Поиск: