cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

CSS3でFaceBook風のスライドメニューにチャレンジする

基本エンジニアなのでデザインは勉強中ですが、css3のtransitionが楽しそうなのでチャレンジしてみました。
Phonegapで試してみたら問題なく使えそうだったのでコピペ出来るように残しておきます。
*自分用です、流用するときは適当に修正して下さい。

アウトラインを作成する

html5でアウトラインをマークアップします。
通常はidとかclassなどが必要ですが、今回は重要でないので省いています。

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
</head>
<body>
<header>
	<a href="#" id="menu">MENU</a> <h1>あぷりつくるかい</h1>
</header>    
<nav>
    <ul>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
    </ul>
</nav>    
<article>
    <section>
		<h2>楽しいエンジニア生活!</h2>
        色々な言語がありますよ。
    </section>
    <section>
		<h2>微妙なエンジニア生活。。</h2>
        向き不向きはありますよ。
    </section>    
</article>
</body>
</html>

こんな感じです。

初期表示

見た目を調整する

変化が見やすいように少しだけ調整しました。
長くなるのでリセットCSSは適当です。

*{
    margin : 0;
    padding: 0;
    font-size : 100%;
}
/* header */
header{
    background-color:#bfd4fc;
    padding:10px;
    height:50px;
}
header > h1{
	display:inline-block;
}
/* common */
nav,article{
    border:1px solid #d4d4d4;
    min-height:300px;
    position:absolute;
    top : 50px;
}
/* nav Style */
nav{
    background-color:#bce6fc;
    padding : 10px 10px 0 0;
    width:150px;
}
nav ul{
	list-style: none;
}
nav li{
	display: inline;
}
nav li a{
	border-left: 8px solid #C97556;
	color: #743d69;
	display: block;
	padding: 3px 10px;
	text-decoration: none;
}
/* article Style */
article{
    background-color:#ffffff;
    padding : 10px 0 0 10px;
    width:100%;
}

少しだけ綺麗になりました。

微調整後

ポイントは2つです。

  • navとarticleの高さと配置を同じ値にする
  • navとarticleのpositionをabsoluteにして重ねる
重ねる

transitionを追加する

コンテンツ部分のposition:leftをアニメーションで変更するようにします。

article{
    background-color:#ffffff;
    padding : 10px 0 0 10px;
    width:100%;
    /* ここから追加 */
    left:0%;
    transition-duration: .3s;
    transition-property:left;
    transition-timing-function:ease-out;
    -webkit-transition-duration: .3s;
    -webkit-transition-property:left;
    -webkit-transition-timing-function:ease-out;
}
/* これも追加、今回はjavascriptをトリガーにするが、hoverやclickedなどcssだけでも可能 */
article.move{
    left:150px;
}

jQueryでトリガーを仕掛ける

jqueryを使います。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(function(){
    $('#menu').on('click',function(e){
        var article = $('article');
        if(article.attr("class")){
            article.removeClass();
        }else{
            article.addClass('move');                
        }
    });
    });
// ]]></script>

class属性があったらmoveクラスを追加して、既に追加済みの場合はclassを削除します。

まとめ

transitionで変化させるプロパティの初期値をちゃんと追加してないと動かないです。
今回の場合はleft:0%を忘れると動きません。

jQueryでアニメーションを起動させていますが、checkboxのcheckedとかhoverなどで属性を変化させるとcssのみでアニメーションを起動することが出来ます。
例) a#menu:hover{left:150px}

ベンダープレフィックスはwebkitのみですが、moz、ms、oも追加しておいたほうが無難です。
そのへんは基本が曖昧でも「なんとなく出来てしまう」compassでやるほうが楽なんですよね。。

Add a Comment

メールアドレスが公開されることはありません。