css3實現緩慢下拉手風琴導航選單效果

admin發表於2017-03-09
CSSS3

分享一段程式碼例項，它實現了利用css3實現了手風琴導航選單效果。

點選主導航可以展開當前選單，其他選單收縮。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.accordionMenu {
  background: #fff;
  color: #424242;
  font: 12px Arial,Verdana,sans-serif;
  margin: 0 auto;
  padding: 10px;
  width: 500px;
}
.accordionMenu h2 {
  margin: 5px 0;
  padding: 0;
  position: relative;
}
.accordionMenu h2:before { /*向下三角效果*/
  border: 5px solid #fff;
  border-color: #fff transparent transparent;
  content: "";
  height: 0;
  position: absolute;
  right: 10px;
  top: 15px;
  width: 0;
}
.accordionMenu h2 a { /*製作手風琴效果*/
  background: #8f8f8f;
  background: -webkit-gradient(linear,left top,left bottom,from(#cecece),to(#8f8f8f));
  background: linear-gradient(top,#cecece,#8f8f8f);
  border-radius: 5px;
  color: #424242;
  display: block;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
  padding: 10px 10px;
  text-shadow: 2px 2px 2px #aeaeae;
  text-decoration: none;
}
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
  background: #2288dd;
  background: linear-gradient(top,#6bb2ff,#2288dd);
  color: #fff;
}
.accordionMenu p {
  margin: 0;
  height: 0;
  overflow: hidden;
  padding: 0 10px;
  transition: height 0.5s ease-in;
}
/*這部分是顯示內容的關鍵程式碼*/
.accordionMenu :target p {
  height: 100px;
  overflow: auto;
}
.accordionMenu :target h2:before { /*展開欄目時三角效果*/
  border-color: transparent transparent transparent #fff;
}
</style>
</head>
<body>
<div class="accordionMenu">
  <div class="menuSection" id="brand">
    <h2>
      <a href="#brand">css教程</a>
      <p>螞蟻部落一</p>
    </h2>
  </div>
  <div class="menuSection" id="promotion">
    <h2>
      <a href="#promotion">div教程</a>
      <p>螞蟻部落二</p>
    </h2>
  </div>
  <div class="menuSection" id="event">
    <h2>
      <a href="#event">js教程</a>
      <p>螞蟻部落三</p>
    </h2>
    </div>
  </div>
</body>
</html>

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

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.accordionMenu {
  color: #424242;
  font: 12px Arial,Verdana,sans-serif;
  margin: 0 auto;
  padding: 10px;
  width: 500px;
}

上面的程式碼設定導航選單容器元素的樣式。

設定字型顏色為#424242，字型大小為12px，水平居中和尺寸等。

[CSS] 純文字檢視 複製程式碼
.accordionMenu h2 {
  margin: 5px 0;
  padding: 0;
  position: relative;
}

設定h2的外邊距和內邊距，並設定其為相對定位，它裡面的定位為元素參考元素就是它。

[CSS] 純文字檢視 複製程式碼
.accordionMenu h2:before { /*向下三角效果*/
  border: 5px solid #fff;
  border-color: #fff transparent transparent;
  content: "";
  height: 0;
  position: absolute;
  right: 10px;
  top: 15px;
  width: 0;
}

使用:before偽元素選擇器建立三角形箭頭。

具體可以參閱css使用:after或者:before實現三角形箭頭效果一章節。

[CSS] 純文字檢視 複製程式碼
.accordionMenu h2 a { /*製作手風琴效果*/
  background: #8f8f8f;
  background: -webkit-gradient(linear,left top,left bottom,from(#cecece),to(#8f8f8f));
  background: linear-gradient(top,#cecece,#8f8f8f);
  border-radius: 5px;
  color: #424242;
  display: block;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
  padding: 10px 10px;
  text-shadow: 2px 2px 2px #aeaeae;
  text-decoration: none;
}

製作圓角形狀的主導航選單。

[CSS] 純文字檢視 複製程式碼
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
  background: #2288dd;
  background: linear-gradient(top,#6bb2ff,#2288dd);
  color: #fff;
}

設定連結a元素獲取焦點，滑鼠懸浮或者啟用時候的樣式。

[CSS] 純文字檢視 複製程式碼
.accordionMenu p {
  margin: 0;
  height: 0;
  overflow: hidden;
  padding: 0 10px;
  transition: height 0.5s ease-in;
}

設定導航選單的下拉的內容元素樣式，預設狀態下，它的高度為0。

[CSS] 純文字檢視 複製程式碼
.accordionMenu :target p {
  height: 100px;
  overflow: auto;
}

當滑鼠點選時候，內容元素高度為100px，也就是展開。

[CSS] 純文字檢視 複製程式碼
.accordionMenu :target h2:before { /*展開欄目時三角效果*/
  border-color: transparent transparent transparent #fff;
}

設定展開時候的三角形箭頭。

二.相關閱讀:

（1）.::before可以參閱CSS 偽物件選擇符before/E::before一章節。

（2）.linear-gradient可以參閱css3 linear-gradient線性漸變一章節。

（3）.text-shadow可以參閱CSS3 text-shadow一章節。

（4）.:target可以參閱css :target用法一章節。

（5）.:focus可以參閱css :focus選擇器用法介紹一章節。

（6）.transition可以參閱css transition一章節。

相關文章