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でやるほうが楽なんですよね。。
このページを読んだ人にオススメのブログ記事です！
About The Author
