CSS Menu Builderを使ってみました

前回は、CSSフレームワークSkeletonを試してみましたが、今回はメニューやパンくずリストに特化したメニューを作成できるCSS Menu Builderを試してみたいと思います。このCSS Menu Builderは水平メニュー、垂直メニュー、パンくずリストを自動生成できるメニュー専門のCSSジェネレーターです。

1) それでは、CSS Menu Builderのサイトを見てみましょう。水平メニュー、垂直メニュー、パンくずリストから選択するようになっています。

2) 水平メニューをクリックしてみます。『select images』では、左がリストの全体枠である背景色『ul』のスタイル、右が各ボタン『li』のスタイルを選択するようになっています。『preview』でどんな形のリストメニューになるか確認することが出来ます。

3) 『selcet colors』をクリックすると、左上が背景色、左下が非アクティブ色、右上がマウスホバー時の色、右下がアクティブ時の色となっています。

4) 背景色やボタン色が決まったら、『add links』をクリックします。ここでは、リンクの名称やリンクのURLを入力します。デフォルトのリンクを削除して、新しいリンクを入力します。リンク先のアドレスが決まっていないなら、『Link URL』には『#』を入力します。

5) 最後に『export』ボタンをクリックすると、『Download』ボタンが表示されますので、クリックして、Zipファイルをダウンロードします。

6) ダウンロードして、解凍したフォルダ(cssmenubuilder)内を見てみます。『css』フォルダ、『images』フォルダ、index.htmlファイルがあります。cssフォルダ内に、『stylesheet.css』ファイル、imagesフォルダ内にtopMenuImages.pngファイルがあります。index.htmlをクリックすると、作成したメニューが表示されました。

7) 既存のサイトへの挿入方法は、まず、index.htmlの中の、<ul class=”menu”>から</ul>の部分を表示したい部分に挿入します。

<ul class=”menu”>
<li><a href=”#” class=”active”><span>TOP</span></a></li>
<li><a href=”#”><span>業務案内</span></a></li>
<li><a href=”#”><span>会社案内</span></a></li>
<li><a href=”#”><span>求人案内</span></a></li>
<li><a href=”#”><span>リンク</span></a></li>
</ul>

8) 次に、『css/stylesheet.css』ファイルを、既存のCSSファイルが保存されているフォルダに保存します。尚、既存のスタイルシートが同じ名前なら、別名で保存します。

9) 既存のスタイルシートの最初に下記のコードを挿入します。

@import “stylesheet.css”;

10) 最後に『css/stylesheet.css』ファイルの『background:url(“../images/topMenuImages.png”)』の箇所を実際に『topMenuImages.png』ファイルを保存した箇所に書き換えます。

11) それでは、ブラウザで確認してみます。

本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

2011年12月28日 | コメント/トラックバック(0) | トラックバックURL |

カテゴリー:CSS

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ