プルダウンメニューのCSS生成してくれる「Menu Builder beta v1.3」-Dig*Dag

CSSによるプルダウンメニューを生成できるCSSplayの「Menu Builder beta v1.3」

CSSを使ったプルダウンメニューを簡単に生成してくれる「Menu Builder beta v1.3」
「MENU　BUILDER　DEMO」のようなプルダウンメニューがウェブ上で簡単に生成できます。
僕もも試しに作ってみましたｗｗｗｗ

「Menu Builder beta v1.3」で実際にプルダウンメニューを作ってみる

下部のLabel部にメニューのテキストを入力。
隣にはURLを入力します。
Updateボタンで上部に反映されます。
Get Manu Codeボタンは最後にCSSコードとHTMLコードを生成するボタンです。

もちろんメニューの背景色、フォントカラー、マウスホバー時の背景色、フォントカラー、フォントスタイルなども変更できます。

Homeというメニューを作った後、New Itemボタンをクリックし次のメニューを作ります。
今回は「カテゴリー」というメニューを作ります。

メニューのタイトル、URLを入力した後、上部の先ほど生成した「Home」をクリックすると、次のメニュー「カテゴリー」をどこの位置に作るかを問うウインドウが開きます。
当然「Home」の後に作りますので「After 'Home'」をクリックします。
「カテゴリー」はプルダウンにしていくのでURLは未入力にしてあります。
「As sub item of 'Home'」をクリックするとサブメニューを生成します。

同じように繰り返していくと上のようにプルダウンメニューが生成されます。
最後に「Get Manu Code」をクリックすればCSSコードとHTMLコードが生成されるのでコピペして自分のページに実装してください。

プルダウンメニューはli要素の入れ子で作られますが、階層が深くなればなるほどHTMLコードが複雑化します。
こんなに簡単にプルダウンメニューが生成できるとは・・・

「Menu Builder beta v1.3」かなり便利です。

---

• 前の記事：「「CSS play」 カッコイイメニューのページを集めてみました」
• 次の記事：「迷子にならない関連記事へのナビゲーションをブログに付ける」

Comments

What say you?

Name

Subject

Mail

URI

Comment

Pass

Secret

管理者にだけ表示を許可する

Track backs

http://digdagdig.blog117.fc2.com/tb.php/281-4fa7b16b

この記事にトラックバックする(FC2ブログユーザー)