javascript たった4行でらくらくメニュー作成

yahoo ui もいいのですが、一から作るとどうなるかやってみました。
>> サンプルを見る
■特徴としましては
・スクリプト部分はvisibility属性で見せる/見せないを変えているだけです。超シンプル。
・文字サイズ、リストボックスの高さ、余白の設定をpx単位ではなく
em単位で作りましたので文字サイズを大きくしてもレイアウトが崩れません。(特にWin ie6に有効)
・メニュー項目はul liタグで作成。
■動作確認は
Win: ie6 ie7 firefox2 opera9.1
OSX: safari2 ie5.2 firefox1.5.09 opera9.1
でしました。
cssをもっといじればNN7.1にも対応できると思います。
(現状は文字を拡大するとメニュー下のボーダーが消えてしまっています。)

◎おまけ
以前のエントリーでyahoo ui スライダーを使ってbodyのフォントサイズを増減させてみたのですが、
今回のメニューのサンプルと合体させてみました。
>> yahoo ui スライダー + 自作メニュー
※Mac IE5はAJAX部分が動きませんのであしからず。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中