CSS
続いてCSSで、bodyとナビゲーションバーを装飾します。
bodyに基本的なスタイリングを施し、背景画像を設定しましょう。
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
background: url('images/bg-final.jpg') no-repeat;
background-position: 50% 10%;
background-size: cover;
font-family: 'Montserrat', sans-serif;
}
これでbodyのスタイリングが完了です！
次にナビゲーションバーに移りましょう。90px height、100% widthに設定し、display flexのjustify-contentプロパティをspace-betweenにします。
こうすることで、2つの要素のうち1つは画面左側に、もう1つは画面右側に表示されます。サインインボタンのスタイリングも忘れずに行いましょう。
.navbar {
height: 90px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
}
.navbar-buttons {
position: relative;
width: 155px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Sing In Button */
.button {
background-color: rgba(44, 45, 47, 0.749);
width: 97px;
height: 30px;
font-size: 12px;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
}
ナビゲーションバーのスタイリングができました！
ここからは少し難易度を上げて、オーバーレイメニューをスタイリングしていきましょう。
.overlay {
position: fixed;
background: rgba(51, 55, 69, 0.80);
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: 1;
visibility: visible;
height: 100%;
}
divタグクラス.overlayには、overflow: hiddenとposition: fixedを設定する必要があります。トランジションを追加し、オーバーレイ時におしゃれな効果を追加しましょう。
メニューをクリックしたらフルスクリーンのオーバーレイを出すようにしたいので、ポジションは固定し、幅と高さは100%に設定しましょう。上と左の位置は0にし、スクリーン全体が覆われるように設定します。
続く2行は、状態を変化させるCSSです。.overlayにはopacity: 0とvisibility: hiddenを設定します。
なお.openクラスが適用されると、不透明度がMAXで表示されるよう設定します。
次に基本的なCSSで、ナビゲーションタイトルとメニューアイテムをスタイリングしていきましょう。
.overlay .nav-title {
font-size: 22px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%);
top: 8%;
}
.overlay nav {
position: relative;
height: 50%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
letter-spacing: 40px;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
position: relative;
opacity: 0;
margin-bottom: 50px;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
続いてメニューアイテムと、ページ上のボタンすべてに、ホバー効果を追加しましょう。
メニューアイテムにマウスを合わせると、中央にラインが現れ、フォーカスされ、リンクが有効になるように設定します。なお、ここでは疑似要素を使います。
.overlay ul li a:after {
content: '';
position: absolute;
top: 50%;
left: 43.5%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
.overlay ul li a:hover,
.overlay ul li a:focus,
.overlay ul li a:active {
color: #ea2e49;
}
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
width: 100%;
background: #ea2e49;
}
また.openクラスが適用された時に、右からのフェードイン効果が出るようにします。
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
すごくクールなナビゲーションメニューになりましたね！
さらに他のボタンにも、ホバー時のアニメーション効果を与えましょう。
button:focus {
outline:0;
}
.open-menu,
.close-menu,
.button {
cursor: pointer;
transition: transform 0.30s;
}
.open-menu:hover,
.close-menu:hover,
.button:hover {
transform: scale(1.1);
}
ナビゲーションバーのボタンと閉じるボタンも、ホバー時に少し大きさが変わるようになりました。
最後に、CSSをレスポンシブ対応させましょう。
@media (max-width: 670px) {
.overlay nav {
font-size: 30px;
}
}
@media (max-width: 550px) {
.overlay nav {
font-size: 20px;
}
}
jQuery
CSSでのスタイリングは完了しました。
最後に、オーバーレイメニューを開く時のクリックイベントを追加しましょう。
このタイプの動作に最適なjQueryを使い、以下のようにコードを書きます。
$(document).ready(function() {
$('.open-menu').on('click', function() {
$('.overlay').addClass('open');
});
$('.close-menu').on('click', function() {
$('.overlay').removeClass('open');
});
});
フルスクリーンナビゲーションメニュー完成！
おしゃれなフルスクリーンナビゲーションメニューが完成しました！
この記事で紹介したコードを参考に、ぜひオリジナルのフルスクリーンナビゲーションメニューを作ってみてください。
執筆：Raul Dronca
翻訳：Tamura Yui
編集：内田一良（じきるう）
