Saetl.net

Simple And Easy TempLate

mmenuの使い方

  1. 下記ページの ｢Download｣ よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル（サンプルではindex.html）にコードを記述。
    ＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
    ・head部分にcssファイルを読み込ませるためのコードを記述。 
     <head>
<link href="css/demo.css" rel="stylesheet" />
<link href="css/jquery.mmenu.all.css" rel="stylesheet" />
<link href="css/jquery.mmenu.widescreen.css" rel="stylesheet" media="all and (min-width: 900px)" /><!--最初からメニューが閉じているタイプの場合はこの部分を削除-->
</head>

    サンプルのdemo.cssコード（サンプルのdemo.cssは改変しています）

    /*ページ設定部分（style.cssなどで設定していれば削除する）*/
* {
	margin: 0;
	padding: 0;
}
body {
	background: #fff;
	font-family: Arial;
}
a {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: #ccc;
	text-decoration: underline;
}
/*ここまでページ設定部分*/


/*ここから"mmenuの設定*/
nav:not(.mm-menu) {
	display: none;
}
.header {
	text-align: center;
}
.header {
	background: #777;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 40px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 50px;
}
.header.fixed {
	position: fixed;
	top: 0;
	left: 0;
}
.footer.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
}
.header a {
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 10px;
}

/*最初からメニューが閉じているタイプの場合はこの部分を削除*/
@media all and (min-width: 900px) {
a[href="#menu"] {
	display: none;
}
.content {
	background: none;
}
}
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN（ネットワーク経由でコンテンツを提供するサービス）よりjqueryをロード-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--ダウンロードしたファイル-->
<script src="js/jquery.mmenu.min.all.js" ></script>
<!--javascript追記-->
<script>
$(function() {
    $("#menu").mmenu({
        extensions: ["widescreen"]　//最初からメニューが閉じているタイプの場合はこの部分を削除
    })
});
</script>
</body>
    ・<body></body>内にコードを記述 
    <div id="page"g>
  <div class="header"g> <a href="#menu"g></ag> Demo </divg>
</divg>
<nav id="menu"g>
  <ulg>
    <lig><a href="#/"g>Home</ag></lig>
    <lig><a href="#/about"g>About us</ag>
      <ulg>
        <lig><a href="#/about/history"g>History</ag></lig>
        <lig><a href="#/about/team"g>The team</ag>
          <ulg>
            <lig><a href="#/about/team/management"g>Management</ag></lig>
            <lig><a href="#/about/team/sales"g>Sales</ag></lig>
            <lig><a href="#/about/team/development"g>Development</ag></lig>
          </ulg>
        </lig>
        <lig><a href="#/about/address"g>Our address</ag></lig>
      </ulg>
    </lig>
    <lig><a href="#/contact"g>Contact</ag></lig>
  </ulg>
</navg>

    サンプルのhtmlコード

     <!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<title>mmenu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="css/demo.css" rel="stylesheet" />
<link href="css/jquery.mmenu.all.css" rel="stylesheet" />
<link href="css/jquery.mmenu.widescreen.css" rel="stylesheet" media="all and (min-width: 900px)" />
</head>

<body>
<div id="page">
  <div class="header"> <a href="#menu"></a> Demo </div>
</div>
<nav id="menu">
  <ul>
    <li><a href="#/">Home</a></li>
    <li><a href="#/about">About us</a>
      <ul>
        <li><a href="#/about/history">History</a></li>
        <li><a href="#/about/team">The team</a>
          <ul>
            <li><a href="#/about/team/management">Management</a></li>
            <li><a href="#/about/team/sales">Sales</a></li>
            <li><a href="#/about/team/development">Development</a></li>
          </ul>
        </li>
        <li><a href="#/about/address">Our address</a></li>
      </ul>
    </li>
    <li><a href="#/contact">Contact</a></li>
  </ul>
</nav>

<!--googleのCDN（ネットワーク経由でコンテンツを提供するサービス）よりjqueryをロード-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--ダウンロードしたファイル-->
<script src="js/jquery.mmenu.min.all.js" ></script>
<!--javascript追記-->
<script>
$(function() {
    $("#menu").mmenu({
        extensions: ["widescreen"]
    })
});
</script>
</body>
</html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル