Разработка - Анимированное меню аккордеон | Все для вебмастера

Пишем код HTML:

HTML:

<div class="wrapper">
  <nav class="vertical">
    <ul>
      <li>
        <label for="home">Home</label>
        <input type="radio" name="verticalMenu" id="home" />
        <div>
          <ul>
            <li><a href="#">Index</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Corporate</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </li>
      <li>
        <label for="blog">Blog</label>
        <input type="radio" name="verticalMenu" id="blog" />
        <div>
          <ul>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Tutorials</a></li>
          </ul>
        </div>
      </li>
      <li>
        <label for="work">Work</label>
        <input type="radio" name="verticalMenu" id="work" />
        <div>
          <ul>
            <li><a href="#">Client Login</a></li>
            <li><a href="#">Get Quote</a></li>
            <li><a href="#">Portfolio</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</div>

Пишем стиль для него:

CSS:

* {
    margin: 0;
    padding: 0;
    outline: none;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: #eee;
    color: #444;
    -webkit-font-smoothing: antialiased;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 400;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    text-rendering: optimizeLegibility
}

div.wrapper {
    margin: 20px auto;
    width: 350px;
}

p {
    font-family: georgia;
    font-size: 1rem;
    line-height: 25px;
    margin: 24px 0;
    text-align: center;
}

nav.vertical {
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    overflow: hidden;
    text-align: center;
}

nav.vertical > ul {
    list-style-type: none;
}

nav.vertical > ul > li {
    display: block;
}

nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
    background-color: rgb(157, 34, 60);
    background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
    background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
    background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
    background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
    color: rgb(255,255,255);
    display: block;
    font-size: .85rem;
    font-weight: 500;
    height: 50px;
    letter-spacing: .5rem;
    line-height: 50px;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
    text-transform: uppercase;
    transition: all .1s ease;
}

nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
    background-color: rgb(114, 51, 98);
    background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
    background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
    background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
    background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
    cursor: pointer;
}

nav.vertical > ul > li > label + input {
    display: none;
    visability: hidden;
}

nav.vertical > ul > li > div {
    background-color: rgb(255,255,255);
    max-height: 0;
    overflow: hidden;
    transition: all .5s linear;
}

nav.vertical > ul > li > label + input:checked + div {
    max-height: 500px;
}

nav.vertical > ul > li > div > ul {
    list-style-type: none;
}

nav.vertical > ul > li > div > ul > li > a {
    background-color: rgb(255,255,255);
    border-bottom: 1px solid rgba(0,0,0,.05);
    color: #333331;
    display: block;
    font-size: 1.1rem;
    padding: 10px 0;
    text-decoration: none;
    transition: all 0.15s linear;
}

nav.vertical > ul > li > div > ul > li:hover > a {
    background-color: lightBlue;
    color: rgb(255,255,255);
    padding: 10px 0 10px 50px;
}

Получаем такой результат:

Реакции: Goldcs и alex54

Разработка Анимированное меню аккордеон

Ещё ресурсы от baltun

Последние отзывы