Jaz,
самое простое продублировать секцию /* Effect 11: Scale and rotate pusher */ в component.css заменив 11 на скажем 500
было
/* Effect 11: Scale and rotate pusher */
.st-effect-11.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.st-effect-11 .st-pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-11.st-menu-open .st-pusher {
-webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}
.st-effect-11.st-menu {
opacity: 1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-11.st-menu-open .st-effect-11.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-11.st-menu::after {
display: none;
}
стало
/* Effect 11: Scale and rotate pusher */
.st-effect-11.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.st-effect-11 .st-pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-11.st-menu-open .st-pusher {
-webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}
.st-effect-11.st-menu {
opacity: 1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-11.st-menu-open .st-effect-11.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-11.st-menu::after {
display: none;
}
/* Effect 500: Scale and rotate pusher */
.st-effect-500.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.st-effect-500 .st-pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-500.st-menu-open .st-pusher {
-webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}
.st-effect-500.st-menu {
opacity: 1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-500.st-menu-open .st-effect-500.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-500.st-menu::after {
display: none;
}
было
<a class="st-effect" data-effect="st-effect-11" href="#3">Ссылка 1</a>
<a class="st-effect" data-effect="st-effect-11" href="#5">Ссылка 2</a>
стало
<a class="st-effect" data-effect="st-effect-11" href="#3">Ссылка 1</a>
<a class="st-effect" data-effect="st-effect-500" href="#5">Ссылка 2</a>
было
<nav class="st-menu st-effect-11" id="menu-9">
<nav class="st-menu st-effect-11" id="menu-9">
стало
<nav class="st-menu st-effect-11" id="menu-9">
<nav class="st-menu st-effect-500" id="menu-9">