CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 一款CSS3仿Google Play的垂直菜单

一款CSS3仿Google Play的垂直菜单

         之前分享过一款非常酷的CSS3垂直下拉动画菜单,是多级菜单。今天我们来看一款也是用CSS3制作的垂直菜单,是仿Google Play的菜单,菜单项都带有可爱的小图标,可以先来看看效果图:





当然你可以在这里看到这款垂直菜单的DEMO演示






接下来我们来一起分析一下这款Google Play垂直菜单的源代码,菜单主要由HTML代码和CSS代码组成。


先来看看HTML代码结构:



  1. <nav>
  2.   <ul>
  3.     <li class="store"><span class="store-icon"></span><a href="#">Store</a></li>
  4.     <li class="**s"><span class="**s-icon"></span><a href="#">**s</a></li>
  5.     <li class="music"><span class="music-icon"></span><a href="#">Music</a></li>
  6.     <li class="books"><span class="books-icon"></span><a href="#">Books</a></li>
  7.     <li class="magazines"><span class="magazines-icon"></span><a href="#">Magazines</a></li>
  8.     <li class="devices"><span class="devices-icon"></span><a href="#">Devices</a></li>
  9.   </ul>
  10. </nav>
复制代码

看起来结构是不是很清晰,一个ul li列表就搞定了。

然后来看看CSS代码:



  1. nav {
  2.   background: rgba(245, 245, 245, 0.95);
  3.   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  4.   -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  5.   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  6.   width: 200px;
  7.   margin:30px 0 0 200px;
  8. }
  9. nav ul {
  10.   padding: 0;
  11.   margin: 0;
  12. }
  13. nav ul li {
  14.   list-style: none;
  15.   height: 50px;
  16. }
  17. nav ul li:hover {
  18.   width: 200px;
  19.   height: 50px;
  20. }
  21. nav ul li a {
  22.   position: absolute;
  23.   width: 140px;
  24.   height: 40px;
  25.   text-decoration: none;
  26.   color: #555;
  27.   padding: 10px 0 0 60px;
  28. }
  29. nav ul li a:hover {
  30.   color: #fff;
  31. }

  32. .store {
  33.   background: #b3c833;
  34.   width: 50px;
  35.   height: 50px;
  36.   margin-bottom: px;
  37. }

  38. .**s {
  39.   background: #ce5043;
  40.   width: 50px;
  41.   height: 50px;
  42.   margin-bottom: px;
  43. }

  44. .music {
  45.   background: #fb8521;
  46.   width: 50px;
  47.   height: 50px;
  48.   margin-bottom: px;
  49. }

  50. .books {
  51.   background: #1aa1e1;
  52.   width: 50px;
  53.   height: 50px;
  54.   margin-bottom: px;
  55. }

  56. .magazines {
  57.   background: #5e5ca6;
  58.   width: 50px;
  59.   height: 50px;
  60.   margin-bottom: px;
  61. }

  62. .devices {
  63.   background: #658092;
  64.   width: 50px;
  65.   height: 50px;
  66.   margin-bottom: px;
  67. }
复制代码

这里是定义了整个菜单的外观,包括排列、颜色、字体等样式,这里并没有用到CSS3的相关特性。


接下来是小图标的定义,这里利用了CSS3的data属性:



  1. .store-icon {
  2.   position: absolute;
  3.   margin-left: 10px;
  4.   padding-top: 12px;
  5. }
  6. .store-icon:before {
  7.   width: 50px;
  8.   height: 50px;
  9.   margin-right: 30px;
  10.   content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAA0UlEQVRIx+XWUQ2DMBCA4UpAAhIqAQmTgIRJqIRKqAQkIAEJSKiDfy+3rFm6wpWyJeySvnC0H1euBAOYbwzzE6gUQAcEIPKKCbCFOToIsAkQAAd4uRaBWytokQVtpspnrj8EAaNUMn7I95L3R6EJWDfeX/YeLTQD0wbkyCxQam9P+3A5yF0OuhcmRGBtBQ2FCXPS7lEBDVVQclDdTrAeejusoQbqNFAClh7QZg+ssqI9W2gOQdIUe7qwDpJtWhRdp4aifPe0oYZq4x+g6/1unTkek/bCyLhDiUMAAAAASUVORK5CYII=");
  11. }
复制代码

这里我们只列出了一个菜单项的小图标定义,其它的也都类似。


这款垂直菜单就这样完成了,源代码已经上传,下载地址>>



关键词:CSS3、html5


【一款CSS3仿Google Play的垂直菜单】相关文章

1. 一款CSS3仿Google Play的垂直菜单

2. Google建立HTML5Rocks 回应Apple

3. 纯CSS仿制Google女生节Doodle

4. 纯CSS仿制Google女生节Doodle

5. Google开放Oath 2.0测试平台“OAuth 2.0 Playground”

6. 黑客攻击Google Play导致系统两次崩溃

7. Google七夕情人节Doodle背后技术揭秘

8. 谷歌将整合其博客平台Blogger与Google+服务

9. 谷歌推出给予HTML5技术的网页版Google Catalogs功能

10. Facebook活跃用户正转向Twitter和Google+等服务

本文来源:https://www.51html5.com/a1036.html

点击展开全部

﹝一款CSS3仿Google Play的垂直菜单﹞相关内容

「一款CSS3仿Google Play的垂直菜单」相关专题

其它栏目

也许您还喜欢