ちょっとかっこいいサイトのMENUを再現してみました

MONO AIRのMENUの出し方が、
ちょっとしたことですが、かっこいいと思ったので、
再現してみました。

少しだけ拡大されながらフェードで出てくるという、仕組み自体は簡単なものです。

↓MENUを再現してみたもの
DEMO

方法

画面いっぱいのメニューを準備しておいて、
開く前はtransformのscaleを0.9くらいにしておいて、
開いた後でscaleを1にすることで、再現できました。

HTML


&lt;header&gt;
  &lt;h1&gt;CLICK MENU!!→&lt;/h1&gt;
  &lt;p class="menu"&gt;&lt;a href="#"&gt;&lt;span class="icon"&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="label"&gt;MENU&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/header&gt;
&lt;div class="bg-nav"&gt;&lt;/div&gt;
&lt;nav&gt;
  &lt;div class="wrapper-nav"&gt;
    &lt;h2&gt;MENU&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;CONCEPT&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;ACCESS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<h1>CLICK MENU!!→</h1>

</header>

<nav>

<ul>

<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


.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に
}

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


$(function() {
  $(".menu").click(function() {
    $("body").toggleClass("navOpened");
    return false;
  });
})

1

2

3

4

5

6

$(function() {

$(".menu").click(function() {

$("body").toggleClass("navOpened");

return false;

});

})

使う機会があったら、使ってみたいです。

css3 jQuery デザイナー

WRITER

ninomiya

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

この著者の記事を見る

PREVマッチングサイトを作るならosclassで NEXTライセンスに関する備忘録

ちょっとかっこいいサイトのMENUを再現してみました

方法

HTML

CSS

jQuery

Related