CSSだけで作成したアニメーション効果のあるメニュー

TOP > サンプル >  アニメーション効果のあるメニュー
このエントリーをはてなブックマークに追加

アニメーション効果のあるメニュー

通常の横メニュー(親子)

サンプルソースを表示 

ul.menu2 {
	clear:both;
    background-color:#000;
    height:40px;
    overflow:hidden;
}
ul.menu2 li {
    float:left;
    padding: 10px 8px;
    font-size:10pt;
    border-left:1px solid #111;

}
ul.menu2 li:last-child
{
    border-right:1px solid #111;
}
ul.menu2 li a {
	color:white;
    text-decoration:none;
}
ul.menu2 li:hover {
    font-weight:bold;
	background: rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
}
ul.menu2 a:hover {
	 text-decoration:underline;
}
ul.menu_sub2 {
    display:none;
    border:none;

}
ul.menu2 li:hover ul.menu_sub2{
	position:absolute;
    display:block;
    padding:0px;
}
ul.menu_sub2 li {
	background-color:#000;
	box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
ul.menu_sub2 a:hover {
	 text-decoration:underline;
}

<ul class="menu2">
<li>
	<a href="/" title="top">あいうえお</a>
	<ul class="menu_sub2">
	<li><a href="/html/" title="HTML">aaa</a></li>
	<li><a href="/html/" title="HTML">bbb</a></li>
	<li><a href="/html/" title="HTML">ccc</a></li>
	</ul>
</li>
<li>
	<a href="/html/" title="HTML">かきくけこ</a>
	<ul class="menu_sub2">
	<li><a href="/html/" title="HTML">aaa</a></li>
	<li>bbb</li>
	<li><a href="/html/" title="HTML">ccc</a></li>
	</ul>
</li>
<li>
	さしすせそ
	<ul class="menu_sub2">
	<li><a href="/html/" title="HTML">ddd</a></li>
	<li><a href="/html/" title="HTML">eee</a></li>
	<li><a href="/html/" title="HTML">fff</a></li>
	</ul>
</li>
<li>
	<a href="/html/" title="HTML">たちつてと</a>
</li>
</ul>

+文字を大きく

サンプルソースを表示 

ul.menu3 {
	clear:both;
    background-color:#000;
    height:40px;
    overflow:hidden;
}
ul.menu3 li {
    float:left;
    padding: 10px 8px;
    font-size:10pt;
    border-left:1px solid #111;

}
ul.menu3 li:last-child
{
    border-right:1px solid #111;
}
ul.menu3 li a {
	color:white;
    text-decoration:none;
}
ul.menu3 li:hover {
    font-weight:bold;
	background: rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
    font-size:20pt;
}
ul.menu3 a:hover {
	 text-decoration:underline;
}
ul.menu_sub3 {
    display:none;
    border:none;

}
ul.menu3 li:hover ul.menu_sub3{
	position:absolute;
    display:block;
    padding:0px;
}
ul.menu_sub3 li {
	background-color:#000;
	box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
ul.menu_sub3 a:hover {
	 text-decoration:underline;
}

<ul class="menu3">
<li>
	<a href="/" title="top">あいうえお</a>
	<ul class="menu_sub3">
	<li><a href="/html/" title="HTML">aaa</a></li>
	<li><a href="/html/" title="HTML">bbb</a></li>
	<li><a href="/html/" title="HTML">ccc</a></li>
	</ul>
</li>
<li>
	<a href="/html/" title="HTML">かきくけこ</a>
	<ul class="menu_sub3">
	<li><a href="/html/" title="HTML">aaa</a></li>
	<li>bbb</li>
	<li><a href="/html/" title="HTML">ccc</a></li>
	</ul>
</li>
<li>
	さしすせそ
	<ul class="menu_sub3">
	<li><a href="/html/" title="HTML">ddd</a></li>
	<li><a href="/html/" title="HTML">eee</a></li>
	<li><a href="/html/" title="HTML">fff</a></li>
	</ul>
</li>
<li>
	<a href="/html/" title="HTML">たちつてと</a>
</li>
</ul>

+アニメーション

サンプルソースを表示 

ul.menu {
	clear:both;
    background-color:#000;
    height:40px;
    overflow:hidden;
}
ul.menu li {
    float:left;
    padding: 10px 8px;
    font-size:10pt;
    border-left:1px solid #111;
	transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
}
ul.menu li:last-child
{
    border-right:1px solid #111;
}
ul.menu li a {
	color:white;
    text-decoration:none;
}
ul.menu li:hover {
    font-weight:bold;
    font-size:20pt;
	background: rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
}
ul.menu a:hover {
	 text-decoration:underline;
}
ul.menu_sub {
    display:none;
    border:none;
}
ul.menu li:hover ul.menu_sub{
	position:absolute;
    display:block;
    padding:0px;
}
ul.menu_sub li {
	background-color:#000;
	box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
ul.menu_sub a:hover {
	 text-decoration:underline;
}

<ul class="menu">
<li>
	<a href="/" title="top">あいうえお</a>
	<ul class="menu_sub">
	<li><a href="/html/" title="HTML">aaa</a></li>
	<li><a href="/html/" title="HTML">bbb</a></li>
	<li><a href="/html/" title="HTML">ccc</a></li>
	</ul>
</li>
<li>
	<a href="/html/" title="HTML">かきくけこ</a>
	<ul class="menu_sub">
	<li><a href="/html/" title="HTML">aaa</a></li>
	<li>bbb</li>
	<li><a href="/html/" title="HTML">ccc</a></li>
	</ul>
</li>
<li>
	さしすせそ
	<ul class="menu_sub">
	<li><a href="/html/" title="HTML">ddd</a></li>
	<li><a href="/html/" title="HTML">eee</a></li>
	<li><a href="/html/" title="HTML">fff</a></li>
	</ul>
</li>
<li>
	<a href="/html/" title="HTML">たちつてと</a>
</li>
</ul>

+グラデーション(完成)

サンプルソースを表示 

ul.menu {
	clear:both;
    background-color:#000;
    height:40px;
    overflow:hidden;
}
ul.menu li {
    float:left;
    padding: 10px 8px;
    font-size:10pt;
    border-left:1px solid #111;
	transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
}
ul.menu li:last-child
{
    border-right:1px solid #111;
}
ul.menu li a {
	color:white;
    text-decoration:none;
}
ul.menu li:hover {
    font-weight:bold;
    font-size:20pt;
	background: rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
}
ul.menu a:hover {
	 text-decoration:underline;
}
ul.menu_sub {
    display:none;
    border:none;
}
ul.menu li:hover ul.menu_sub{
	position:absolute;
    display:block;
    padding:0px;
}
ul.menu_sub li {
	background-color:#000;
	box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
ul.menu_sub a:hover {
	 text-decoration:underline;
}
.grad2 {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #afbdc0), color-stop(0.50, #6d7673), color-stop(0.50, #0a0f0b), color-stop(1.00, #0a0809));
    background: -webkit-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
    background: -moz-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
    background: -o-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
    background: -ms-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
    background: linear-gradient(to bottom, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	border-radius: 10px;
	box-shadow: 0px 3px 5px #666;
}

<ul class="menu grad2">
<li>
	<a href="/" title="top">あいうえお</a>
	<ul class="menu_sub">
	<li><a href="/html/" title="HTML">aaa</a></li>
	<li><a href="/html/" title="HTML">bbb</a></li>
	<li><a href="/html/" title="HTML">ccc</a></li>
	</ul>
</li>
<li>
	<a href="/html/" title="HTML">かきくけこ</a>
	<ul class="menu_sub">
	<li><a href="/html/" title="HTML">aaa</a></li>
	<li>bbb</li>
	<li><a href="/html/" title="HTML">ccc</a></li>
	</ul>
</li>
<li>
	さしすせそ
	<ul class="menu_sub">
	<li><a href="/html/" title="HTML">ddd</a></li>
	<li><a href="/html/" title="HTML">eee</a></li>
	<li><a href="/html/" title="HTML">fff</a></li>
	</ul>
</li>
<li>
	<a href="/html/" title="HTML">たちつてと</a>
</li>