此作品是一款效果非常棒的css3仿flash动画左侧浮动导航菜单效果，没有用到jquery的动画插件，只用了纯css3代码就实现了，非常实用，但最佳效果只能在支持css3样式的主流浏览器上可以看得到。。。
主要样式代码如下：
#side_left_menu.side_list li {
width:150px;
text - align:center;
margin:0 auto;
height:60px;
margin - bottom:10px;
box - shadow:2px 2px 4px rgba(0,0,0,0.2);
- webkit - transition:0.3s all ease;
- moz - transition:0.3s all ease;
- ms - transition:0.3s all ease;
- o - transition:0.3s all ease;
transition:0.3s all ease;
overflow:hidden;
position:relative;
border - right:5px solid orange;
}
#side_left_menu.side_list li:hover {
background:#009999;
box - shadow:2px 2px 4px rgba(0,0,0,0.4);
border - right:5px solid#fff;
}
#side_left_menu.side_text h2,#side_left_menu.side_text a {
font - family:"Microsoft YaHei";
color:#333;
text - shadow:1px 2px 4px#999;
font - size:24px;
font - weight:normal;
- webkit - transition:0.3s all ease;
- moz - transition:0.3s all ease;
- ms - transition:0.3s all ease;
- o - transition:0.3s all ease;
line - height:55px;
padding:0px;
margin:0px;
text - align:center;
float:none;
}
#side_left_menu.side_text h3 {
font - family:Verdana;
font - size:14px;
color:#666;
font - weight:normal;
- webkit - transition:0.3s all ease;
- moz - transition:0.3s all ease;
- ms - transition:0.3s all ease;
- o - transition:0.3s all ease;
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
导航菜单 动画插件 在线客服 滑动插件 css3 二级菜单 selectmenu