Welcome, Old Sport!

CSS3 Transition侧边栏导航菜单

by ilikecss ON 2017/01/13 694

CSS3 Transition侧边栏导航菜单2017年大家新年好!很久没有更新教程了,今天为大家分享一款纯手工css3的侧边栏导航菜单。先简单介绍下这个菜单的核心属性transition,这是一个简写属性,用于设置四个过渡属性:

transition-property
transition-duration
transition-timing-function
transition-delay

比如把鼠标指针放到某div元素上,其宽度会从10px逐渐变为100px。

div
{
width:10px;
background:red;
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
}
div:hover
{
width:100px;
}

HTML

<nav class="l-nav">
	<ul class="gNav-lists">
		<li class="gNav-item vol01 is-current">
			<a href="#"><span class="gNav-item_tablet"></span></a>
		</li>
		<li class="gNav-item vol02">
			<a href="#"><span class="gNav-item_tablet"></span></a>
		</li>
		<li class="gNav-item vol03">
			<a href="#"><span class="gNav-item_tablet"></span></a>
		</li>
		<li class="gNav-item gNav-detail vol05"><a href="#"><span class="gNav-item_tablet"></span></a>
			<ul class="gNav-detail-lists is-pc"><li class="gNav-detail-item vol06 non-item"><a href="#"></a></li><li class="gNav-detail-item vol07 non-item"><a href="#"></a></li></ul></li>
		<li class="gNav-item vol04">
			<a href="#"><span class="gNav-item_tablet"></span></a>
		</li>
	</ul>
</nav>

CSS

PS:这款导航菜单支持响应式布局

谁是你老婆?mother fuck

2条评论
  1. 404 ~ lol ~ :grin:




TOP