<ul> <li><a href="#/">Home</a></li> <li><a href="#/">Our work</a></li> <l...">

ウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

使えるドロワーメニューmmenu コピペ用ソース

メニューの数か多くなった時にスマホでしっかりスクロールできるドロワーメニュー。

デモはこちらmmenu

HTML

htmlの基本構造はbody の直下に#menu と#pageが並列

メニューアイコンを右上に置きたい場合はmh-btns-rightにする。右からメニュを出現させたい場合はjsで調整。

<nav id="menu">
  <ul>
    <li><a href="#/">Home</a></li>
    <li><a href="#/">Our work</a></li>
    <li><a href="#/">About us</a></li>
    <li><a href="#/">Services</a></li>
    <li><a href="#/">Contact</a></li>
  </ul>
</nav>
<div id="page">
  <div class="mh-head Sticky">
    <span class="mh-btns-left">
      <a href="#menu" class="fa fa-bars"></a>
      <a href="#page" class="fa fa-times"></a>
    </span>
    <span class="mh-text">上部バー</span>
  </div>

  <div class="content">
    ここにメインコンテンツ
  </div>
</div>

CSS

外部CSS

読み込むCSSは全部で4つ

一番上はメニューアイコン用のfontawesome。これは直リンクでOK。それ以外はダウンロードして必要に応じてCSSを編集しサーバーにアップするのが良い。SSL化されたサイトで使う場合はダウンロード必須。demo.cssに記述されているリセット系cssはごっそり削除したほうが使いやすい。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="http://mmenu.frebsite.nl/demo/css/demo.css?v=7.0.1" />
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mmenu/jquery.mmenu.all.css?v=7.0.1" />
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mhead-plugin/mhead/jquery.mhead.css?v=7.0.1" />

javascript

外部javascript

こちらもjquery 以外はSSL(https)対応のサイトで使う場合は直リン不可。

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://mmenu.frebsite.nl/mmenu/jquery.mmenu.all.js?v=7.0.1"></script>
<script src="http://mmenu.frebsite.nl/mhead-plugin/mhead/jquery.mhead.js?v=7.0.1"></script>
<script src="http://mmenu.frebsite.nl/demo/js/playground.js"></script>

内部javascript

仕様の調整はmmenu メニュー > Documentation > Add-onsやExtensions を参照。

メニューを右から出したい場合はextensions の[カッコ]のなかに"position-right"を追加。

<script>
$(function() {
	$("#menu").mmenu({
		extensions 	: [ "theme-white", "listview-justify", "border-full", "shadow-page" ],
		navbar 		: false
	});
	$(".mh-head.mm-sticky").mhead({
		scroll: {
			hide: 200
		}
	});
	$(".mh-head:not(.mm-sticky)").mhead({
		scroll: false
	});
});
</script>
関連記事
この記事役にたった?
管理者にだけメッセージを送る

カテゴリー

広告

最近の記事

便利ツール