用純CSS3建立menu

因為無聊去看bootstrap，突然好奇他們是怎麼寫menu list的，因為我以前也嘗試過自己寫，但問題是子選單的位置總是調不好。
結果看了以後，發現menu寫法還真簡單……

首先是list，先建立list：

<ul>
	<li>
		檔案
		<ul>
			<li>開新檔案</li>
			<li>開啟舊檔</li>
			<li>
				最近開啟檔案
				<ul>
					<li>/tmp/a.doc</li>
					<li>/tmp/b.docx</li>
					<li>/tmp/c.odt</li>
				</ul>
			</li>
			<li>儲存</li>
			<li>另存新檔</li>
			<li>關閉</li>
		</ul>
	</li>
	<li>
		編輯
		<ul>
			<li>剪下</li>
			<li>複製</li>
			<li>貼上</li>
		</ul>
	</li>
	<li>
		檢視
		<ul>
			<li>
				工具列
				<ul>
					<li>表格</li>
					<li>表單</li>
				</ul>
			</li>
			<li>全螢幕</li>
		</ul>
	</li>
	<li>
				說明
		<ul>
			<li>說明</li>
			<li>關於</li>
		</ul>
	</li>
</ul>

直接顯示如下：

• 檔案
  • 開新檔案
  • 開啟舊檔
  • 最近開啟檔案
    • /tmp/a.doc
    • /tmp/b.docx
    • /tmp/c.odt
  • 儲存
  • 另存新檔
  • 關閉
• 編輯
  • 剪下
  • 複製
  • 貼上
• 檢視
  • 工具列
    • 表格
    • 表單
  • 全螢幕
• 說明
  • 說明
  • 關於

※以上的menu是參考open office和gedit的……

然後讓第二層及以下的list隱藏

ul ul{
	display: none;
}

滑鼠移到母項時，會顯示子清單

li:hover>ul{
	display: block;
}

移除list的默認樣式

ul{
	list-style-type: none;
}

不過寫li{list-style-type: none;}也可以就是

僅清單的最上層設為橫向清單

ul>li{
	display: inline-block
}
ul ul li{
	display: list-item;
}

但這樣子，當滑鼠移動到選單時，會變成像下面這樣

• 檔案
  • 開新檔案
  • 開啟舊檔
  • 最近開啟檔案
  • 儲存
  • 另存新檔
  • 關閉
• 編輯
• 檢視
• 說明

所以接下來要設定子清單的位置

ul ul{
	position: absolute;
}

但因為ul的默認CSS有一條ul{padding-left: 40px}
雖然不知道為什麼，chrome等webkit瀏覽器是ul{-webkit-padding-start: 40px;}，不過意思是一樣的
將之移除：

ul{
	padding-left: 0;
}

然後設定第三層（含）以下的ul tag，參考bootstrap、css3 menu、apycom……等網站，基本上都是利用left和top來調整位置的，這也讓我意外知道了，可以藉由left: 100%來讓子選單放在旁邊（三者都是這種作法），總而言之第三層（含）以下的子選單的設定如下

ul ul ul{
	left: 100%;
	top: 0;
}

現在又蹦出一個問題－－對齊問題
例如/tmp/a.doc不是對齊最近開啟檔案而是對齊開新檔案。這是因為我們給第二層的ul tag 設定position: absolute;，但是li的css仍是默認的position: static;，所以偷懶一點設定li的css

ul ul li{
	position: relative;
}

這樣就大功告成了

完成結果

• 檔案
  • 開新檔案
  • 開啟舊檔
  • 最近開啟檔案
    • /tmp/a.doc
    • /tmp/b.docx
    • /tmp/c.odt
  • 儲存
  • 另存新檔
  • 關閉
• 編輯
  • 剪下
  • 複製
  • 貼上
• 檢視
  • 工具列
    • 表格
    • 表單
  • 全螢幕
• 說明
  • 說明
  • 關於

※為了方便起見，上面這個完成結果是使用js直接設定style的，但效果跟上述提到的css是一樣的

而css統整起來就是：

ul{
	list-style-type: none;
}
ul ul{
	display: none;
	position: absolute;
	padding-left: 0;
}  
li:hover>ul{
	display: block;
}
ul>li{
	display: inline-block
}
ul ul li{
	display: list-item;
	position: relative;
}
ul ul ul{
	left: 100%;
	top: 0;
}