1

基本的な横並び配置のメニューの作り方

基本的な横並び配置のメニューの作り方

html+cssだけで簡単な「横並び配置のメニュー」を作るときに、よくある3パターンのコードをメモしておきます。そのまま使えるようなシンプルなものになっていますので、ご自由にコピー&ペーストしてご利用ください。

 

 

1.横幅20%のcss背景の場合(※レスポンシブ対応)

横幅20%のcss背景の場合(※レスポシブ対応)

 

DEMO1

 

ウィンドウサイズを変えてみるとわかりますがレスポンシブ対応になっています。
まずは、HTMLを見ていきましょう。

 

共通HTML

 headerタグ > navタグ > ulタグ > liタグで5つのナビを記述しています。

 

共通CSS

 

サンプル1_CSS

 liタグに対してfloat:left;で左寄せにして、装飾のためにborderを入れています。
マウスオーバーで背景色を変更。

 

2.横並びナビゲーション : 背景X方向へのリピート画像の場合(※レスポンシブ対応)

横並びナビゲーション : 背景X方向へのリピート画像の場合

 

DEMO2

 

こちらも、サンプル1同様に、ウィンドウサイズを変えてみるとわかりますがレスポンシブ対応になっています。

HTMLは先程の共通HTMLと同じです。

サンプル2_CSS

 

 

3.横並びナビゲーション : 背景画像ボタンの場合

横並びナビゲーション : 背景画像ボタンの場合

 

DEMO3

 

こちらは、navの横幅が1000pxで、ボタンがそれぞれ200pxの幅に固定されており、それぞれに違う背景画像を指定するために、それぞれのliタグにid名を付けています。そして、マウスオーバーで、背景画像を上下に移動することでアクションを見せるため、ボタンの背景画像は下のような画像を利用しています。

navi1

見えている部分の高さが40pxで、マウスオーバーした際に画像をY方向に-40px移動。

サンプル3_CSS

 

こちらに関しては、隠しテキストを利用した記述をしているので、Googleのガイドラインに触れるかどうか微妙なところなので自己責任でこの記述方法はしてください。

 

以上、よく利用される横並びナビゲーションの記述方法になります。

うまく使い分けていけたらいいですね。

 


 

One Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 基本的な横並び配置のメニューの作り方