1
Я хочу сделать навигационное меню, которое разворачивается, как бумага, используя только CSS, и выглядит примерно так: http://felixniklas.com/paperfold/, поскольку в основном используется CSS для создания эффекта перехода.Как сделать меню сбрасывать как бумагу с помощью CSS?
К сожалению, эффект, который я получаю, все еще не так хорош, это примерно так: https://jsfiddle.net/yaharga/7z2rg8gk/. Есть пробелы, и li не склеиваются. В идеале я хотел бы показать эффект в подменю.
Я суммированы код, чтобы показать перехода и трансформации CSS участвуют:
// Nav Button Toggle
jQuery('.dropdown-toggle').on('click', function() {
jQuery(this).toggleClass('active');
});.dropdown-toggle {
color: #ecf0f1;
padding: 12px 0;
}
.dropdown-toggle.acitve {
color: #bdc3c7
}
.toggleable {
-webkit-transition: max-height .75s ease-in-out, -webkit-transform .75s ease-in-out, visibility .75s ease-in-out;
transition: max-height .75s ease-in-out, transform .75s ease-in-out, visibility .75s ease-in-out;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-perspective: 320px;
perspective: 320px;
-webkit-transform: scaleY(0);
transform: scaleY(0);
list-style: none;
position: relative;
margin: 0;
padding: 0
}
.dropdown-toggle.active+.toggleable {
visibility: visible;
max-height: 1200px;
-webkit-transform: scaleY(1);
transform: scaleY(1)
}
.nav-primary {
margin: 30px 10px;
text-align: center;
position: relative
}
#menu-main-toggle {
border: 0;
background-color: #e74c3c;
width: 100%;
border-bottom: 1px dashed #c0392b;
}
#menu-main {
width: 100%;
position: absolute
}
#menu-main,
.toggleable {
position: relative
}
.dropdown-toggle,
.menu-item {
background: #e74c3c
}
.menu-item {
border-top: 1px dashed #c0392b;
transition: transform .75s ease-in-out;
}
.dropdown-toggle.active + #menu-main .menu-item {
transform: rotateX(0deg);
}
.odd {
transform: rotateX(-90deg);
}
.even {
transform: rotateX(90deg);
}
.menu-item.first {
border-top: none
}
.menu-link {
display: block;
padding: 12px 0;
color: #ecf0f1
}
.menu-link:active {
color: #fbfcfc
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<nav class="nav-primary">
<button id="menu-main-toggle" class="dropdown-toggle">Menu</button>
<ul id="menu-main" class="nav toggleable hide">
<li class="odd first menu-item"><a class="menu-link" href="//localhost:3000/index.php/about/">About</a></li>
<li class="even menu-item"><a class="menu-link" href="/index.php/category/bahrain/">Bahrain</a></li>
<li class="odd menu-item parent"><a class="menu-link" href="/index.php/category/information-technology/">Information Technology</a>
</li>
<li class="even menu-item"><a class="menu-link" href="/index.php/category/snippets/">Snippets</a></li>
<li class="odd last menu-item"><a class="menu-link" href="//localhost:3000/index.php/contact/">Contact</a></li>
</ul>
</nav>
У меня нет времени, чтобы развить полный ответ прямо сейчас, но вот что-то, что я сделал на кодедине некоторое время назад, которое близко к тому, что вы хотите: http://codepen.io/wbarlow/pen/obWqEZ. во всяком случае, может быть достаточно, чтобы вы начали. –
Paperfold - это лицензия MIT и может быть свободно использована с авторством. Исходный код находится на GitHub, чтобы вы могли точно видеть, как они выполняют эффект (менее 300 строк). Вы уже полагаетесь на jQuery в вашем примере; почему бы не использовать Paperfold и попытаться добавить в свои подменю? – Sam
@Sam Я бы предпочел использовать таблицу стилей вместо использования jQuery для создания встроенных стилей. В любом случае, он использует CSS для анимации. Это было бы излишним, если бы я включил его вместо того, чтобы реализовать эффект сам. – yaharga