行動裝置版本的網頁，常常可以有個「選單」的按鈕在頁面左上角（或是右上角），非常方便好用。所以我上網找了個現成的來用，mmenu！這個外掛除了使用簡單之外，還有階層式的選單，相當好用。
官方網頁：http://mmenu.frebsite.nl/
1.這個外掛的使用方式非常簡單，先下載他的範例檔（官方下載，本站備份下載）。
2.解壓縮後在demo的目錄下有幾個範例檔，我先以default.html為例。
3.將default.html檔案中的下面幾行：
<link type="text/css" rel="stylesheet" href="css/demo.css" /> <link type="text/css" rel="stylesheet" href="../dist/core/css/jquery.mmenu.all.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../dist/core/js/jquery.mmenu.min.all.js"></script> <script type="text/javascript"> $(function() { $('nav#menu').mmenu(); }); </script> |
複製並貼到自己網頁中的
<head> |
和
</head> |
標籤之間。
4.然後在網頁中的
<div class="header"> |
和
</div> |
標籤之間加入下面這一行。
<a href="#menu" data-icon="grid">Menu</a> |
5.最後在網頁中的
<div class="page"> |
和
</div> |
標籤之間加入你所需要的選單內容。
<nav id="menu"> <ul> <li><a href="#">第一層選單A</a></li> <li><a href="#about">第一層選單B</a> <ul> <li><a href="#about/history">第二層選單B-1</a></li> <li><a href="#about/team">第二層選單B-2</a> <ul> <li><a href="#about/team/management">第三層選單B-2-1</a></li> <li><a href="#about/team/sales">第三層選單B-2-2</a></li> <li><a href="#about/team/development">第三層選單B-2-3</a></li> </ul> </li> <li><a href="#about/address">第二層選單B-3</a></li> </ul> </li> <li><a href="#contact">第一層選單C</a></li> </ul> </nav> |
6.最後要把網頁上傳前，記得把步驟三中會用到的程式一併從範例檔案的資料夾中複製出來，並將步驟三中各個檔案所在的目錄改成你自己的目錄架構。
7.這個外掛同時還提供wordpress的版本，應該也很好用。