Различных менюшек очень много, но вот меню в виде блокнотика я не встречал ни разу.
Возможно кому-то понравится такая идея.
Принадлежит она сайту CSS-LIVE, моя скромная заслуга лишь в том, что я переделал её под CMS, изменил размеры под страницу сайта и максимально возможно сократил код.
Возможно для некоторых версий старых браузеров, особенно IE, потребуются вендорные префиксы.
Ещё можно уменьшить меню задав ему масштаб свойством transform: scale(); где в скобках вставляется число от 0 до 1, где 1 — полный размер.
Код:
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. Горизонтальное и вертикальное;
Горизонтальное выпадающее меню в WordPress
Создание вертикального меню в WordPress
В раздел
Привет дружище. Спасибо что зашёл. В .nev-wrapper — это остатки моих экспериментов. ладно что указал, а то я удалить забыл. А размер шрифта меняется в .middle.
День добрый ! СУПЕР ! Уже сейчас использую. И где же ты нашел. Оригинально.!
о вот в .nev-wrapper { не смог изменить размер шрифта, не реагирует?
Вот тут посмотрите. Там в коде наглядно показано как в списке прописывается ссылка.
А как добавить ссылку на кнопку? куда прописать?