福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン

ご指定された単一記事を表示しています。
2013年7月27日 タグ:

jQuery マウスオーバーで横からパネルかメニューをニューっと出す

jQuery マウスオーバーで横からパネルかメニューをニューっと出す

jQueryを使って、マウスオーバーするとパネルがニューッと出てくる方法をご紹介します。
表示スペースを有効に使いたいときや、ちょっとしたサイトアクセントにいいかもしれません。

INDEX
  1. バネル全体がニューッと出てくるタイプ
  2. 各メニューがニューッと出てくるタイプ
  3. 補足:パネル全体がニューッと出てくるタイプ(右から)

基本的な作り方は同じで、違うのはCSSだけです。

バネル全体がニューッと出てくるタイプ

▶ DEMO 1

jQuery読み込み
*<head>〜</head>の間に以下のソースを記述

JavaScript
*<head>〜</head>の間に以下のソースを記述
*↑のjQuery本家より下に記述

HTML
*<body>〜</body>間ならどこに記述しても大丈夫です。

CSS
*画像はご用意ください。

▲ PAGE TOP

各メニューがニューッと出てくるタイプ

▶ DEMO 2

jQuery読み込み
*<head>〜</head>の間に以下のソースを記述

JavaScript
*<head>〜</head>の間に以下のソースを記述
*↑のjQuery本家より下に記述

HTML
*<body>〜</body>間ならどこに記述しても大丈夫です。

CSS
*画像はご用意ください。

▲ PAGE TOP

参考にさせていただいたサイト
jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種 | webOpixel

補足:左からニューっとだす場合(2015/11/03追記)

左からでてくるのはどうやったら?というご質問があったので、簡単ではありますがソースをご紹介します。

下記のソースを丸ごとコピーして、HTMLファイルを作成してご確認ください。
29行目を追加。17・31・70・73行目は変更です。

▶ DEMO 3

カテゴリー:jQuery
タグ:

コメント

「jQuery マウスオーバーで横からパネルかメニューをニューっと出す」への3件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

FB Comment 試験中