2014/08/21

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

HTMLでマークアップ

ナビゲーション部分をHTMLでマークアップします。
idは”navigation”にしておきます。

[html]
<ul id="navigation">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
[/html]

CSSでスタイリング

CSSでスタイリングしていきます。

メニューを水平に並べる

まずはメニューを水平に並べます。
li要素に対してdisplay:block、float:leftを適用します。

[css]
#navigation li {
list-style: none;
display: block;
float: left;
margin: 1em;
}
[/css]

次のようになります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

文字にドロップシャドウのエフェクトをかける

文字にエフェクトをかけます。
text-shadowを利用して、ドロップシャドウのエフェクトをかけます。

[css]
#navigation li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: block;
text-decoration: none;
color: #f0f0f0;
font-size: 1.6em;
margin: 0 .5em;
}
[/css]

次のようになります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

マウスオーバー時のエフェクトを設定する

マウスオンしたときに、少しだけズレるようになエフェクトを付けたいので、margin-bottomを設定します。

[css]
#navigation li a:hover {
margin-top: 2px;
}
[/css]

リボン部分を作成します

リボン部分を作成するには、全体を合計6つのdiv要素を追加する必要があります。
メニュー部分自身、リボン本体部分、右エッジ部分2つ、左エッジ部分2つの合計6つです。
順番に見ていきます。

全体をdivで囲む

メニュー部分全体をdivで囲み、id=”navigation_container”とします。

[html]
<div id="navigation_container">

<!– navigation –>
<ul id="navigation">
<li><a href="#">✭ link 1</a></li>
<li><a href="#">✭ link 2</a></li>
<li><a href="#">✭ link 3</a></li>
<li><a href="#">✭ link 4</a></li>
</ul><!– /navigation –>

</div><!– /container –>
[/html]

この#navigation_containerにCSSを適用します。

[css]
#navigation_container {
margin: 0 auto;
width: 960px;
}
[/css]

本体部分を作成するため、もう一度、内側をdivで囲む

さらに、内側をもう一度divで囲み、class=”rectangle”とします。
この部分はリボンの本体部分となります。

[html]
<div id="navigation_container">

<!– rectangle –>
<div class="rectangle">

<!– navigation –>
<ul id="navigation">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul><!– /navigation –>

</div> <!– /rectangle –>

</div><!– /container –>
[/html]

.rectangleにCSSを適用します。

[css]
.rectangle {
background: #e5592e;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500; /* 本体部分を前面に配置 */
margin: 3em 0;
}
[/css]

次のようになります。

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

リボンのエッジ部分を作成する

リボンのエッジ部分を作成するため、div要素を追加します。
それぞれ左のエッジ部分の上下、右のエッジ部分の上下に合計で4つのdivを追加します。

[html]
<div id="navigation_container">

<!– 左エッジ部分 –>
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<!– /左エッジ部分 –>

<!– rectangle –>
<div class="rectangle">

<!– navigation –>
<ul id="navigation">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul><!– /navigation –>

</div> <!– /rectangle –>

<!– 右エッジ部分 –>
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<!– /右エッジ部分 –>

</div><!– /container –>
[/html]

まずリボンのエッジ上部分から。
エッジ部分に対して、boder-widthプロパティを加えます。
border-widthは50pxとします。
この値がリボンのエッジ上部分の大きさになります。
これに対して、heigthとwidthを0pxにしていることにご注目。
この値をheight,widhtともに50pxとすると以下のようになります。
（わかりやすくするため、リボン本体部分は色を透明にしています）
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

heigthとwidthを0pxにすることによって、以下のような形になります。
ボーダーだけになっている様子がわかります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

ここで、border-colorの上部分以外（青と黄色になっている部分）をtransparent＝透明にすれば、二等辺三角形を形作ることができます。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

さらに、float:leftで本体を回りこませます。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

下部分も同じ要領で作成しますが、floatの値が変わっていることに注意してください。
位置をずらすことで、上と下の三角形を重ね合わせて、リボンのエッジ部分になります。
わかりやすく色を変えると以下のようになります。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

最後に、エッジ部分を左にずらして、リボン本体の下に隠して、リボンのエッジを表現しています。
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

[css]
.l-triangle-top {
border-color: #d9542b transparent transparent;/* 上、左右、下 */
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 1px;
left: -50px;
}

.l-triangle-bottom {
border-color: transparent transparent #d9542b;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -40px;
left: -150px;
}
[/css]

右部分も同じように指定します。

[css]
.r-triangle-top {
border-color: #d9542b transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -107px;
}

.r-triangle-bottom {
border-color: transparent transparent #d9542b;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -149px;
right: -145px;
}
[/css]

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法