メニューリストを横から順番に表示させる jsとcss
投稿日:
前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、
cssだけで動きのあるメニューを作成しました。
今回は、jsファイルに書き込んで同じようなことができるように作成してみました。
今回も、右から現れてくるように作ってみました。
さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってください。
See the Pen
GRoEMMr by show-be (@show-be)
on CodePen.
<ul class="menu"> <li>Orange</li> <li>Apple</li> <li>Melon</li> <li>Pineapple</li> <li>Grape</li> <li>Strawberry</li> </ul>
ul.menu li { display: block; padding: 5px 20px; width: 30%; margin-bottom: 10px; background: #599999; color: #fff; list-style: none; text-align: left; line-height: 2; opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; } ul.menu li.active { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
$(function() { $("ul.menu li").each(function(i) { setTimeout(function() { $("ul.menu li").eq(i).addClass("active"); }, 200 * i); }); });
関連記事
-
-
WordPress無料有料【LIQUID PRESS】子テーマを作ろう
プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】 レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた④
11.メンバー一覧表示のカスタマイズ メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。 あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変 …