【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; };
これで動くと思います。
簡単に実装できて、気持ちいいメニューの動きを実装できます。
デモサイトでは、ページ内リンクをやってみてますが、
いろいろと活用できそうです。