CSS3のtransitionで作るスムーズに動く縦メニュー

CSS3を使って何か作ろうということで、動きのある縦メニューを作ってみました。ちょっとのコードで簡単に作れるので、jQueryを使うよりはるかに敷居が低いです。
css3slidemenu.png
【動作ブラウザ】
  • Chrome
  • Safari
  • Firefox(4.0以上)
  • 今回はよく似たメニューを2つ紹介します。

    文字が右にスライドする

    このように、マウスを乗せると背景が徐々に変わり、文字が右にゆっくり移動します。

    構造は非常にシンプルです。

    <ul id="menu">
      <li><a href="#">css3</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">Google</a></li>
      <li><a href="#">まとめ</a></li>
    </ul>

    CSSは次のようになっています。

    #menu{
      list-style-type: none;
    }
    #menu li {
      margin:0 0 5px 5px;
      width: 200px;
    }
    #menu a {
      background-color:#E6E6FA;
      color:#114477;
      display: block;
      padding:5px 10px;
      text-decoration:none;
    
      border-radius: 5px;
      -moz-border-radius: 5px;
    
      -moz-box-shadow: 3px 2px 2px #708090;
      -webkit-box-shadow: 3px 2px 2px #708090;
      box-shadow: 3px 2px 2px #708090;
    
      -moz-transition-property: background;
      -moz-transition-duration: 0.5s;
      -moz-transition-timing-function: linear;
    
      -moz-transition-property: padding;
      -moz-transition-duration: 0.2s;
      -moz-transition-timing-function: ease-out;
    
      -webkit-transition: background 0.5s linear 0 , padding 0.2s ease-out 0;
    }
    #menu a:hover {
      background:#b0c4de;
      padding:5px 5px 5px 15px;
    }

    CSS3の部分だけ簡単に説明しておきます。

    css
    border-radius: 5px;

    border-radiusは、コーナーを丸くするもので、数値は角の半径を表します。この場合はすべての角が半径5px分だけ丸くなります。

    今回は4角まとめて指定していますが、それぞれで指定する場合はborder-top-left-radius(左上)・border-top-right-radius(右上)・border-bottom-left-radius(右下)・border-bottom-right-radius(左下)となります。

    css
    box-shadow: 3px 2px 2px #708090;

    box-shadowでメニューに影をつけています。

    今回の場合は『box-shadow : 3px(右方向へのずれ) 2px(下方向へのずれ) 2px(影のぼかし具合) #708090(影の色);』という感じになっています。

    css
    transition: background 0.3s linear 0 ,padding 0.2s ease-out 0 ;

    transitionで滑らかなスライドを表現しています。hoverで指定した内容に変わるまでの流れを指定します。

    transition: background(適用するCSS要素) 0.3s(変化が終了するまでの時間) linear(変化の進行具合) 0(変化開始のタイミング);

    今回のように対象となるCSS要素が複数ある場合はカンマで区切ります。

    CSS要素の部分を『all』とするとすべての要素に適用されます。今回の場合、背景とpaddingで動きの早さを変えているので使っていません。

    Firefoxはまとめて指定できないので分けて指定してあります。また、背景色の変更に対応していないようですが、今後の期待を込めてその分のコードも載せています。

    なお、進行具合には以下のような種類があります。

    ease (開始と完了を滑らかにする)
    linear (一定)
    ease-in (ゆっくり始まる)
    ease-out (ゆっくり終わる)
    ease-in-out (ゆっくり始まってゆっくり終わる)

    以上簡単に説明してみました。

    メニューごと右にスライドする

    先ほどのものと似ていますがもう1つ。

    構造は先ほどと一緒で、CSSは次のようになります。

    #menu2 {
      list-style-type: none;
    }
    #menu2 li {
      margin:0 0 5px 5px;
      width: 200px;
      
      -moz-transition-property: background ;
      -moz-transition-duration: 0.3s;
      -moz-transition-timing-function: linear;
    
      -webkit-transition: margin 0.2s ease-out 0;
    }
    #menu2 a {
      background-color:#E6E6FA;
      color:#114477;
      display: block;
      padding:5px 10px;
      text-decoration:none;
    
      border-radius: 5px;
      -moz-border-radius: 5px;
    
      -moz-box-shadow: 3px 2px 2px #708090;
      -webkit-box-shadow: 3px 2px 2px #708090;
      box-shadow: 3px 2px 2px #708090;  
    
      -moz-transition-property: margin ;
      -moz-transition-duration: 0.2s;
      -moz-transition-timing-function: ease-out;
    
      -webkit-transition: background 0.3s linear 0 ;
    }
    #menu2 a:hover {
      background:#B0C4DE;
    }
    #menu2 li:hover {
      margin:0 0 5px 10px;
    }

    CSS3はブラウザによって対応状況も違いますが、これでしたら対応していなくてもそれなりにちゃんと表示されます。

    CSS3は使い方自体そんなに難しくないので、アイデア次第でいろいろ面白いものが色々作れそうです。

    あとはブラウザの対応状況次第ですね。特にIEさん。

    フィードやTwitterで最新情報をチェック
    follow us in feedly
    この記事に付いているタグの最新記事一覧
    loading...
    コメント
    box-shadowのとこ、正しくは下に2pxでっせ。
    【2011/05/13 05:11】 | - #- | [edit]
    ご指摘ありがとうございます。

    修正しました~
    【2011/05/14 06:09】 | 管理人 #E2ywrYdA | [edit]









    ※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

    Recent Entry
    Popular Entry
    • このエントリーをはてなブックマークに追加