CSSと画像を使い、アニメーション効果をつけて表示するBOXメニューです。5色に分けたタイトル付きの各エリアにそれぞれオンマウスすると、コンテンツの詳細画像をアニメーション効果を付けて下から浮かび上がらせます。製品紹介などに向いていると思います。サンプルの画像は単なるダミーですが、ここに製品の概要や製品詳細ページなどへのリンクを貼ると効果的なナビになりそうです。

サンプルのhtmlソース

<div class="nav">
  <div class="box home">
    <a href="#home">百万石受注システム
      <span><img src="s01.png" alt="百万石受注システム" /></span></a>
  </div>
  <div class="box about">
    <a href="#about">百万石購買システム
      <span><img src="s02.png" alt="百万石購買システム" /></span></a>
  </div>
  <div class="box portfolio">
    <a href="#portfolio">0万石受注システム
      <span><img src="s03.png" alt="0万石受注システム" /></span></a>
  </div>
  <div class="box services">
    <a href="#services">0万石在庫照会システム
      <span><img src="s04.png" alt="0万石在庫照会システム" /></span></a>
  </div>
  <div class="box contact">
    <a href="#contact">システム受託開発
      <span><img src="s05.png" alt="システム受託開発" /></span></a>
  </div>
</div>

サンプルの主要CSSソース

.box {
	display: inline-block;
  float:left;
	height:350px;
	overflow: hidden;
	width:20%;
	-webkit-transition: width 1s;
	-moz-transition: width 1s;
	transition: width 1s;
	}
.box a {
	color:#FFF;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	height:100%;
	display:block;
	padding-top: 10px;
	}
.box span {
	display:block;
	position:relative;
	top:100%;
	text-align: center;
	-webkit-transition: top 1s;
	-moz-transition: top 1s;
	transition: top 1s;
	}
.nav:hover .box { 
	width:10%; 
	}
.nav .box:hover { 
	width: 60%; 
	}
.box:hover span { 
	top:25%; 
	}