2014/08/21

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

HTMLでマークアップ

ナビゲーション部分をHTMLでマークアップします。
idは”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>

</ul>

CSSでスタイリング

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

メニューを水平に並べる

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

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

#navigation li {

list-style: none;

display: block;

float: left;

margin: 1em;

}

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

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

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

#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;
}

#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;

}

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

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

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

#navigation li a:hover {
        margin-top: 2px;
}

#navigation li a:hover {

margin-top: 2px;

}

リボン部分を作成します

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

全体をdivで囲む

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

<div id="navigation_container">
 
<!-- navigation -->
   <ul id="navigation">
      <li><a href="#">&#10029; link 1</a></li>
      <li><a href="#">&#10029; link 2</a></li>
      <li><a href="#">&#10029; link 3</a></li>
      <li><a href="#">&#10029; link 4</a></li>
   </ul><!-- /navigation -->
 
</div><!-- /container -->

</ul>

</div>

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

#navigation_container {
   margin: 0 auto;
   width: 960px;
}

#navigation_container {

margin: 0 auto;

width: 960px;

}

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

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

<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 -->

</ul>

</div>

</div>

.rectangleに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;
}

.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;

}

次のようになります。

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

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

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

<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 -->

</ul>

</div>

</div>

まずリボンのエッジ上部分から。
エッジ部分に対して、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だけで実装する方法

.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;
}

.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;

}

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

.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;
}