ちょっとかっこいいサイトのMENUを再現してみました
MONO AIRのMENUの出し方が、
ちょっとしたことですが、かっこいいと思ったので、
再現してみました。
少しだけ拡大されながらフェードで出てくるという、仕組み自体は簡単なものです。
↓MENUを再現してみたもの
DEMO
方法
画面いっぱいのメニューを準備しておいて、
開く前はtransformのscaleを0.9くらいにしておいて、
開いた後でscaleを1にすることで、再現できました。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <header> <h1>CLICK MENU!!→</h1> <p class="menu"><a href="#"><span class="icon"><span></span><span></span><span></span></span><span class="label">MENU</span></a></p> </header> <div class="bg-nav"></div> <nav> <div class="wrapper-nav"> <h2>MENU</h2> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">CONCEPT</a></li> <li><a href="#">ACCESS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </nav> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | .bg-nav { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); color: #fff position: absolute; top: 0; left: 0; z-index: 1; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); //scaleを0.9にしておく -ms-transition: all 0.4s; transition: all 0.4s; visibility: hidden; opacity: 0; -ms-transition: all 0.4s; transition: all 0.4s; } nav { padding: 20px; border: solid 2px #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.9); -ms-transform: translate(-50%, -50%) scale(0.9); transform: translate(-50%, -50%) scale(0.9); //scaleを0.9にしておく z-index: 2; visibility: hidden; opacity: 0; -ms-transition: all 0.4s; transition: all 0.4s; } body.navOpened .bg-nav, body.navOpened nav { visibility: visible; opacity: 1; } body.navOpened .bg-nav { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scalef(1); //scaleを1に } body.navOpened nav { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: -translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); //scaleを1に } |
jQuery
|
1 2 3 4 5 6 | $(function() { $(".menu").click(function() { $("body").toggleClass("navOpened"); return false; }); }) |
使う機会があったら、使ってみたいです。
Author Profile
SHARE
