• かちびと.net

    ユニークなボックスタイプのナビゲーションメニューを実装するjQueryプラグイン・BoxyMenuのご紹介です。ドロップダウン択一だったのでこういうアイデアは参考になりました。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ユニークなボックスタイプのナビゲーションメニューを実装するjQueryプラグイン・BoxyMenu

スポンサーリンク

いろいろとアイデアが参考になった
ので備忘録。ボックスタイプのナビ
メニューで、ユニークなUIです。こ
ういうアイデアというか、発想が出
てくるようになりたいです。

というわけでただのメモ。僕では思い浮かばないアイデアで素敵だったので衝動的に書き留めておきます。

BoxyMenu


一見変哲も無いコンテンツですけど・・・どうもドロップダウンメニューにして当然、みたいな流れが自分の中にあったのでいい刺激になりました。


こんな感じ。ドロップダウンも子要素を隠すものですし、同じように隠すならこういう形もありだなぁと思いました。子要素が少ないことが条件ですけど・・・

手抜きですけどサンプル用意しました。

Sample

ピンを押すとマウスを離しても戻らず固定できます。cookie使うのもありですね。これはいいユーザビリティかもしれない。

ただ、最初はピンを押せるって分かりませんでした。もう少し分かりやすく明示してあげたほうがいいかも。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="boxymenu.js" type="text/javascript"></script>

本体とプラグインを読み込みます。

<script type="text/javascript">
        $(document).ready(function () {
            $('#menu-wrapper').boxymenu({
           itemDisplaySpeed : 300,
           boxHorizontal: 8 ,
           boxVertical: 6
           });
        });
</script>

あとは上記のようにスピードやら初期表示時のエフェクトの処理をオプションで決めます。

デフォルトのパラメータは以下の通りです。これに沿ってオプションで変更してください。

menuItemWidth: 200,//メニューの幅
menuItemHeight: 150,//メニューの高さ
boxHorizontal: 4,//初期表示時アニメの列数
boxVertical: 3,//行数
loadAnimationSpeed: 400,//ロードにかかる時間
itemDisplaySpeed: 1000//スライドスピード

グローバルメニューでのピンのアイデアはちょっといいなって思いました。スクリプトは以下よりどうぞ。

BoxyMenu

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services