|
[tr][td] 之前分享过一款非常酷的CSS3垂直下拉动画菜单，是多级菜单。今天我们来看一款也是用CSS3制作的垂直菜单，是仿Google Play的菜单，菜单项都带有可爱的小图标，可以先来看看效果图：
图片：1525531yfywr1y0d909zxx.jpg  当然你可以在这里看到这款垂直菜单的DEMO演示 接下来我们来一起分析一下这款Google Play垂直菜单的源代码，菜单主要由HTML代码和CSS代码组成。 先来看看HTML代码结构： [*] [*] [*] [*]Store [*] [*]**s [*] [*]Music [*] [*]Books [*] [*]Magazines [*] [*]Devices [*] [*] 复制代码 看起来结构是不是很清晰，一个ul li列表就搞定了。 然后来看看CSS代码： [*]nav { [*] background: rgba(245, 245, 245, 0.95); [*] box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); [*] -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); [*] -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); [*] width: 200px; [*] margin:30px 0 0 200px; [*]} [*]nav ul { [*] padding: 0; [*] margin: 0; [*]} [*]nav ul li { [*] list-style: none; [*] height: 50px; [*]} [*]nav ul li:hover { [*] width: 200px; [*] height: 50px; [*]} [*]nav ul li a { [*] position: absolute; [*] width: 140px; [*] height: 40px; [*] text-decoration: none; [*] color: #555; [*] padding: 10px 0 0 60px; [*]} [*]nav ul li a:hover { [*] color: #fff; [*]} [*] [*].store { [*] background: #b3c833; [*] width: 50px; [*] height: 50px; [*] margin-bottom: px; [*]} [*] [*].**s { [*] background: #ce5043; [*] width: 50px; [*] height: 50px; [*] margin-bottom: px; [*]} [*] [*].music { [*] background: #fb8521; [*] width: 50px; [*] height: 50px; [*] margin-bottom: px; [*]} [*] [*].books { [*] background: #1aa1e1; [*] width: 50px; [*] height: 50px; [*] margin-bottom: px; [*]} [*] [*].magazines { [*] background: #5e5ca6; [*] width: 50px; [*] height: 50px; [*] margin-bottom: px; [*]} [*] [*].devices { [*] background: #658092; [*] width: 50px; [*] height: 50px; [*] margin-bottom: px; [*]} 复制代码 这里是定义了整个菜单的外观，包括排列、颜色、字体等样式，这里并没有用到CSS3的相关特性。 接下来是小图标的定义，这里利用了CSS3的data属性： [*].store-icon { [*] position: absolute; [*] margin-left: 10px; [*] padding-top: 12px; [*]} [*].store-icon:before { [*] width: 50px; [*] height: 50px; [*] margin-right: 30px; [*] content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAA0UlEQVRIx+XWUQ2DMBCA4UpAAhIqAQmTgIRJqIRKqAQkIAEJSKiDfy+3rFm6wpWyJeySvnC0H1euBAOYbwzzE6gUQAcEIPKKCbCFOToIsAkQAAd4uRaBWytokQVtpspnrj8EAaNUMn7I95L3R6EJWDfeX/YeLTQD0wbkyCxQam9P+3A5yF0OuhcmRGBtBQ2FCXPS7lEBDVVQclDdTrAeejusoQbqNFAClh7QZg+ssqI9W2gOQdIUe7qwDpJtWhRdp4aifPe0oYZq4x+g6/1unTkek/bCyLhDiUMAAAAASUVORK5CYII="); [*]} 复制代码 这里我们只列出了一个菜单项的小图标定义，其它的也都类似。 这款垂直菜单就这样完成了，源代码已经上传，下载地址>> 关键词：CSS3、html5 [/td][/tr] |
|
