ナビゲーションメニューとナビゲーションメニューアイコンのサンプルと解説。【CSS・HTML・WEBプログラミング・WEB初心者・WEB制作・ナビゲーションメニュー・ナビゲーションメニュー スマホ・ユーザーインターフェース】

posted on 2020.8.10

スマートフォンやタブレットなどのモバイル端末が急速に普及したことにより、ホームページの制作方法もPCだけでなく多様な端末サイズに対応できるよう変化し、現在はモバイル端末、特にスマートフォン用のホームページを主体に据えた制作が当たり前になってきました。

ナビゲーションメニューはPCでは画面サイズいっぱい広く配置することでそのユーザーインターフェースを成立することができましたが、モバイル端末では固定のナビゲーションメニューにすべての内容を含めることは文字の大きさなどから困難です。

そこでナビゲーションメニューをモバイル端末に対応できるように考えられたのが今回解説させていただく可変式のナビゲーションメニューやナビゲーションメニューボタンです。ホームページの制作がPC主体で考えられていた頃はQ&Aページのタブメニューなどに使われていた技術をモバイルサイトのナビゲーションメニュー用にアレンジされたものになります。

それではモバイルデバイス向けCSSとjavascriptを使用したナビゲーションメニューとナビゲーションメニューアイコンの実装を僕なりに解説していきたいと思います。

モバイルデバイス向けCSSナビゲーションメニューアイコン解説

最初にナビゲーションメニューアイコンの実装例を示して、解説していきていと思います。

今回実装したCSSナビゲーションメニューアイコンのサンプルは以下の3つです。

＊それぞれをクリックして動きを確認して下さい。

上のモバイルデバイス向けCSSナビゲーションメニューアイコン実装例のソースをHTML、JavaScript、Cssそれぞれを示して解説していきたいと思います。

動きを実装する上で必要なcssのtransition、translateの知識はそれぞれのリファレンスに記述しています。そこに不安があれば一度リファレンスを確認して下さい。

HTML共通

<!DOCTYPE html>
<html>
    <head>
        <title>スマートデバイス向けCSSメニューアイコン</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <link href="menu.css" rel="stylesheet" type="text/css"/>
        <script src="menu.js" type="text/javascript"></script>
    </head>
    <body>
     
        <div id="menu">
    <div class="nav-icon">
                <button>  
                    <span></span>
                </button>
            </div>
            <div class="nav-icon2">
                <button>  
                    <span></span>
                </button>
            </div>
            <div class="nav-icon3">
                <button>  
                    <span></span>
                </button>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>スマートデバイス向けCSSメニューアイコン</title>

</head>

<body>

</button>

</div>

</button>

</div>

</button>

</div>

</body>

</html>

ナビゲーションメニューアイコン　HTML実装解説

今回のナビゲーションメニューアイコンの実装は<button>タグの中にアイコンの元となる<span>タグ要素を一つ準備し、疑似要素の：before・：afterを使用して3つのアイコンを並べています。<span>タグ要素を3つ準備する方法など幾つか実装方法がありますが、ここでは割愛します。

JavaScript（JQuery）共通

$(document).ready(function () {
    $(".nav-icon button").click(function () {
        $(".nav-icon").toggleClass("open");
    });

    $(".nav-icon2 button").click(function () {
        $(".nav-icon2").toggleClass("open");
    });

    $(".nav-icon3 button").click(function () {
        $(".nav-icon3").toggleClass("open");
    });
});

$(document).ready(function () {

$(".nav-icon button").click(function () {

$(".nav-icon").toggleClass("open");

});

$(".nav-icon2 button").click(function () {

$(".nav-icon2").toggleClass("open");

});

$(".nav-icon3 button").click(function () {

$(".nav-icon3").toggleClass("open");

});

ナビゲーションメニューアイコン　JavaScript実装解説

JavaScript（JQuery）のtoggleClassでopenクラスのつけ外しを行います。このクラスの有り無しでナビゲーションメニューアイコンの動作をcssで切り替えます。

Css共通

*{
    padding: 0;
    margin: 0;
}

body{
    height: 100vh;
}

#menu{
    display: flex;
    justify-content: space-around;
}

.nav-icon{
    overflow: hidden;
}

.nav-icon button{
    overflow: hidden;
    height: 3.5em;
    padding: 1em .5em;
}

.nav-icon button span{
    transition: background 500ms ease 500ms;
    position: relative;
    display: block;
    width: 2em;
    height: .1em;
    background: #333;

}

.nav-icon button span:after{
    transition: top 500ms ease 500ms,transform 250ms cubic-bezier(.55,.055,.675,.19);
    display: block;
    position: absolute;
    content: "";
    top: -1em;
    width: 2em;
    height: .1em;
    background: #333;
}

.nav-icon button span:before{
    transition: top 500ms ease 500ms,transform 250ms cubic-bezier(.55,.055,.675,.19);
    display: block;
    position: absolute;
    content: "";
    top: 1em;
    width: 2em;
    height: .1em;
    background: #333;
}



.nav-icon.open button span{
    transition: background 40ms ease 500ms;
    background: transparent;
}

.nav-icon.open button span:after{
    transition: top 500ms ease, transform 200ms cubic-bezier(.55,.055,.675,.19) 500ms;
    top: 0;
    transform: rotate(-45deg);
}

.nav-icon.open button span:before{
    transition: top 500ms ease, transform 200ms cubic-bezier(.55,.055,.675,.19) 500ms;
    top: 0;
    transform: rotate(45deg);
}
/**

nav-icon2

**/

.nav-icon2{
    overflow: hidden;
}

.nav-icon2 button{
    overflow: hidden;
    height: 3.5em;
    padding: 1em .5em;
}




.nav-icon2 button span:before{
    transition: all 1000ms ease  1000ms;
    display: block;
    position: absolute;
    content: "";
    width: 2em;
    height: .1em;
    background: #333;
    top: 1em;
}

.nav-icon2 button span{
    transition: top 1000ms ease;
    position: relative;
    display: block;
    width: 2em;
    height: .1em;
    background: #333;
    top: -1em;
}

.nav-icon2 button span:after{
    transition: top 1000ms ease;
    display: block;
    position: absolute;
    content: "";
    width: 2em;
    height: .1em;
    background: #333;
    top: 2em;
}

.nav-icon2.open button span:before{
    transition: all 1000ms ease;
    margin:0 0 0 2em;
    opacity: 0
}

.nav-icon2.open button span{
    transition: top 1000ms ease 1000ms;
    top:0;
}

.nav-icon2.open button span:after{
    transition: top 1000ms ease 1000ms;
    top:0;
}


/**

nav-icon3
**/

.nav-icon3{
    overflow: hidden;
}

.nav-icon3 button{
    overflow: hidden;
    height: 3.5em;
    padding: 1em .5em;
}


.nav-icon3 button span:before{
    transition: all 1000ms ease 1300ms;
    display: block;
    position: absolute;
    content: "";
    width: 2em;
    height: .1em;
    background: #333;
    top: 1em;
}

.nav-icon3 button span{
    transition: top 1000ms ease 500ms,transform 300ms cubic-bezier(.55,.055,.675,.19);
    position: relative;
    display: block;
    width: 2em;
    height: .1em;
    background: #333;
    top: -1em;
}

.nav-icon3 button span:after{
    transition: top 1000ms ease 500ms,transform 300ms cubic-bezier(.55,.055,.675,.19);
    display: block;
    position: absolute;
    content: "";
    width: 2em;
    height: .1em;
    background: #333;
    top: 2em;
}

.nav-icon3.open button span:before{
    transition: all 1000ms ease;
    margin:0 0 0 2em;
    opacity: 0
}

.nav-icon3.open button span{
    transition: top 1000ms ease 1000ms,transform 250ms cubic-bezier(.55,.055,.675,.19) 2000ms;
    top:0;
    transform: rotate(-45deg);
}

.nav-icon3.open button span:after{
    transition: top 1000ms ease 1000ms,transform 250ms cubic-bezier(.55,.055,.675,.19) 2000ms;
    top:0;
    transform: rotate(90deg);
}

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

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

padding: 0;

margin: 0;

}

body{

height: 100vh;

}

#menu{

display: flex;

justify-content: space-around;

}

.nav-icon{

overflow: hidden;

}

.nav-icon button{

overflow: hidden;

height: 3.5em;

padding: 1em .5em;

}

.nav-icon button span{

transition: background 500ms ease 500ms;

position: relative;

display: block;

width: 2em;

height: .1em;

background: #333;

}

.nav-icon button span:after{

transition: top 500ms ease 500ms,transform 250ms cubic-bezier(.55,.055,.675,.19);

display: block;

position: absolute;

content: "";

top: -1em;

width: 2em;

height: .1em;

background: #333;

}

.nav-icon button span:before{

transition: top 500ms ease 500ms,transform 250ms cubic-bezier(.55,.055,.675,.19);

display: block;

position: absolute;

content: "";

top: 1em;

width: 2em;

height: .1em;

background: #333;

}

.nav-icon.open button span{

transition: background 40ms ease 500ms;

background: transparent;

}

.nav-icon.open button span:after{

transition: top 500ms ease, transform 200ms cubic-bezier(.55,.055,.675,.19) 500ms;

top: 0;

transform: rotate(-45deg);

}

.nav-icon.open button span:before{

transition: top 500ms ease, transform 200ms cubic-bezier(.55,.055,.675,.19) 500ms;

top: 0;

transform: rotate(45deg);

}

/**

nav-icon2

**/

.nav-icon2{

overflow: hidden;

}

.nav-icon2 button{

overflow: hidden;

height: 3.5em;

padding: 1em .5em;

}

.nav-icon2 button span:before{

transition: all 1000ms ease 1000ms;

display: block;

position: absolute;

content: "";

width: 2em;

height: .1em;

background: #333;

top: 1em;

}

.nav-icon2 button span{

transition: top 1000ms ease;

position: relative;

display: block;

width: 2em;

height: .1em;

background: #333;

top: -1em;

}

.nav-icon2 button span:after{

transition: top 1000ms ease;

display: block;

position: absolute;

content: "";

width: 2em;

height: .1em;

background: #333;

top: 2em;

}

.nav-icon2.open button span:before{

transition: all 1000ms ease;

margin:0 0 0 2em;

opacity: 0

}

.nav-icon2.open button span{

transition: top 1000ms ease 1000ms;

top:0;

}

.nav-icon2.open button span:after{

transition: top 1000ms ease 1000ms;

top:0;

}

/**

nav-icon3

**/

.nav-icon3{

overflow: hidden;

}

.nav-icon3 button{

overflow: hidden;

height: 3.5em;

padding: 1em .5em;

}

.nav-icon3 button span:before{

transition: all 1000ms ease 1300ms;

display: block;

position: absolute;

content: "";

width: 2em;

height: .1em;

background: #333;

top: 1em;

}

.nav-icon3 button span{

transition: top 1000ms ease 500ms,transform 300ms cubic-bezier(.55,.055,.675,.19);

position: relative;

display: block;

width: 2em;

height: .1em;

background: #333;

top: -1em;

}

.nav-icon3 button span:after{

transition: top 1000ms ease 500ms,transform 300ms cubic-bezier(.55,.055,.675,.19);

display: block;

position: absolute;

content: "";

width: 2em;

height: .1em;

background: #333;

top: 2em;

}

.nav-icon3.open button span:before{

transition: all 1000ms ease;

margin:0 0 0 2em;

opacity: 0

}

.nav-icon3.open button span{

transition: top 1000ms ease 1000ms,transform 250ms cubic-bezier(.55,.055,.675,.19) 2000ms;

top:0;

transform: rotate(-45deg);

}

.nav-icon3.open button span:after{

transition: top 1000ms ease 1000ms,transform 250ms cubic-bezier(.55,.055,.675,.19) 2000ms;

top:0;

transform: rotate(90deg);

}

ナビゲーションメニューアイコン　CSS実装解説

CSSでのナビゲーションメニューアイコンの動作の実装解説をしていきますが、その前に一つだけ注意点を書いておきます。

今回のナビゲーションメニューアイコンの実装では：before・：afterはあくまでも疑似的要素であり、実体は<span>タグ一つのみです。実体である<span>タグを移動（top,left…）、回転(rotate)、透明(opacity)などのプロパティーで変化させると実体の疑似的要素である：before・：afterも同じように変化します。その中でbackgroundなど例外的なプロパティーがいくつかあるのでそうしたプロパティーを使用したり、疑似的要素のみをうまく変化させていくことで実装していくことになります。

それでは3つのナビゲーションメニューアイコンの左側から順に解説していたいと思います。まずは左側のナビゲーションメニューアイコンから解説します。

ナビゲーションメニューアイコン（左側）動作解説

ナビゲーションメニューアイコンを構成する<span>と: befre、: afterの位置関係ですが、上から: before、<span>タグ、: afterになります。

: before、: afterの位置の縦の移動から入ります。実体である<span>タグの位置からそれぞれtopの位置を-1em、1emずつずらすことで3つのアイコンが成立しています。ナビゲーションメニューアイコンをクリックするとJavaScript（JQuery）でopenクラス付加されます。openクラスを加えたcssで: before、: afterのtopの位置を0すなわち実体である真ん中に配置された<span>タグの位置に戻します。

topの位置を移動するアニメーションの実行時間をcssのtrasitionプロパティーを使用して行き帰り共に500ミリ秒に設定してあげます。

次に実体である<span>タグを透明にします。: berore と : after が重なるタイミングで実体である<span>タグのbackgroundプロパティーにtransparentを設定し透明にします。

cssのtranslateプロパティーのディレイタイムに500ミリ秒を設定し遅延させた後で、40ミリ秒かけて透明にします。

最後に二つの疑似要素を45°回転させます。openクラスを付加した : before : after のそれぞれにcssのtransformプロパティーを使用してrotate(45deg),rotate(-45deg)を設定します。

ナビゲーションメニューアイコン（左側）の往路に関する解説は以上になります。

次にナビゲーションメニューアイコンの復路の解説にはいりますが動作そのものは往路の逆になるだけなので少し絞って解説していきます。注意することは実行タイミングが逆になるというこどだけなので、translateプロパティーに設定する実行時間とディレイ時間をそのことを考慮した上で設定してあげるだけになります。

まずナビゲーションメニューアイコンをクリックするとopenクラスが外れます。そのことでopenクラスが付加されていないcssに動作が返っていきます。

疑似要素のtransformプロパティーがrotate(0)すなわち変化のない状態に戻ります。

<span>タグの実体のbackgroundが透明から#333に戻ります。

疑似要素のtopの位置が0から‐1em 1emに戻ります。

最初にcssで表現したナビゲーションメニューアイコンに戻って終了になります。

ナビゲーションメニューアイコン（中側）動作解説

それでは次のナビゲーションメニューアイコンの解説に入りてたいと思います。注意するとろは最初の解説と変わりありません。実体と疑似要素の理解とtranslateプロパティーの実行時間、実行タイミングの理解です。

それでは先ほど同様にナビゲーションアイコンの位置関係をみていきます。上から順に<span>タグの実体、: before、: afterの順になります。左側のアイコンと並びが違うのはmargin-leftで横に移動する動作が入るからです。この時、<span>タグの実体を動かすと、疑似要素も同時に移動してしまいます。そこで縦中央のアイコンは疑似要素の: beforeを配置して横移動に対応させます。

最初の動きは: beforeの横移動から入ります。openクラスが付加された : beforeのmarginプロパティーのレフトに2emを設定してアイコン中央を右側に移動させます。

cssのtransitionプロパティーの実行時間に1000ミリ秒を設定し、アニメーションさせます。

縦の移動を実行します。<span>の実体と : afterのそれぞれのtopプロパティーに-1em、1emを設定します。

これでナビゲーションメニューアイコン（中央）の往路のアニメーションは終了になります。

復路に関しては前回と変わらないので割愛させていただきます。trasitionプロパティーの実行時間とディレイタイムを考えながら自分の好みの動きで実装して下さい。秒数は自分の感覚で一向にかまいません。

ナビゲーションメニューアイコン（右側）動作解説

ナビゲーションメニューアイコン（右側）の動作の解説に入ります。左側のアイコンと中央のアイコンの動作をミックスさせたような動きにしてみました。

ナビゲーションアイコンの位置関係は中央のメニューアイコンと同じ並びです。上から順にタグの実体、: before、: afterの順になります。

maraginプロパティーのレフト側に2emを設定して横に移動します。

topプロパティーで上下のアイコンを中央に移動します。

backgroundプロパティーで中央のアイコンを透明にします。

translateプロパティーにrotate(-45deg)、rotate(90deg)を設定し回転させます。注意で述べたように実体である<span>タグを左に45°回転させると、疑似要素も45°回転しますので、45°戻した後にさらに45°すなわち90°に設定する必要があります。

これで左から3番目のナビゲーションメニューアイコンの往路の解説は終わりになります。復路に関しては前２つの例と変わらないので割愛させて頂きます。

cssナビゲーションメニューアイコン解説まとめ

これで3つのcssナビゲーションメニューアイコンの解説は終了になります。冒頭でも述べましたが、インターネットを閲覧する媒体がスマートフォンに完全にシフトした状況でホームページ制作側としてはそのuiを実装するために今回のアイコンメニューの技術は必須のものです。この記事が読んで頂けた方のお役に立てていれば幸いです。

スマートデバイス向けCSSナビゲーションメニューの実装

それでは次にナビゲーションメニューの実装と解説に入りたいと思います。今回実装解説したcssナビゲーションメニューアイコンと組み合わせての実装になります。実際の完成形は以下のようになります。

cssナビゲーションメニューもcssナビゲーションメニューアイコンと同様3種類準備して実装解説していきたいと思います。

1 2