【jQuery+CSS3】レスポンシブ対応固定ナビゲーション(スマートフォン時は横スライドタイプ) | ちわまるチェリーのブログ

WEB DESIGN

  1. HOME
  2. WEB DESIGN
  3. 【jQuery+CSS3】レスポンシブ対応固定ナビゲーション(スマートフォン時は横スライドタイプ)

【jQuery+CSS3】レスポンシブ対応固定ナビゲーション(スマートフォン時は横スライドタイプ)

このサイトでも使用している、レスポンシブ対応固定ナビゲーションを紹介します。

スマートフォンサイズの横幅の時は横スライドタイプのナビゲーションになります。

 

DEMO

 

HTML

HTML
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
<header class="site_header">
<div class="h_inner cf">
<h1 class="h_logo">
<a href="#">LOGO</a>
</h1>
<div id="navToggle">
<div>
<span></span> <span></span> <span></span> <span>MENU</span>
</div>
</div>
<nav class="g_nav">
<div class="inner">
<p class="sp_logo">
<a href="logo">LOGO</a>
</p>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">WEB DESIGN</a></li>
<li><a href="#">TABLE TENNIS</a></li>
<li><a href="#">CHERRY</a></li>
<li><a href="#">OTHERS</a></li>
</ul>
</div>
<div class="overlay"></div>
</nav>
</div>
</header>

簡単に要素の説明すると以下のようになります。

  • .h_logo→全画面サイズ共通のロゴ
  • #navToggle→スマホ時のハンバーガーボタン
  • .g_nav→全画面サイズ共通のナビゲーション
  • .sp_logo→スマホ時にナビゲーションを開いたときのみ見えるロゴ

 

jQuery

jQuery
1
2
3
4
5
6
7
8
9
10
11
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#navToggle').click(function(){//headerに .openNav を付加・削除
        $('header').toggleClass('openNav');
    });
    $('.g_nav .overlay').click(function(){//headerから .openNav を・削除
        $('header').removeClass('openNav');
    });
});
</script>

jQueryのライブラリを読み込みは必須です。

#navToggleを押すことで、headerにopenNavのクラスを付加したり削除したりします。

また、ナビゲーションが開いている時に.overlayを押すことでheaderからopenNavのクラスを削除します。

jQueryではCSSのクラスの付加・削除のみを行います。

 

CSS

PC表示時

CSS
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
50
51
52
53
54
55
56
57
58
59
60
61
62
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
.site_header {
width: 100%;
position: fixed;
top: 0;
z-index: 10;
padding: 25px 0;
background-color: #fff;
}
.site_header {
width: 1000px;
margin: 0 auto;
}
.h_logo {
float: left;
font-weight: bold;
font-size: 20px;
}
.h_logo a {
color: #000;
text-decoration: none;
}
.g_nav {
float: right;
padding-top: 5px;
}
.g_nav li {
float: left;
margin-right: 20px;
}
.g_nav li:last-child {
margin-right: 0;
}
.g_nav li a {
color: #000;
text-decoration: none;
transition: color ease 0.4s;
-webkit-transition: color ease 0.4s;
-moz-transition: color ease 0.4s;
-o-transition: color ease 0.4s;
-ms-transition: color ease 0.4s;
}
.g_nav li:hover a,
.g_nav li.active a {
color: #ef1d59;
}
#navToggle {
display:none; /*通常時は非表示にしておきます*/
}
.g_nav .sp_logo{
display: none;
}

headerは画面追従に指定します。

#navToggleや.sp_logoなど、スマートフォン画面表示時のみの表示のものは非表示に設定しておきます。

 

タブレット表示時

CSS
CSS
1
2
3
4
5
@media screen and (max-width:999px){
.h_inner {
width: 96%;
}
}

.h_innerの横幅を左右に2%のマージンを取りつつ、可変にします。

 

スマートフォン表示時

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
@media screen and (max-width:639px){
.site_header {
position: static;
}
#navToggle {
display: block; /*通常時は非表示にしておきます*/
position: fixed; /*bodyに対しての絶対位置指定です*/
right: 0;
top: 10px;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 100;
background-color: #ce7291;
padding: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
transition: All ease 0.4s;
-webkit-transition: All ease 0.4s;
-moz-transition: All ease 0.4s;
-o-transition: All ease 0.4s;
-ms-transition: All ease 0.4s;
}
.openNav #navToggle {
right: 200px;
}
#navToggle div {
position: relative; /*spanの絶対位置指定の親にします*/
}
#navToggle span {
display: block;
position: absolute; /*#navToggle div に対して*/
width:100%;
border-bottom: 2px solid #fff;
transition: All ease-in-out 0.4s;
-webkit-transition: All ease-in-out 0.4s;
-moz-transition: All ease-in-out 0.4s;
-o-transition: All ease-in-out 0.4s;
-ms-transition: All ease-in-out 0.4s;
}
#navToggle span:nth-child(1) {
top: 0;
}
#navToggle span:nth-child(2) {
top: 8px;
}
#navToggle span:nth-child(3) {
top: 16px;
}
#navToggle span:nth-child(4) {
top: 23px;
border-bottom: none;
font-size: 10px;
letter-spacing: 0;
color: #fff;
}
/*最初のspanをマイナス45度に*/
.openNav #navToggle span:nth-child(1) {
top: 11px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
/*2番目と3番目のspanを45度に*/
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
top: 11px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.g_nav {
display: block;
margin-left: -2%;
flex: auto;
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100%;
box-sizing: border-box;
overflow: hidden;
padding-top: 0;
transition: All ease-in-out 0.4s;
-webkit-transition: All ease-in-out 0.4s;
-moz-transition: All ease-in-out 0.4s;
-o-transition: All ease-in-out 0.4s;
-ms-transition: All ease-in-out 0.4s;
}
/*header menu*/
/*.openNavが付いた要素の中のnavを 縦方向に351px移動（=表示される）*/
.openNav .g_nav {
z-index: 99;
width: 100%;
height: 100%;
}
.g_nav .overlay {
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
transition: All ease-in-out 0.4s;
-webkit-transition: All ease-in-out 0.4s;
-moz-transition: All ease-in-out 0.4s;
-o-transition: All ease-in-out 0.4s;
-ms-transition: All ease-in-out 0.4s;
}
.openNav .g_nav .overlay {
background: rgba(0,0,0,0.6);
}
.g_nav .inner {
width: 200px;
height: 100%;
background-color: #fff;
position: absolute;
right: -200px;
transition: All ease-in-out 0.4s;
-webkit-transition: All ease-in-out 0.4s;
-moz-transition: All ease-in-out 0.4s;
-o-transition: All ease-in-out 0.4s;
-ms-transition: All ease-in-out 0.4s;
}
.openNav .g_nav .inner {
right: 0;
}
.g_nav .sp_logo {
display: block;
padding: 20px 0;
font-weight: bold;
font-size: 20px;
text-align: center;
}
.g_nav .sp_logo a {
color: #000;
text-decoration: none;
}
.g_nav ul{
border-top: 1px solid #ccc;
border-bottom: 1px solid #efefef;
}
.g_nav ul li{
float: none;
margin: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #efefef;
}
.g_nav ul li a{
display: block;
padding: 20px 0;
text-align: center;
}
}

headerはページ上部に固定し、#navToggleのみ追従にします。

.openNav付加時にナビゲーションが画面右から横幅200pxで現れるようにします。

.openNav付加時にナビゲーションが表示されていない部分は.overlayを敷いて透明の黒を表示させることで、ナビゲーションを見やすくします。

関連タグ
ページトップへ戻る