llc.beReady

Art × Web Design

カスタマイズ

コピペで簡単!レスポンシブ対応の固定ヘッダーナビ作成!

豊田、刈谷、知立、安城でホームページ制作をやっている合同会社beReadyの奥山です!

僕は基本的に寝るときはエアコンをつけていないのですが、さすがに暑いので竹マットを敷いて寝ています。
寝返りうつたびにひんやりとして、かなり体温下がります。あとは熱さまシートの枕のやつですね。
あれも体がじんわり冷えていくのが体感できて、おすすめです。

というわけで今回はヘッダーのグローバルメニューのレスポンシブ対応をコピペで使えるコードと解説を行っていきたいと思います!
結構時間かかりました!!笑
ぜひ見ていってください。

レスポンシブなヘッダーグローバルメニュー

最近かなり多く見かけるパララックスコンテンツのウェブサイトではほぼ必ず必要になるのが、レスポンシブなヘッダーグローバルメニューです。

スクロールさせることでかっこよくコンテンツを見せていくので、スクロールされたときにどのような表示がされるのかが重要になってきます。

また、スマホやタブレットでみたときも、レスポンシブ対応されていなければ、かなり見にくくなってしまうので、レスポンシブ化は必須です。

というわけで、今回僕が作ったヘッダーグローバルメニューがありますので、まずはデモページをご覧ください。
ウェブブラウザの幅を変更するとハンバーガーボタンのあるスマホグローバルメニューに変化しますので、試してみてください。

デモページ

今回製作したものは、スクロールが250pxされると固定化されたヘッダーメニューが現れるというものになっていて、スマホではハンバーガーボタンを押すことで、メニューが出現し、ハンバーガーボタンはバツボタンに変わるようになっています。

では次にこのコードを確認していきましょう。

htmlコード

[html]


[/html]

headerタグの中にinnerを設けてその中に、”mobile-head”と”global-nav”の二つを入れています。
mobile-headはスマホで表示したときのヘッダー部分になります。
global-navはそのままで実際に表示したいグローバルナビのメニューを記述しています。

WordPressで使用したい場合は、

[php]


[/php]

ナビ部分をこれに変えてもらえれば、WordPressのカスタムメニューをレスポンシブ対応させることができます。

“nav-toggle”という部分がハンバーガーボタンになってて、これをCSSでバツボタンに変形させています。
では続いてCSSを見ていきましょう。

CSS

[css]
.inner {
width: 980px;
margin: 0 auto;
position: relative;
}

.inner:after {
content:””;
clear: both;
display: block;
}

/*——–header———–*/

#top-head {
top: -100px;
position: absolute;
width: 100%;
margin: 100px auto 0;
padding: 30px 0 0;
line-height: 1;
z-index: 999;
}

#top-head a,
#top-head {
color: #fff;
text-decoration: none;
}

#top-head .inner {
position: relative;
}
#top-head .logo {
float: left;
position: relative;
font-size: 36px;
height: 50px;
}

#top-head .logo a {
position: absolute;
width: 100%;
height: 50px;
}

#global-nav ul {
list-style: none;
position: absolute;
top: 20px;
right: 0;
font-size: 14px;
}
#global-nav ul li {
float: left;
padding:0 30px;
border-left: 1px solid #000;
}
#global-nav ul li a {
padding: 5px 5px;
position: relative;
display: inline-block;
}

#global-nav ul li a::after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: #fff;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}

#global-nav ul li a:hover::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}

nav span{
background:#666;
height:2px;
display:block;
position:relative;
width:50px;
left:0;
}

/*——–固定化されたときのCSS———–*/

#top-head.fixed {
margin-top: 0;
top: 0;
position: fixed;
padding-top: 10px;
background: #fff;
background: rgba(255,255,255,.7);
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
}

#top-head.fixed .logo {
position: relative;
font-size: 24px;
color: #333;
}

#top-head.fixed .logo a {
position: absolute;
width: 100%;
height: 30px;

}
#top-head.fixed #global-nav ul li a {
color: #333;
padding: 0 20px;
padding-bottom: 10px;
}

/*———–スマホのトグルボタンのCSS————-*/

#nav-toggle {
display: none;
position: absolute;
right: 12px;
top: 14px;
width: 34px;
height: 36px;
cursor: pointer;
z-index: 101;
}
#nav-toggle div {
position: relative;
}
#nav-toggle span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #000;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 11px;
}
#nav-toggle span:nth-child(3) {
top: 22px;
}

/*———gnav sp————–*/
/*———–スマホ————-*/
@media screen and (max-width: 767px) {
.head-inner {
display: none;
}

.slick-next {
right: 0;
}

#top-head,
.inner {
width: 100%;
padding: 0;
}
#top-head {
top: 0;
position: fixed;
margin-top: 0;
}
/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
background: #fff;
width: 100%;
height: 56px;
z-index: 999;
position: relative;
}
#top-head.fixed .logo,
#top-head .logo {
position: absolute;
left: 13px;
height: 50px;
top: 15px;
color: #333;
font-size: 26px;
}
#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -500px;
background: #000;
width: 100%;
text-align: center;
padding: 10px 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#global-nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 14px;
}
#global-nav ul li {
float: none;
position: static;
padding: 18px 0;
color: #fff;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #fff;
padding: 18px 0;
}
#nav-toggle {
display: block;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
}

/*————タブレット用——————*/

@media screen and (max-width: 1024px) {
.head-inner {
display: none;
}

.slick-next {
right: 0;
}

#top-head,
.inner {
width: 100%;
padding: 0;
}
#top-head {
top: 0;
position: fixed;
margin-top: 0;
}
/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
background: #fff;
width: 100%;
height: 70px;
z-index: 999;
position: relative;
}
#top-head.fixed .logo,
#top-head .logo {
position: absolute;
left: 13px;
height: 50px;
top: 15px;
color: #333;
font-size: 26px;
}
#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -500px;
background: #000;
width: 100%;
text-align: center;
padding: 10px 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#global-nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 14px;
}
#global-nav ul li {
float: none;
position: static;
padding: 18px 0;
color: #fff;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #fff;
padding: 18px 0;
}
#nav-toggle {
display: block;
right: 25px;
top: 20px;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}

}

[/css]

うっわ〜〜長いな笑
まあしょうがないですね、結構いろんな動きを実装しているので少し長いのはご容赦ください。

ということで見ていきましょう。

まず今回は入れていませんが、ヘッダー左側にロゴを入れられるようにしています。
h1の部分なのですが、そのCSSも書いてあります。

15行目のtop-headがtop:-100px;となっていることにお気づきでしょうか。
これがスクロールしたときにヘッダーメニューが固定化されて表示されるときの肝となっています。

実はヘッダー部分は本当は画面外に配置されているのですが、それをmarginを使って画面内に無理やり入れ込んでいます。

これをのちに書きますが、jQueryで画面が250pxスクロールされたときにfixedというCSSを追加するように設定しています。

98行目でfixedが追加されたtop-headはtop:0px;に指定されており、最初は-100pxの画面外にいた、ヘッダーメニューが下に移動してくることで、上からヘッダーメニューが降りてきているように見せています。

このときにtransitionをかけて、時間をかけて降りてこさせていて、少しカッコ良く見せています。

ハンバーガーボタンはpc画面ではdisplay:none;で非表示にしており、
スマホのときにdisplay: block;で表示してあります。

ハンバーガーボタンをバツボタンに変形

ハンバーガーボタンをバツボタンにするCSSをピックアップしてみてみましょう。
上記の349行目からの記述になっています。

[css]
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
[/css]

ハンバーガーボタンはspanで表現されており、
1本目、2本目、3本目の動きを表現しています。

1本目は
transformで変形させていくのですが、rotateは回転させるということです。
degは何度回転させるかということで、315degだと、1回転ちょい回転させています。

2本目はleft: 50%;で横にずらしてから、
width:0;つまり非表示にしています。

3本目も1本目と同じでtransformしていますが、-315degなので逆回転になっています。

こうすることで、3本の棒が回転しながらバツに変わっていきます。

ボタンを押して、グローバルメニューが出現

これも理屈自体は簡単です。元からグローバルメニューは-500pxの位置に配置されており、画面外にあります。

これをハンバーガーボタンを押すことをトリガーとして、translateYで556px下に移動させています。
これにより、上から出現しているように見せています。

jQueryコード

jQueryが一番記述量が少ないかもしれません。

[html]

[/html]

まず最初の記述で、画面が250pxスクロールされたら、top-headに対して、fixedというクラスを追加します、逆の場合はfixedを外します、ということを書いています。

次が、ハンバーガーボタンについてですね。

#nav-toggleがクリックされたら、openというクラスを追加しますよという記述です。

これでお分かりかと思いますが、ほとんどCSSで記述しているんですね。

おわりに

やはりヘッダーメニューをレスポンシブにするというのは結構いっぱい書かなければいけないんですね笑
CSS3になってからはかなり便利になりましたが、今回もjQueryはaddClassにしか使用していません。
ほとんどの挙動はCSSで行っているので、結構楽ではあると思います。jQueryのほうがなんか分かりにくいですから笑。

はあー疲れた!!それではまた!!

LEAVE A REPLY

*
*
* (公開されません)