title: CSS界面組件之導航菜單
date: 2016-09-17 16:39
tags: CSS界面組件 CSS
0x00 縱向菜單
代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
nav{
margin: 50px;
width: 200px;
}
.list ul{
border:1px solid #6a6bbc;
border-radius: 3px;
padding:5px 10px 3px;
}
.list li{
list-style:none;
}
.list li+li a {
border-top:1px solid #6a6bbc;
}
.list a{
padding: 3px 10px;
text-decoration: none;
display: block;
}
.list a:hover{
background-color: #069;
color:white;
font: 20px/1em "宋體";
}
</style>
</head>
<body>
<nav class="list">
<ul>
<li><a href="">Home</a></li>
<li><a href="">APP</a></li>
<li><a href="">Contents</a></li>
<li><a href="">About</a></li>
</ul>
</nav>
</body>
</html>
注釋:
- 使用 非首位子元素 選擇符。
li + li選擇符意思為：任何跟在li之后的li。在上面表示給除第一個li之外的所有列表項上方加一條邊框。
其它實現(xiàn)效果:
.list li{
border-top:1px solid #069;
}
.list li:first-child{
border-top:none;
}
- 讓列表可點擊。
為了不讓只有文本可以點擊（因為鏈接 a 是行內元素，它會收縮并包住其中的文本。），為了提高用戶體驗，我們需要 讓列表項所在的整行都能點擊。方法就是首先把內邊距從 li 元素轉移到鏈接內部，然后讓鏈接完全填滿整個列表項。
0x01 橫向菜單
代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.list ul{
overflow: hidden;
list-style: none;
margin: 0 20px;
border:1px solid grey;
padding: 5px 10px;
}
.list li {
float: left;
border-right: 1px solid grey;
padding: 0 10px;
}
.list li a{
display: block;
text-decoration: none;
border-radius: 3px;
}
.list li:last-child{
border-right: none;
}
.list a:hover{
background-color: grey;
border-radius: 4px;
}
</style>
</head>
<body>
<nav class="list">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Pages</a></li>
<li><a href="">Content</a></li>
<li><a href="">About</a></li>
</ul>
</nav>
</body>
</html>
注釋:
浮動可以讓
li元素從垂直變成水平。當然可以使用display:inline-block屬性將li變成水平方向的。ul { overflow:hidden;}可以使ul強制包裹 浮動的li。
0x02 下拉菜單
html示例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="multipule.css">
</head>
<body>
<nav id="nav">
<ul class="firstNav">
<li><a href="">人類</a></li>
<li><a href="">植物</a></li>
<li><a href="">動物</a>
<ul class="secondNav">
<li><a href="">犬科</a></li>
<li><a href="">貓科</a></li>
<li><a href="">鳥科</a>
<ul class="thirdNav">
<li><a href="">大鳥</a></li>
<li><a href="">中鳥</a></li>
<li><a href="">小鳥</a></li>
<li><a href="">小小鳥</a></li>
</ul>
</li>
<li><a href="">昆蟲科</a></li>
</ul>
</li>
<li><a href="">微生物</a></li>
</ul>
</nav>
</body>
</html>
CSS示例代碼：
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
#nav{
font:1em "宋體";
}
/*顯示樣式規(guī)則*/
/*一級菜單顯示*/
/*設置所有 a 標簽的顯示樣式*/
#nav li a {
color:#555;
background-color: gray;
padding: .2em 1em;
border-width: 3px;
border-color:transparent;
border-right-style: solid;
background-clip: padding-box;
}
#nav li:hover > a{
color: #fff;
background-color: #aaa;
}
/* a 標簽顯示樣式結束 */
/*一級菜單顯示結束*/
/*二級菜單顯示樣式*/
#nav ul{
height: 2em;
}
#nav li ul{
width:9em;
height: 7em;
}
#nav li li a{
/*去掉繼承的右邊框*/
border-right: none;
border-top:2px solid transparent;
}
/*結束二級菜單顯示演示*/
/*顯示樣式規(guī)則結束*/
/*開始設置功能樣式*/
#nav {
position: relative;
}
#nav li{
float: left;
position: relative;
}
#nav li a{
display: block;
}
/*二級菜單功能樣式*/
#nav li ul {
/*隱藏二級菜單*/
display: none;
/*相對父元素絕對定位*/
position: absolute;
left: 20px;
top: 100%;
}
#nav li:hover > ul{
/*一級菜單懸浮時顯示二級菜單*/
display: block;
}
/*二級菜單功能演示結束*/
#nav li li{
/*二級菜單停止懸浮，恢復重疊*/
float: none;
border:none;
}
/*三級菜單功能樣式*/
#nav li li ul{
position: absolute;
left: 100%;
top:0;
}
/*結束三級菜單功能樣式*/
/*結束功能樣式*/
核心代碼
div.menu-bar ul ul { display: none;}
div.menu-bar li:hover > ul { display: block;}
