【jQuery】上から出てくる3Dメニュー-3D Rotating Navigationの使い方-
ハンバーガーメニューをクリックすると、上から3Dの動きでメニューが出てきます。
メニューを選択すると自動でメニューが閉じるので、
ページ内リンクでもいい感じの動きになります。
3Dの開閉の動きが気持ちいいです。
ダウンロード
以下サイトのダウンロードボタンより、ファイル一式をダウンロードします。
3D Rotating Navigation
HTML
メニューを以下のような構造にします。
<header class="cd-header"> <!-- ハンバーガーメニューになるところ --> <a href="#0" class="cd-3d-nav-trigger"> Menu <span></span> </a> </header> <!-- .cd-header --> <!-- ナビゲーション --> <nav class="cd-3d-nav-container"> <ul class="cd-3d-nav"> <li class="cd-selected"><a href="#sec1">home</a></li> <li><a href="#sec2">about</a></li> <li><a href="#sec3">works</a></li> <li><a href="#sec4">gallery</a></li> <li><a href="#sec5">contact</a></li> </ul> <!-- .cd-3d-nav --> <span class="cd-marker color-1"></span> </nav> <!-- .cd-3d-nav-container -->
CSS
リセットで以下の記述を書いておきます。
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
margin: 0;
}
a {
text-decoration: none; }
li {
list-style: none;
}
ul {
margin: 0;
padding: 0;
}
ダウンロードしたファイル内にあるstyle.cssに書かれている。
Main Components 以下をCSSに追記します。
.cd-header {
height: 80px;
width: 90%;
margin: 0 auto;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.cd-header:after {
content: "";
display: table;
clear: both; }
.cd-header.nav-is-visible {
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-ms-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px); }
@media only screen and (min-width: 768px) {
.cd-header.nav-is-visible {
-webkit-transform: translateY(170px);
-moz-transform: translateY(170px);
-ms-transform: translateY(170px);
-o-transform: translateY(170px);
transform: translateY(170px); } }
.cd-logo {
float: left;
margin-top: 28px; }
.cd-3d-nav-trigger {
position: relative;
float: right;
height: 45px;
width: 45px;
margin-top: 18px;
/* replace text with background image */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
color: transparent; }
.cd-3d-nav-trigger span,
.cd-3d-nav-trigger span::before,
.cd-3d-nav-trigger span::after {
/* hamburger icon in CSS */
position: absolute;
width: 28px;
height: 3px;
background-color: #FFF;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.cd-3d-nav-trigger span {
/* this is the central line */
top: 21px;
left: 8px;
-webkit-transition: background 0.2s 0.5s;
-moz-transition: background 0.2s 0.5s;
transition: background 0.2s 0.5s; }
.cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span:after {
/* these are the upper and lower lines */
content: '';
left: 0;
-webkit-transition: -webkit-transform 0.2s 0.5s;
-moz-transition: -moz-transform 0.2s 0.5s;
transition: transform 0.2s 0.5s; }
.cd-3d-nav-trigger span::before {
bottom: 8px; }
.cd-3d-nav-trigger span::after {
top: 8px; }
.nav-is-visible .cd-3d-nav-trigger span {
/* hide line in the center */
background-color: rgba(255, 255, 255, 0); }
.nav-is-visible .cd-3d-nav-trigger span::before, .nav-is-visible .cd-3d-nav-trigger span::after {
/* keep visible other 2 lines */
background-color: white; }
.nav-is-visible .cd-3d-nav-trigger span::before {
-webkit-transform: translateY(8px) rotate(-45deg);
-moz-transform: translateY(8px) rotate(-45deg);
-ms-transform: translateY(8px) rotate(-45deg);
-o-transform: translateY(8px) rotate(-45deg);
transform: translateY(8px) rotate(-45deg); }
.nav-is-visible .cd-3d-nav-trigger span::after {
-webkit-transform: translateY(-8px) rotate(45deg);
-moz-transform: translateY(-8px) rotate(45deg);
-ms-transform: translateY(-8px) rotate(45deg);
-o-transform: translateY(-8px) rotate(45deg);
transform: translateY(-8px) rotate(45deg); }
.cd-3d-nav-container {
/* this is the 3D navigation container */
position: fixed;
top: 0;
left: 0;
height: 80px;
width: 100%;
background-color: #000000;
visibility: hidden;
/* enable a 3D-space for children elements */
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
-moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
transition: transform 0.5s 0s, visibility 0s 0.5s; }
.cd-3d-nav-container.nav-is-visible {
visibility: visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.5s 0s, visibility 0.5s 0s;
-moz-transition: -moz-transform 0.5s 0s, visibility 0.5s 0s;
transition: transform 0.5s 0s, visibility 0.5s 0s; }
@media only screen and (min-width: 768px) {
.cd-3d-nav-container {
height: 170px; } }
.cd-3d-nav {
/* this is the 3D rotating navigation */
position: relative;
height: 100%;
background-color: #343c55;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-ms-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s; }
.cd-3d-nav::after {
/* menu dark cover layer - to enhance perspective effect */
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000000;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s 0s, visibility 0.5s 0s;
-moz-transition: opacity 0.5s 0s, visibility 0.5s 0s;
transition: opacity 0.5s 0s, visibility 0.5s 0s; }
.cd-3d-nav li {
height: 100%;
width: 20%;
float: left; }
.cd-3d-nav li:first-of-type a::before {
background-image: url(images/icon-1.svg); }
.cd-3d-nav li:nth-of-type(2) a::before {
background-image: url(images/icon-2.svg); }
.cd-3d-nav li:nth-of-type(3) a::before {
background-image: url(images/icon-3.svg); }
.cd-3d-nav li:nth-of-type(4) a::before {
background-image: url(images/icon-4.svg); }
.cd-3d-nav li:nth-of-type(5) a::before {
background-image: url(images/icon-5.svg); }
.cd-3d-nav a {
position: relative;
display: block;
height: 100%;
color: transparent;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s; }
.cd-3d-nav a::before {
/* navigation icons */
content: '';
height: 32px;
width: 32px;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: 32px 64px;
background-repeat: no-repeat;
background-position: 0 0; }
.no-touch .cd-3d-nav a:hover {
background-color: #2b3145; }
.cd-3d-nav .cd-selected a {
background-color: #212635; }
.no-touch .cd-3d-nav .cd-selected a:hover {
background-color: #212635; }
.cd-3d-nav .cd-selected a::before {
background-position: 0 -32px; }
.nav-is-visible .cd-3d-nav {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0); }
.nav-is-visible .cd-3d-nav::after {
/* menu cover layer - hide it when navigation is visible */
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s;
-moz-transition: opacity 0.5s 0s, visibility 0s 0.5s;
transition: opacity 0.5s 0s, visibility 0s 0.5s; }
@media only screen and (min-width: 768px) {
.cd-3d-nav a {
padding: 7.6em 1em 0;
color: #ffffff;
font-size: 1.3rem;
font-weight: 600;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* truncate text with ellipsis if too long */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.cd-3d-nav a::before {
top: 4.4em;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%); } }
.cd-marker {
/* line at the bottom of nav selected item */
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 20%;
background-color: currentColor;
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-ms-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: translateZ(0) rotateX(90deg);
-moz-transform: translateZ(0) rotateX(90deg);
-ms-transform: translateZ(0) rotateX(90deg);
-o-transform: translateZ(0) rotateX(90deg);
transform: translateZ(0) rotateX(90deg);
-webkit-transition: -webkit-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
-moz-transition: -moz-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
transition: transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; }
.cd-marker::before {
/* triangle at the bottom of nav selected item */
content: '';
position: absolute;
bottom: 3px;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
height: 0;
width: 0;
border: 10px solid transparent;
border-bottom-color: inherit; }
.nav-is-visible .cd-marker {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0); }
/* these are the colors of the markers - line + arrow */
.color-1 {
color: #9a57bd; }
.color-2 {
color: #c96aa4; }
.color-3 {
color: #d6915e; }
.color-4 {
color: #5397c7; }
.color-5 {
color: #77cd91; }
また、ハンバーガーメニューを固定にしたい場合は
以下を追加します。
header.cd-header {
position: fixed;
top: 0px;
right: 20px;
}
jQuery
jQueryには以下を追加します。
//toggle 3d navigation
$('.cd-3d-nav-trigger').on('click', function(){
toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
});
//select a new item from the 3d navigation
$('.cd-3d-nav').on('click', 'a', function(){
var selected = $(this);
selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
updateSelectedNav('close');
});
$(window).on('resize', function(){
window.requestAnimationFrame(updateSelectedNav);
});
function toggle3dBlock(addOrRemove) {
if(typeof(addOrRemove)==='undefined') addOrRemove = true;
$('.cd-header').toggleClass('nav-is-visible', addOrRemove);
$('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove);
$('main').toggleClass('nav-is-visible', addOrRemove).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//fix marker position when opening the menu (after a window resize)
addOrRemove && updateSelectedNav();
});
}
//this function update the .cd-marker position
function updateSelectedNav(type) {
var selectedItem = $('.cd-selected'),
selectedItemPosition = selectedItem.index() + 1,
leftPosition = selectedItem.offset().left,
backgroundColor = selectedItem.data('color'),
marker = $('.cd-marker');
marker.removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({
'left': leftPosition,
});
if( type == 'close') {
marker.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
toggle3dBlock(false);
});
}
}
$.fn.removeClassPrefix = function(prefix) {
this.each(function(i, el) {
var classes = el.className.split(" ").filter(function(c) {
return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = $.trim(classes.join(" "));
});
return this;
};
これで動くと思います。
簡単に実装できて、気持ちいいメニューの動きを実装できます。
デモサイトでは、ページ内リンクをやってみてますが、
いろいろと活用できそうです。
Tweet
Pocket