Eyecatch jQuery

Javascript,jQuery

マウスオーバーでブロックごとスライドしてくるナビゲーションバーをjQueryで組んでみた

2015/06/05

ナビゲーションで、マウスオーバーすると画面外に隠れていたナビバー、HTMLでいうところの、liタグで出来た部分がにゅっと出てくるスクリプトは調べていていくつか見たのですが、メニュー部分そのもの(HTMLでいうところのULタグ)が出てくるってのは見かけなかったので、自分で作ってみました。

ブロックごと出現させる利点は、一回のマウスオーバーである程度の数のナビゲーションを一度に見せることが出来る点。
「どのメニューだったっけな」と、全てのバーに対しマウスオーバーさせ「探させる」事が無くなったかな、と思っています。

基本編

イメージ

おなじみ、よくわからないイメージ。

tgHoverMenubarイメージ

HTML

ではソースコードのお披露目。
単純に、ナビゲーションとメインコンテンツ部分を書いています。

CSS

次に、CSS。
ちょっと長いですが、基本的に、ナビゲーション部分の調整です。

JS

では、最後にjavascript。

これだけでOKです。

読み込んだ時と、マウスアウト時に、#navigation 部分を、margin-left:-150px する、といった内容です。
jQuery で書く時は、「margin-left」は「marginLeft」と書きます。

position を fixed にしているので、スクロールしても位置はそのままです。

知っての通り、IE6では position:fixed は効きませんが、IE6なんて使っている人はもう居ないと思いたいですし、IE6対応に工数をとられるのも馬鹿らしいと思うので、個人的は無視してもいいユーザだと思います。

デモ

デモ1はコチラから

アレンジ版

では、少しアレンジしてみます。
HTMLは同じで、CSSとjs部分を若干、変えてみます。

CSS

ナビゲーションに画像を使い、マウスオーバー時の背景色に透明度を使うなどしています。

Javascript

こちらは、margin-left の数値が 50px となっているだけです。

デモ

デモ2はコチラから

IEで見た場合、マウスオーバー時の背景色が角丸にならず、少し残念な事になりますが、リンク部分が背景画像を用いたものになり、見た目的にも良い感じの形となりました。

プラグイン化はしていませんが、要望がありましたらプラグイン化したいと思います。

図解 メイド (F-Files)

図解 メイド (F-Files)

池上 良太

価格 : 1,404円

-Javascript,jQuery
-, , ,