Красивое меню CSS

Различных менюшек очень много, но вот меню в виде блокнотика я не встречал ни разу.

Возможно кому-то понравится такая идея.

Принадлежит она сайту CSS-LIVE, моя скромная заслуга лишь в том, что я переделал её под CMS, изменил размеры под страницу сайта и максимально возможно сократил код.

Возможно для некоторых версий старых браузеров, особенно IE, потребуются вендорные префиксы.

Ещё можно уменьшить меню задав ему масштаб свойством transform: scale(); где в скобках вставляется число от 0 до 1, где 1 — полный размер.

  • HTML основы
  • CSS основы
  • PHP основы
  • Анимация
  • WordPress
  • Заработок

Код:

CSS
.nev-wrapper {
  font-family: Lato, Sans-serif
  background: #fff;
  margin: 0;
  width: 500px;
  height: 500px;
  padding: 10px;
  perspective: 1500px;
}
.nev-menu {
  margin: 200px auto;
  position: relative;
  background: #62278d;
  background: linear-gradient(to bottom,  hsl(110, 90%, 50%) 0%, hsl(20, 90%, 40%) 40%);
  width: 300px;
  height: 350px;
  border-width: 20px 0;
  border-style: solid;
  border-color: #fff;
  color: #fff;
  transform-style: preserve-3d;
  box-shadow: 0 0 20px 0 #444;
  transform: translateY(-160px) rotateX(35deg) rotateZ(35deg);
}
.nev-menu:before {
  content: '';
  position: absolute;
  height: 30px;
  width: 300px;
  top: 370px;
  left: 0px;
  transform: rotateX(90deg) translateY(-15px) translateZ(15px);
  background: #fff;
}
.nev-menu:after {
  content: '';
  position: absolute;
  height: 350px;
  width: 30px;
  top: -20px;
  right: -30px;
  transform: rotateY(90deg) translateZ(-15px) translateX(15px);
  border-width: 20px 0;
  border-style: solid;
  border-color: #fff;
  background: #fff;
}
.nev-top {
  padding: 15px 0px 15px 20px;
  width: 100%;
}

.middle {
  position: relative;
  min-height: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 20px;
  transform-style: preserve-3d;
}
.book {
  margin: 0;
  padding: 15px 0 15px 40px;
  outline: 0 none;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(1px);
  z-index: 1;
}
.book:hover {
  box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.menu-back {
  position: absolute;
  background: transparent;
  top: -30px;
  left: 0;
  width: 300px;
  height: 360px;
  transform: translateZ(-29px);
  box-shadow: 70px 70px 50px -20px #555;
}
HTML

<div class="nev-wrapper">
  <div class="nev-menu">
    <div class="nev-top">    
    </div>
    <ul class="middle">
      <li class="book">HTML основы</li>
	  <li class="book">CSS основы</li>
	  <li class="book">PHP основы</li>
	  <li class="book">Анимация</li>
	  <li class="book">WordPress</li>
	  <li class="book">Заработок</li>

    </ul>
   <div class="menu-back"></div>
  </div>  
  </div>

Желаю творческих успехов.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

4 комментария на «Красивое меню CSS»

  1. stariс говорит:

    Привет дружище. Спасибо что зашёл. В .nev-wrapper — это остатки моих экспериментов. ладно что указал, а то я удалить забыл. А размер шрифта меняется в .middle.

  2. Юрий говорит:

    День добрый ! СУПЕР ! Уже сейчас использую. И где же ты нашел. Оригинально.!
    о вот в .nev-wrapper { не смог изменить размер шрифта, не реагирует?

  3. stariс говорит:

    Вот тут посмотрите. Там в коде наглядно показано как в списке прописывается ссылка.

  4. Владислав говорит:

    А как добавить ссылку на кнопку? куда прописать?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *