» »

Анимированное CSS меню для сайта

Анимированное CSS меню для сайта
Вашему вниманию анимированное меню вертикальном виде для блогов и сайтов, которое выстроено на чистом CSS, где при клике раскрываются категорий. В этой статье мы увидим, как создать вертикальную строку меню, используя HTML и CSS. Сценарий почти такой же, как горизонтальная строка меню.Так как сам это меню ставил, могу сказать по дизайну смотрится красиво и на любом темном дизайн сайте оно будит шикарно выглядит.

Приступаем к установке.
В блок вашего сайта, куда решать вам.



Установка:

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>

CSS

Код
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;
  }

Демонстрация
2012-04-16 Просмотров: 1719 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 3
AnTron
AnTron 2015-12-25 15:561
-1
Уже было такое меню, и уже также сказано, оно с игрового сайта.
Марковичь
Марковичь 2015-12-25 16:092
-1
Даже не помню чтоб на этом сайте это меню стояло, но там всегда оригинальная навигация стоит.
Kvint
Kvint 2015-12-25 16:313
-1
Что то не припомню, чтоб там такое меню стояло.
avatar