CHIBATCH.JP

ピュアCSSでApple風デザインのアコーディオン型ナビゲーションを作ってみる

ピュアCSSでApple風デザインのアコーディオン型ナビゲーションのイメージ

なんて呼べばよいのかわからないんですが、「Apple風デザインのアコーディオン型ナビゲーション」と紹介されているものをピュアCSSで作ってみたので公開してみます。
Create an apple style menu and improve it via jQueryで紹介されているKwicks Menu with jQueryみたいなナビゲーションです。
webkit（Safari/Chrome）でしか動きを確認していないので、SafariかChromeで見てください。

HTMLソース

<ol>タグを使用しています。

<ol>
<li class="home"><a href="#">Home</a></li>
<li class="contact"><a href="#">Contact</a></li>
<li class="downloads"><a href="#">Downloads</a></li>
<li class="search"><a href="#">Search</a></li>
</ol>

CSSソース

ol {
  /* reset */
  margin: 0 0 1.62em;
  padding: 0;
  /* text */
  font-family: "Myeiad Pro", "arial", sans-serif;
  /* css3 transition */
  -webkit-transition-property: width,background-color;
  -webkit-transition-duration: .3s;
  -webkit-transition-timing-function: easing;
  /* clearfix */
  overflow: hidden;
}

<ol>の指定です。marginやpaddingをリセットやclearfixの指定をした後に、CSS3のtransitionでアニメーションの指定をします。。

ol li {
  list-style: none;
  width: 114px;
  height: 40px;
  line-height: 40px;
  float: left;
  background: -webkit-gradient(linear, left top, left bottom, from(#d7d7d7), to(#a6a6a6));
  border-right: 2px ridge #cdcdcd;
  border-left: 1px solid #cdcdcd;
  -webkit-transition-property: width,background;
  -webkit-transition-duration: .3s;
  -webkit-transition-timing-function: easing;
  overflow: hidden;
}

ol li:first-child {
  width: 116px;
  border-left: none;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
}

ol li:last-child {
  width: 115px;
  border-right: none;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
}

<li>の指定です。CSS3でアニメーションの指定と背景色をグラデーションにしています。

ol li a {
  display: block;
  padding-left: 20px;
  background-position: 120px center;
  background-repeat: no-repeat;
  text-decoration: none;
  color :#444;
  text-shadow: 0 1px 0 #dedede;
}
ol li.home a      {background-image: url(house.png);}
ol li.contact a   {background-image: url(mobile.png);}
ol li.downloads a {background-image: url(box.png);}
ol li.search a    {background-image: url(earth.png);}

<a>の指定です。

ol:hover li {
  width: 100px;
}

ol li:hover {
  width: 161px;
  background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#7e7e7e));
}

ol li:hover a {
  color: #FFF;
  text-shadow: 0 -1px #909090;
  background-color: transparent !important;
}

それぞれの要素にマウスオーバーしたときの指定です。CSS3のtransitionでアニメーションの指定をしているためなめらかに動きが変化します。

TAG

UPDATE HISTORY

  • 誤字修正
  • 文章修正
  • CSSソース修正

COMMENTS

コメントはまだありません。ぜひあなたの一言を！

GIVE ME A COMMENT!