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式をサーバーにアップロードして設置完了。
    サンプル