WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

css3を使ったドロップダウンメニュー

css3のアニメーションでフェードインなどを表現する場合、「display:none」から「display:block」ではアニメーションを効かせる事が出来ないので、代わりに「visibility:hidden;」と「visibility: visible;」を使用します。
ただ、visibilityの指定のみだと、アニメーションは効かないので必ず一緒に「opacity」の指定もします。

visibility

visibilityプロパティは、ボックスの表示(visible)・非表示(hidden)を指定する際に使用します。
非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。ボックス自体を無くしてしまいたい場合には、displayプロパティでnoneを指定します。


<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドロップダウンメニュー</title>
<style>
#btn {
width: 200px;
height: 50px;
background: #EE3639;
position: relative;
}
#btn:hover {
background: #DE9D9E;
}
#box {
width: 500px;
height: 500px;
background: #59CED6;
position: absolute;
top: 50px;
left: 0;
visibility: hidden;
opacity: 0;
transition:0.5s;
}
#btn:hover #box {
visibility: visible;
opacity: 1;
}
#inner {
width: 200px;
height: 200px;
background: #222;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>

<body>
<div id="btn">
<div id="box">
<div id="inner"></div>
</div>
</div>
</body>
</html>