スマホサイトのハンバーガーメニューを、meanMenuをベースに、カスタマイズしやすいよう調整しました。
まずは【デモ】。
ベースとなる「meanMenu」はここからダウンロードできます。
リセットCSS「base.css」はこちら。
Source
1 2 3 4 | <link rel="stylesheet" type="text/css" href="assets/css/base.css"> <link rel="stylesheet" type="text/css" href="assets/lib/jquery/meanMenu/meanmenu.min.css"> <script src="assets/lib/jquery/core/jquery-2.2.4.min.js"></script> <script src="assets/lib/jquery/meanMenu/jquery.meanmenu.min.js"></script> |
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 | <nav class="meanMenu"> <ul> <li><a href="#">Top Level Link</a> <ul> <li><a href="#">Second Level Link</a> <ul> <li><a href="#">Third Level Link</a></li> <li><a href="#">Third Level Link</a></li> <li><a href="#">Third Level Link</a> <ul> <li><a href="#">Fourth Level Link</a></li> <li><a href="#">Fourth Level Link</a></li> <li><a href="#">Fourth Level Link with extra long name so it wraps</a> <ul> <li><a href="#">Fifth Level Link</a></li> <li><a href="#">Fifth Level Link</a></li> <li><a href="#">Fifth Level Link</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Second Level Link</a></li> <li><a href="#">Second Level Link</a></li> </ul> </li> <li><a href="#">Top Level Link</a></li> <li><a href="#">Top Level Link</a></li> <li><a href="#">Top Level Link</a></li> </ul> </nav> <header class="header"> <div class="contents"> <div class="logo"><a href="/">SiteName</a></div> </div> </header> <div class="contents" style=" height:1000px;"> <p>[contents][contents][contents][contents][contents]</p> <p>[contents][contents][contents][contents][contents]</p> <p>[contents][contents][contents][contents][contents]</p> <p>[contents][contents][contents][contents][contents]</p> <p>[contents][contents][contents][contents][contents]</p> </div> <footer class="footer"> <small class="copyright">© 2017 SiteName. All Rights Reserved.</small> </footer> |
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 | ////////////////////////////////////////////// // // スマホ用メニュー：上から降りる // ////////////////////////////////////////////// if ($('.meanMenu').length) { $('.meanMenu').meanmenu({ // 高さをpxで指定。em % は不可 meanNavPush: '50px', // 指定した要素の内側直下にメニューを配置 meanMenuContainer: 'body', // [×] 閉じるボタンのマークアップ meanMenuClose: '<span></span><span></span><span></span><em>CLOSE</em>', // [≡] メニューボタンのマークアップ meanMenuOpen: '<span></span><span></span><span></span><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' }); } |
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 | /* ###################################################################################### スマホ用メニュー：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%;} /* ｜の位置調整 */ } |