この写真の記事へ

jQueryを使わずスライドするサイドメニューを作る方法(画像)(7ページ目)

更新日：2016年07月03日

執筆者：西村文宏

ホームページ作成ガイド

サイドメニューの表示効果14「Delayed 3D Rotate」

サイドメニューの表示効果14「Delayed 3D Rotate」

この写真の記事へ

配布サイトで「Download source」ボタンをクリック

サイドメニューを動的に表示する際のアニメーション効果を14種類から簡単に選択できるjQueryスクリプト「Sidebar Transitions」

サイドメニューの表示効果1「Slinde in on top」

メニューの表示効果3「Push」

サイドメニューの表示効果11「Scale & rotate pusher」

サイドメニューの表示効果14「Delayed 3D Rotate」

div要素4つを使って4階層を作っているだけ

「Slide and Push Menus」スクリプトなら上下左右からメニューバーを出せる

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)

EdgeではWebkit用の記述も有効になっている例

一度無効化されたボタンでも、再度有効な状態に戻せるようにする

よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある

アクセスするたびに異なる画像が表示される

ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる