Instantly share code, notes, and snippets.
gh640/horizontal-menu-style.html
Last active May 8, 2016
水平方向に並ぶメニューのためのスタイルまとめ
<html> | |
<head> | |
<title>水平方向に並ぶメニュー(メインメニューなど)のためのスタイルまとめ</title> | |
<style> | |
/** | |
* レイアウト用のスタイル(メニューとは無関係) | |
*/ | |
body { | |
position: relative; | |
font-family: sans-serif; | |
} | |
.page { | |
position: absolute; | |
box-sizing: border-box; | |
margin: auto; | |
padding: 30px; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
width: 50%; | |
background-color: #eee; | |
} | |
/** | |
* メニューのための共通スタイル | |
*/ | |
/* ul メニューラッパ */ | |
.menu { | |
background-color: #ddd; | |
list-style: none; | |
padding: 0; | |
} | |
/* li メニューアイテム */ | |
.menu-item { | |
background-color: #999; | |
} | |
/* a メニューリンク */ | |
.menu-link { | |
background-color: #333; | |
color: #fff; | |
text-decoration: none; | |
} | |
/* メニューがアクティブなときのスタイル */ | |
.menu-item-active .menu-link { | |
position: relative; | |
background-color: #068; | |
} | |
.menu-item-active .menu-link:after { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
height: 3px; | |
content: " "; | |
background-color: #39a; | |
} | |
/** | |
* 1. float を使ったメニュー | |
*/ | |
.menu-float { | |
overflow: hidden; | |
} | |
.menu-float .menu-item { | |
display: block; | |
float: left; | |
width: 25%; | |
min-width: 100px; | |
text-align: center; | |
} | |
.menu-float .menu-link { | |
line-height: 24px; | |
display: block; | |
padding: 8px 10px; | |
word-wrap: break-word; | |
} | |
/** | |
* 2. inline-block を使ったメニュー | |
*/ | |
.menu-inline { | |
text-align: center; | |
} | |
.menu-inline .menu-item { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.menu-inline .menu-link { | |
display: block; | |
margin: 0 10px; | |
max-width: 200px; | |
padding: 8px 10px; | |
word-wrap: break-word; | |
} | |
/** | |
* 3. table を使ったメニュー | |
*/ | |
.menu-table { | |
display: table; | |
table-layout: fixed; | |
width: 100%; | |
} | |
.menu-table .menu-item { | |
display: table-cell; | |
vertical-align: middle; | |
text-align: center; | |
} | |
.menu-table .menu-link { | |
display: block; | |
padding: 8px 10px; | |
word-wrap: break-word; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="page"> | |
<h1>メニューの実装方法</h1> | |
<h2>float</h2> | |
<ul class="menu menu-float"> | |
<li class="menu-item"><a href="" class="menu-link">ホーム</a></li> | |
<li class="menu-item menu-item-active"><a href="" class="menu-link">アバウト</a></li> | |
<li class="menu-item"><a href="" class="menu-link">serviceserviceserviceserviceservice</a></li> | |
<li class="menu-item"><a href="" class="menu-link">コンタクト</a></li> | |
</ul> | |
<ul> | |
<li>◯ 要素と要素の間に隙間が空かないので指定した幅( 100% など)にぴったり合わせられる。</li> | |
<li>◯ min-width を決めて幅がしきい値よりも狭い場合に末尾の要素を 2 行目に送ることができる。</li> | |
<li>× 改行が発生するとその要素だけ高さが大きくなり、また縦方向の中央寄せもできないので、セル内での改行が発生しないよう調整が必要。</li> | |
</ul> | |
<h2>inline-block</h2> | |
<ul class="menu menu-inline"> | |
<li class="menu-item"><a href="" class="menu-link">ホーム</a></li> | |
<li class="menu-item menu-item-active"><a href="" class="menu-link">アバウト</a></li> | |
<li class="menu-item"><a href="" class="menu-link">serviceserviceserviceserviceservice</a></li> | |
<li class="menu-item"><a href="" class="menu-link">コンタクト</a></li> | |
</ul> | |
<ul> | |
<li>◯ レスポンシブでの中央寄せがやりやすい。</li> | |
<li>◯ 幅が足りない場合は、行内での縦方向の中央揃えを維持しながらスムーズに改行してくれる。</li> | |
<li>× 要素間にスペースが空くので厳密に幅を指定できない(対策はあるが、どのモダンブラウザでも問題なく解決できる方法がなさそう)。</li> | |
</ul> | |
<h2>table</h2> | |
<ul class="menu menu-table"> | |
<li class="menu-item"><a href="" class="menu-link">ホーム</a></li> | |
<li class="menu-item menu-item-active"><a href="" class="menu-link">アバウト</a></li> | |
<li class="menu-item"><a href="" class="menu-link">serviceserviceserviceserviceservice</a></li> | |
<li class="menu-item"><a href="" class="menu-link">コンタクト</a></li> | |
</ul> | |
<ul> | |
<li>◯ 幅 100% ぴったりにしながら( inline アプローチの課題を解決しながら)、かつ、セル内での改行が発生しても縦中央揃えを崩さない( float アプローチの課題を解決する)メニューが作れる。</li> | |
<li>× float や inline のように改行が発生しないので、幅が狭くてセル内改行が想定以上に発生しないよう調整が必要。</li> | |
<li>× table 特有の問題が起こる。例えば CSS の仕様だとテーブルのセルに `position: relative` が使えない(効くブラウザが多いけれど)。</li> | |
</ul> | |
<h2>flexbox</h2> | |
<p>割愛。あと数年すれば主流になるかも。</p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment