スマホ用スライドメニュー（meanMenu）
スマホサイトのハンバーガーメニューを、meanMenuをベースに、カスタマイズしやすいよう調整しました。
まずは【デモ】。
ベースとなる「meanMenu」はここからダウンロードできます。
リセットCSS「base.css」はこちら。
Source
HTML
<script src="assets/lib/jquery/core/jquery-2.2.4.min.js"></script>
<script src="assets/lib/jquery/meanMenu/jquery.meanmenu.min.js"></script>js
//////////////////////////////////////////////
//
// スマホ用メニュー：上から降りる
//
//////////////////////////////////////////////
if ($('.meanMenu').length) {
$('.meanMenu').meanmenu({
// 高さをpxで指定。em % は不可
meanNavPush: '50px',
// 指定した要素の内側直下にメニューを配置
meanMenuContainer: 'body',
// [×] 閉じるボタンのマークアップ
meanMenuClose: '<em>CLOSE</em>',
// [≡] メニューボタンのマークアップ
meanMenuOpen: '<em>MENU</em>',
// [≡] の表示位置
meanRevealPosition: 'right',
// メニュー位置調整「≡の表示位置」からのpx値
meanRevealPositionDistance: '0' ,
// [≡] の背景色
meanRevealColour: '',
// 表示する画面サイズ：●以下
meanScreenWidth: '768',
// 子要素を表示する
meanShowChildren: true,
// 子要素を折りたたむ
meanExpandableChildren: true,
// メニューを閉じた時のアイコン
meanExpand: '',
// メニューを開いた時のアイコン
meanContract: '',
// ClassIDを削除する
meanRemoveAttrs: false,
// Pageクリック時に閉じる
onePage: true,
// メニュー内で消したい要素
removeElements: '',
// 表示形式
meanDisplay: 'block'
});
}
css
/* ######################################################################################
スマホ用メニュー：meanMenu
###################################################################################### */
@media print, screen and (min-width: 768px) {.meanMenu {display:none !important;}}
@media screen and (max-width: 767px){
/* ====================================================
3＠デフォルト
==================================================== */
.mean-container .mean-nav ul li a.mean-expand {background:none !important; border:none !important;}
.mean-container .mean-bar {padding:0; min-height:0;}
.header {width:100%; height:0;}
.header,
.mean-container .mean-bar {position:fixed; height:0;}
.mean-container .mean-nav ul li a {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.mean-container .mean-nav ul li a:not(.mean-expand) {width:100% !important;}
/* 重なり順 DF
-------------------------------------*/
.header {z-index: 9999;}
.mean-bar {z-index:10000;}
/* ＋・－ スタイル DF
-------------------------------------*/
.mean-container .mean-nav ul li a.mean-expand {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
padding: 0px !important;
}
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
content:"";
display:block;
position:relative;
}
.mean-container .mean-nav ul li a.mean-expand:after {transform:rotate(90deg);}
.mean-container .mean-nav ul li a.mean-expand.mean-clicked:after {display:none;}
/* MENU・CLOSE スタイル DF
-------------------------------------*/
.mean-container a.meanmenu-reveal em {
display:block;
position:absolute;
width:100%;
text-indent:0;
text-align:center;
font-weight:normal;
font-style:normal;
color:#000000;
font-size:11px;
}
/* *********************************
ここから設定：meanMenu
********************************* */
/* ====================================================
ヘッダスタイル
==================================================== */
.header .contents {
position:relative;
background:#cccccc;
height:50px;
}
.mean-container .mean-nav {margin-top:50px;} /* ヘッダ高さ common.js で[meanNavPush]にヘッダの高さを設定 */
/* ====================================================
≡ボタン
==================================================== */
.mean-container a.meanmenu-reveal {
width: 50px;
height: 50px;
padding:0;
background:#dddddd;
}
/* ====================================================
≡スタイル
==================================================== */
.mean-container a.meanmenu-reveal span {
position:relative;
top:5px; /* ≡の位置調整 */
width:55%; /* ≡の長さ */
background: #000; /* ≡の色 */
height: 3px; /* ≡の太さ */
margin:5px auto; /* ≡の間隔 */
}
/* ====================================================
×スタイル
==================================================== */
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(1) {transform:rotate(45deg);}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(2) {opacity:0;}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(3) {transform:rotate(-45deg);}
.mean-container a.meanmenu-reveal.meanclose span {top: 14px;} /* 位置調整 */
/* ====================================================
MENU・CLOSE スタイル
==================================================== */
.mean-container a.meanmenu-reveal em {
bottom:0;
color:#000000;
font-size:11px;
}
/* ====================================================
メニュースタイル
==================================================== */
.mean-container .mean-nav {background:#fafafa;}/* メニュー色 */
.mean-container .mean-nav ul li a {
border-top-color:#cccccc !important; /* 区切り線上 */
border-bottom-color:#cccccc !important; /* 区切り線下 */
padding:0.8em 55px 0.8em 10px !important; /* ボタン余白 */
color:#333; /* 文字色 */
}
.mean-container .mean-nav ul li.mean-last a {border-bottom: 1px solid #cccccc;}/* 下端の罫線 */
/* ====================================================
＋・－ スタイル
==================================================== */
.mean-container .mean-nav ul li a.mean-expand {
width: 50px;
height: 46px;
background:#eaeaea !important;
}
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
background:#000; /* ＋－の色 */
width:30%; /* ＋－の間隔 */
height:3px; /* ＋－の太さ */
margin:5px auto; /* ＋－の感覚 */
}
.mean-container .mean-nav ul li a.mean-expand:before {top:35%;} /* －の位置調整 */
.mean-container .mean-nav ul li a.mean-expand:after {top:17%;} /* ｜の位置調整 */
}
