CSS3垂直摺疊導航選單

admin發表於2018-08-24
CSSS3

分享一段程式碼例項，它使用純css實現了垂直下拉皮膚導航選單效果。

當然更多的是結合JavaScript實現，具體參閱垂直摺疊導航選單一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.pannel {
  background: #eee;
  border: 1px solid #999;
  width: 500px;
  margin: 100px auto;
}
.pannel h2 {
  margin: 0;
  padding: 12px 0;
  background: #ccc;
  font-family: "Microsoft YaHei";
  color: white;
  padding-left: 10px;
  font-weight: normal;
}
.pannel .section {
  border-bottom: 1px solid #ccc;
}
.pannel h3 {
  margin: 0;
  padding: 0;
  background: #eee;
  padding: 3px 1em;
  font-size: 18px;
}
.pannel h3 a {
  text-decoration: none;
  display: block;
  color: black;
  font-weight: normal;
  font-family: "Microsoft YaHei";
}
.pannel .section:target h3 a {
  color: orange;
}
.pannel h3 + div {
  height: 0;
  padding: 0 1rem;
  overflow: hidden;
  -webkit-transition: height 0.3s ease-in;
}
.pannel .section:target h3 + div {
  height: 250px;
  overflow: auto;
}
</style>
</head>
<body>
  <div class="pannel">
    <h2>css3手風琴摺疊皮膚</h2>
    <div id="one" class="section">
      <h3><a href="#one">螞蟻部落一</a></h3>
      <div>css教程</div>
    </div>
    <div id="two" class="section">
      <h3><a href="#two">螞蟻部落二</a></h3>
      <div>div教程</div>
    </div>
    <div id="three" class="section">
      <h3><a href="#three">螞蟻部落三</a></h3>
      <div>js教程</div>
    </div>
    <div id="four" class="section">
      <h3><a href="#four">螞蟻部落四</a></h3>
      <div>json教程</div>
    </div>
    <div id="five" class="section">
      <h3><a href="#five">螞蟻部落五</a></h3>
      <div>css3教程</div>
    </div>
    <div id="six" class="section">
      <h3><a href="#six">螞蟻部落六</a></h3>
      <div>jquery教程</div>
    </div>
    <div id="sevent" class="section">
      <h3><a href="#sevent">螞蟻部落七</a></h3>
      <div>www.softwhy.com</div>
    </div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.pannel {
  background: #eee;
  border: 1px solid #999;
  width: 500px;
  margin: 100px auto;
}

用來定義導航選單容器的樣式。

[CSS] 純文字檢視 複製程式碼
.pannel h2 {
  margin: 0;
  padding: 12px 0;
  background: #ccc;
  font-family: "Microsoft YaHei";
  color: white;
  padding-left: 10px;
  font-weight: normal;
}

用來設定導航選單的最上面的標題。

[CSS] 純文字檢視 複製程式碼
.pannel .section {
  border-bottom: 1px solid #ccc;
}

設定導航選單一個導航單元（標題+內容）容器的底部邊框的樣式。

[CSS] 純文字檢視 複製程式碼
.pannel h3 {
  margin: 0;
  padding: 0;
  background: #eee;
  padding: 3px 1em;
  font-size: 18px;
}

設定一個導航單元標題的樣式。

[CSS] 純文字檢視 複製程式碼
.pannel h3 a {
  text-decoration: none;
  display: block;
  color: black;
  font-weight: normal;
  font-family: "Microsoft YaHei";
}

設定連結a的樣式。

[CSS] 純文字檢視 複製程式碼
.pannel .section:target h3 a {
  color: orange;
}

設定對應標題連結的字型顏色，關於:target的用法可以參閱相關閱讀。

[CSS] 純文字檢視 複製程式碼
.pannel h3 + div {
  height: 0;
  padding: 0 1rem;
  overflow: hidden;
  -webkit-transition: height 0.3s ease-in;
}

設定h3後面緊鄰的div元素的樣式。

預設情況下高度為0，也就是說是摺疊的。

[CSS] 純文字檢視 複製程式碼
.pannel 
.section:target h3 + div {
  height: 250px;
  overflow: auto;
}

點選class屬性值為section的元素，會將對應的h3後面緊鄰的div元素高度設定為250px。

二.相關閱讀:

（1）.:target可以參閱css :target偽類選擇器用法一章節。

（2）.+可以參閱CSS (E+F)相鄰選擇符一章節。

（3）.transition可以參閱CSS3 transition一章節。

相關文章