メニューリストを横から順番に表示させる 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); }); });
関連記事
-
-
All in One SEO Packで XMLサイトマップをGoogleに 送信する方法
ワードプレスのプラグインで超有名な『All in One SEO Pack』ですが、必ず入れたいプラグインの1つです。 その名前の通り、SEO関係の機能が一つにまとまっているので、かなり …
-
-
スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた
WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …