PC時は横並び + プルダウン + レスポンシブでスマホ時にナビゲーション切り替え という形でナビゲーションを実装してみます。
サンプルコード
HTML
.head-nav-lv1_breakで、PC版の表示で画面幅が狭い時の改行位置調整を行っています。
<div class="head"> <div id="nav-switch"></div> <div class="head-nav"> <ul class="head-nav-lv1"> <li class="head-nav-lv1_item"> <a href=""> <div class="head-nav-lv1_itemInner"> <span class="head-nav-lv1_break">HOME</span> </div> </a> </li> <li class="head-nav-lv1_item"> <a href=""> <div class="head-nav-lv1_itemInner"> <span class="head-nav-lv1_break">メニューの</span><span class="head-nav-lv1_break">サンプル</span> </div> </a> </li> <li class="head-nav-lv1_item"> <a href=""> <div class="head-nav-lv1_itemInner"> <span class="head-nav-lv1_break">下層メニュー</span><span class="head-nav-lv1_break">サンプル</span> </div> </a> <div class="head-nav-lv2_wrap"> <ul class="head-nav-lv2"> <li class="head-nav-lv2_item"> <a href="">サブメニュー1</a> </li> <li class="head-nav-lv2_item"> <a href="">サブメニュー2</a> </li> <li class="head-nav-lv2_item"> <a href="">サブメニュー3</a> </li> <li class="head-nav-lv2_item"> <a href="">サブメニュー4</a> </li> </ul> </div> </li> <li class="head-nav-lv1_item"> <a href=""> <div class="head-nav-lv1_itemInner"> <span class="head-nav-lv1_break">Sample</span> <span class="head-nav-lv1_break">menu test</span> </div> </a> </li> <li class="head-nav-lv1_item"> <a href=""> <div class="head-nav-lv1_itemInner"> <span class="head-nav-lv1_break">メニュー</span> </div> </a> </li> <li class="head-nav-lv1_item"> <a href=""> <div class="head-nav-lv1_itemInner"> <span class="head-nav-lv1_break">メニュー</span> </div> </a> </li> </ul> </div> </div>
CSS
基本はPC版の表示で、MediaQueriesでスマホ・タブレット時のスタイルを上書きするようにしています。
/* -------------------------
PC
------------------------- */
#nav-switch {
display: none;
}
.head-nav {
position: relative;
width: 100%;
background: #1a1a1a;
}
.head-nav-lv1 {
max-width: 1000px;
margin: 0 auto;
}
.head-nav-lv1:before,
.head-nav-lv1:after {
content: "";
display: table;
}
.head-nav-lv1:after {
clear: both;
}
.head-nav-lv1_item {
position: relative;
float: left;
width: 16.6666%;
box-sizing: border-box;
border-left: #cccccc 1px solid;
}
.head-nav-lv1_item:first-child {
border-left: none;
}
.head-nav-lv1_item > a {
display: block;
height: 25px;
padding: 25px 5px 0;
color: #ffffff;
text-align: center;
}
.head-nav-lv1_item.is-active > a {
background: #666666;
}
.head-nav-lv1_itemInner {
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.head-nav-lv1_break {
display: inline-block;
white-space: nowrap;
}
.head-nav-lv2_wrap {
display: none;
position: absolute;
top: 50px;
left: 0;
width: 100%;
background: #666666;
}
.head-nav-lv2 {
}
.head-nav-lv2_item {
border-bottom: #999999 1px solid;
}
.head-nav-lv2_item > a {
display: block;
padding: 10px 5px;
color: #ffffff;
}
/* -------------------------
SP
------------------------- */
@media screen and (max-width:768px) {
#nav-switch {
display: block;
position: absolute;
top: 18px;
right: 10px;
width: 25px;
height: 15px;
cursor: pointer;
}
#nav-switch:before,
#nav-switch:after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
height: 3px;
border-radius: 1px;
background: #000000;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#nav-switch:before {
top: 0;
box-shadow: 0 6px 0 #000000;
}
#nav-switch:after {
top: 12px;
}
#nav-switch.is-open:before {
top: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: none;
}
#nav-switch.is-open:after {
top: 5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.head-nav {
display: none;
position: absolute;
top: 50px;
left: 0;
}
.head-nav-lv1_item {
float: none;
width: 100%;
}
.head-nav-lv1_item > a {
height: auto;
padding: 10px 5px;
border-bottom: #333333 1px solid;
text-align: left;
}
.head-nav-lv1_itemInner {
position: relative;
display: block;
-webkit-transform: none;
transform: none;
}
.head-nav-lv2_wrap {
display: none;
position: static;
background: #666666;
}
} /* max-width:768px */
JavaScript
$(function() {
var navFlag = ''; // 現在のナビゲーション表示がpcかspかが入る
var hoverClass = 'is-active'; // PCのホバー時に付与するclass名
var openClass = 'is-open'; // スマホの開閉時に付与するclass名
// jsで使用するナビゲーションのclass名
var $navWrapper = $('.head-nav');
var $navSwitch = $('#nav-switch');
var navLv1Item = '.head-nav-lv1_item';
var navLv2 = '.head-nav-lv2_wrap';
// ナビゲーションホバー時
$(navLv1Item).hover(function() {
if(navFlag == 'pc') {
$(this)
.addClass(hoverClass)
.children(navLv2).stop(true, true).slideDown();
}
}, function() {
if(navFlag == 'pc') {
$(this)
.removeClass(hoverClass)
.children(navLv2).stop(true, false).slideUp();
}
});
// ハンバーガーボタンクリック時
$navSwitch.click(function() {
// 表示・非表示の切り替え
if($navWrapper.is(':visible')) {
$(this).removeClass(openClass);
$navWrapper.slideUp();
} else {
$(this).addClass(openClass);
$navWrapper.slideDown();
}
});
// ナビゲーションクリック時
$(navLv1Item + ' > a').click(function(e) {
// スマホで下層ナビがある場合
if(navFlag == 'sp' && $(this).next().length) {
// 表示・非表示の切り替え
if($(this).next().is(':visible')) {
$(this).next().slideUp();
} else {
$(this).next().slideDown();
}
// リンクはキャンセルする
e.preventDefault();
}
});
$(window).on('load resize', function() {
navCheck();
});
// ナビゲーションの状態チェック
function navCheck() {
// スマホ時のハンバーガーボタンが表示されているかどうかで判別
winCheck = $navSwitch.is(':visible');
// SP時の表示に切り替わったとき
if(winCheck && navFlag != 'sp') {
navFlag = 'sp';
spNavInit();
// PC時の表示に切り替わったとき
} else if(!winCheck && navFlag != 'pc') {
navFlag = 'pc';
pcNavInit();
}
}
// PC時の初期設定
function pcNavInit() {
$navSwitch.removeClass(openClass);
$navWrapper.removeAttr('style');
$(navLv2).removeAttr('style');
}
// SP時の初期設定
function spNavInit() {
$(navLv2).removeAttr('style');
}
});
コメントが承認されるまで時間がかかります。