pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

一款CSS3仿Google Play的垂直菜單

之前分享過一款非常酷的CSS3垂直下拉動畫菜單,是多級菜單。今天我們來看一款也是用CSS3制作的垂直菜單,是仿Google Play的菜單,菜單項都帶有可愛的小圖標,可以先來看看效果圖:

之前分享過一款非常酷的CSS3垂直下拉動畫菜單,是多級菜單。今天我們來看一款也是用CSS3制作的垂直菜單,是仿Google Play的菜單,菜單項都帶有可愛的小圖標,可以先來看看效果圖:

截圖01.jpg

 

接下來我們來一起分析一下這款Google Play垂直菜單的源代碼,菜單主要由HTML代碼和CSS代碼組成。

 

先來看看HTML代碼結構:

 

<nav>

  <ul>

    <li class="store"><span class="store-icon"></span><a href="www.zzarea.com">Store</a></li>

    <li class="**s"><span class="**s-icon"></span><a href="#">**s</a></li>

    <li class="music"><span class="music-icon"></span><a href="#">Music</a></li>

    <li class="books"><span class="books-icon"></span><a href="#">Books</a></li>

    <li class="magazines"><span class="magazines-icon"></span><a href="#">Magazines</a></li>

    <li class="devices"><span class="devices-icon"></span><a href="#">Devices</a></li>

  </ul>

</nav>

 

看起來結構是不是很清晰,一個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+3rFm6wpWyJeySvnC0H1euBAOYbwzzE6gUQAcEIPKK

CbCFOToIsAkQAAd4uRaBWytokQVtpspnrj8EAaNUMn7I95L3R6EJWDfeX/YeLTQD0wbkyCxQam9P+3A5yF0Ouhcm

RGBtBQ2FCXPS7lEBDVVQclDdTrAeejusoQbqNFAClh7QZg+ssqI9W2gOQdIUe7qwDpJtWhRdp4aifPe0oYZq4x+g6

/1unTkek/bCyLhDiUMAAAAASUVORK5CYII=");

}

 

這里我們只列出了一個菜單項的小圖標定義,其它的也都類似。

這款垂直菜單就這樣完成了,源代碼已經上傳,下載地址>>

http://files.cnblogs.com/html5tricks/css3-google-play-store-menu.rar

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

近來,HTML5和CSS3的發展速度還是很可觀的,國內外不乏一些大站,酷站都在使用最新的技術。面對新的技術,我們該如何正確的把握和使用到今后的項目實戰中呢?針對這一問題,浩子
純javascript+CSS3制作精美時鐘。該實例主要應用了CSS3中transform屬性(translate、rotate)、border-radius屬性。 CSS樣式: style type=text/css body { background: black; } .fill { position: absolute; top: 0; right: 0
CSS3動畫實例--jQuery+CSS3制作轉動的3D立方體動畫實例,該實例引用了jQuery v2.0.0插件以及velocity.min.js插件。主要應用了CSS3中transform屬性。 CSS代碼: body { background-image:radial-gradient(circle, #
一、CSS3 animation 簡介 在開始介紹Animation之前我們有必要先來了解一個特殊的東西,那就是Keyframes,我們把他叫做關鍵幀,玩過flash的朋友可能對這個東西并不會陌生。CSS3的Animation就是由
CSS3漸變背景動畫應用,嚴格來說,目前各個瀏覽器都還不支持css3的漸變背景的動畫,所以在制作的時候我們要靈活變通下,這里有兩種方法可以曲折實現漸變背景的動畫: 方法一:
隨著技術的發展,代碼在不斷的進步,進而替代一些圖片所能實現的效果,其中CSS3屬性中Box-shadow表現陰影效果是現代瀏覽器中是一個非常有用的技巧,通過它我們可以做出很多非常酷
主站蜘蛛池模板: 有机肥设备生产制造厂家,BB掺混肥搅拌机、复合肥设备生产线,有机肥料全部加工设备多少钱,对辊挤压造粒机,有机肥造粒设备 -- 郑州程翔重工机械有限公司 | 磁力链接搜索神器_BT磁力狗_CILIMAO磁力猫_高效磁力搜索引擎2024 | 机房监控|动环监控|动力环境监控系统方案产品定制厂家 - 迈世OMARA | 避光流动池-带盖荧光比色皿-生化流动比色皿-宜兴市晶科光学仪器 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | 【法利莱住人集装箱厂家】—活动集装箱房,集装箱租赁_大品牌,更放心 | wika威卡压力表-wika压力变送器-德国wika代理-威卡总代-北京博朗宁科技 | 超声波成孔成槽质量检测仪-压浆机-桥梁预应力智能张拉设备-上海硕冠检测设备有限公司 | 胃口福饺子加盟官网_新鲜现包饺子云吞加盟 - 【胃口福唯一官网】 | 威海防火彩钢板,威海岩棉复合板,威海彩钢瓦-文登区九龙岩棉复合板厂 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 便携式谷丙转氨酶检测仪|华图生物科技百科 | 美侍宠物-专注宠物狗及宠物猫训练|喂养|医疗|繁育|品种|价格 | 安徽净化工程设计_无尘净化车间工程_合肥净化实验室_安徽创世环境科技有限公司 | 机构创新组合设计实验台_液压实验台_气动实训台-戴育教仪厂 | 精密五金加工厂-CNC数控车床加工_冲压件|蜗杆|螺杆加工「新锦泰」 | 南京交通事故律师-专打交通事故的南京律师 | 「安徽双凯」自动售货机-无人售货机-成人用品-自动饮料食品零食售货机 | SDG吸附剂,SDG酸气吸附剂,干式酸性气体吸收剂生产厂家,超过20年生产使用经验。 - 富莱尔环保设备公司(原名天津市武清县环保设备厂) | 彼得逊采泥器-定深式采泥器-电动土壤采样器-土壤样品风干机-常州索奥仪器制造有限公司 | 金蝶帐无忧|云代账软件|智能财税软件|会计代账公司专用软件 | 小型UV打印机-UV平板打印机-大型uv打印机-UV打印机源头厂家 |松普集团 | 真空干燥烘箱_鼓风干燥箱 _高低温恒温恒湿试验箱_光照二氧化碳恒温培养箱-上海航佩仪器 | 学校用栓剂模,玻璃瓶轧盖钳,小型安瓿熔封机,实验室安瓿熔封机-长沙中亚制药设备有限公司 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | 干式磁选机_湿式磁选机_粉体除铁器-潍坊国铭矿山设备有限公司 | 特材真空腔体_哈氏合金/镍基合金/纯镍腔体-无锡国德机械制造有限公司 | 飞歌臭氧发生器厂家_水处理臭氧发生器_十大臭氧消毒机品牌 | 气动机械手-搬运机械手-气动助力机械手-山东精瑞自动化设备有限公司 | 药品/药物稳定性试验考察箱-埃里森仪器设备(上海)有限公司 | 涡轮流量计_LWGY智能气体液体电池供电计量表-金湖凯铭仪表有限公司 | 全自动固相萃取仪_高通量真空平行浓缩仪-勤业永为 | 广西资质代办_建筑资质代办_南宁资质代办理_新办、增项、升级-正明集团 | 拉力机-拉力试验机-万能试验机-电子拉力机-拉伸试验机-剥离强度试验机-苏州皖仪实验仪器有限公司 | 武汉高温老化房,恒温恒湿试验箱,冷热冲击试验箱-武汉安德信检测设备有限公司 | 石家庄小程序开发_小程序开发公司_APP开发_网站制作-石家庄乘航网络科技有限公司 | 捆扎机_气动捆扎机_钢带捆扎机-沈阳海鹞气动钢带捆扎机公司 | 不锈钢管件(不锈钢弯头,不锈钢三通,不锈钢大小头),不锈钢法兰「厂家」-浙江志通管阀 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 北京网站建设|北京网站开发|北京网站设计|高端做网站公司 |