HTML5+CSS3でサイトを作ってみる。

■ 応用編02

Javascriptなしでプルダウンメニューを実装

Javascriptなしでプルダウンメニューを実装します。

サンプルhtml

--[ html ]-----------------------

  <div id="pullmenu">
    <ul>
      <li>
        <dl>
          <dt><p>炭水化物</p></dt>
          <dd><a href="">コメ</a></dd>
          <dd><a href="">パン</a></dd>
          <dd><a href="">麺類</a></dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt><p>たんぱく質</p></dt>
          <dd><a href="">肉</a></dd>
          <dd><a href="">魚</a></dd>
          <dd><a href="">たまご</a></dd>
          <dd><a href="">豆製品</a></dd>
        </dl>
      </li>
    </ul>
  </div>

--[ CSS ]------------------------

#pullmenu{
	cursor:pointer;
}
#pullmenu ul{
	display:block;
	text-align:center;
	margin:auto;
	background:#85735b;
}
#pullmenu li{
	display:inline-block;
	vertical-align:top;
	width:18%;
}
#pullmenu dl{
	height:50px;
	overflow:hidden;
	width:100%;
}
#pullmenu dl:hover{
	overflow:visible;
}
#pullmenu dt *,
#pullmenu dd *{
	display:table-cell;
	vertical-align:middle;
	width:100%;
	padding:0 10px;
	font-size:1em;
	line-height:1em;
	word-wrap: break-word;
}
#pullmenu dd *{
	padding:10px;
	background:#eee3c8;
}
#pullmenu dt *:hover,
#pullmenu dd *:hover{
	color:#fff;
	background:#e67664;
}
#pullmenu dt,
#pullmenu dd{
	position:relative;
	display:table;
	table-layout: fixed;
	width:100%;
	vertical-align:middle;
}
#pullmenu dt{
	z-index:0;
	background:#e1c269;
	height:50px;
}
#pullmenu dd{
	z-index:1;
}

アコーディオンメニューを実装

参考にしたサイト：Venturelab

サンプルhtml

--[ html ]-----------------------

<ul class="accordion">
	<li class="sli01"><p>スライド1スライド1スライド1スライド1</p></li>
	<li class="sli02"><p>スライド2スライド2スライド2スライド2</p></li>
	<li class="sli03"><p>スライド3スライド3スライド3スライド3</p></li>
	<li class="sli04"><p>スライド4スライド4スライド4スライド4</p></li>
</ul>

--[ CSS ]------------------------

.accordion{
	width:300px;
	overflow:hidden;
	list-style:none;
	margin-bottom:10px;
	background:#333;
}
.accordion li{
	float:left;
	width:25%;
	overflow:hidden;
	height:50px;
	-moz-transition:width 0.2s ease-out;
	-webkit-transition:width 0.2s ease-out;
	-o-transition:width 0.2s ease-out;
	transition:width 0.2s ease-out;
	-moz-transition-delay:0.15s;
	-webkit-transition-delay:0.15s;
	-o-transition-delay:0.15s;
	transition-delay:0.15s;
}
.accordion li p{
	margin:10px;
}
.accordion:hover li{
	width:10%;
}
.accordion li:hover{
	width:70%;
}
.sli01	{ background:#ccc; color:#000; }
.sli02	{ background:#999; color:#000; }
.sli03	{ background:#666; color:#fff;}
.sli04	{ background:#000; color:#fff;}

ホバーエフェクト

画像を上下左右、それぞれ違う方向からhoverしてみると、それぞれ違う動きをします。
参考にしたサイト：demonsthenes.info

This is from right This is from top This is from left This is drom bottom

サンプルhtml

--[ html ]-----------------------

<div id=multiHover>
	<span>This is from right</span>
	<span>This is from top</span>
	<span>This is from left</span>
	<span>This is drom bottom</span>
	<img src=img/backgroundLeaves.jpg alt="heart">
</div>

--[ CSS ]------------------------

#multiHover {
	position: relative;
	overflow:hidden;
	width:300px;
	height:199px;

}
#multiHover span {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	font-size: 2em;
	transition: .3s linear;
	-webkit-transition: .3s linear;
	color:white;
	padding: 3%;
	opacity: 0;
}

#multiHover span:nth-child(1) {
	top: 0;
	left: 90%;
	background: hsla(0,70%,50%,0.6);
}
#multiHover span:nth-child(2) {
	top: -90%;
	left: 0;
	background: hsla(90,70%,50%,0.6);
}
#multiHover span:nth-child(3) {
	top: 0;
	left: -90%;
	background: hsla(180,70%,50%,0.6);
} 
#multiHover span:nth-child(4) {
	top: 90%;
	left: 0;
	background: hsla(270,70%,50%,0.6);
}


#multiHover span:hover { opacity: 1; }
#multiHover span:nth-child(odd):hover { left: 0; }
#multiHover span:nth-child(even):hover { top: 0; }