一、Metro风格菜单——简单
HTML
<div class="pagina "> <div class="linha"> <div class="tile amarelo"><span class="titulo">Tile 1</span><br/></div> <div class="tile azul"><span class="titulo">Tile 2</span><br/></div> <div class="tile tileLargo vermelho"><span class="titulo">Tile 3</span><br/></div> <div class="tile verde"><span class="titulo">Tile 4</span><br/></div> <div class="tile tileLargo amarelo"><span class="titulo">Tile 5</span><br/></div> </div> <div class="linha"> <div class="tile tileLargo amarelo"></div> <div class="tile azul"></div> <div class="tile verde"></div> <div class="tile vermelho"></div> <div class="tile tileLargo verde"></div> </div> <div class="linha"> <div class="tile amarelo"></div> <div class="tile verde"></div> <div class="tile vermelho"></div> <div class="tile tileLargo verde"></div> <div class="tile azul"></div> <div class="tile verde"></div> </div> </div>
CSS
.pagina{ width:auto; height:auto;} .linha{ width:auto; padding:5px; height:auto; display:table; } .tile{ height:100px; width:100px; /*tile 1 width*/ float:left; margin:0 5px 0 0; padding:2px; } .tileLargo{ width:210px;} /*tile 2 width*/ /* Classes colors of tiles */ .amarelo{ background:#DAA520;} .vermelho{ background:#CD0000; } .azul{ background:#4682B4;} .verde{ background-color: #2E8B57;} /* highlight the tile clicked */ .selecionado{ background-color: #483D8B;}
JavaScript
$(function(){ $(".tile").mouseenter(function(){ $(this).addClass("selecionado"); }); $(".tile").mouseout(function(){ $(this).removeClass("selecionado"); }); });
效果
二、Metro风格菜单——带有动画效果
HTML
<div class="s-mod w1100" style="height:710px"> <div class="s-mod-loding"><img src="images/loading_d.gif"></div> <ul> <li class="s-mod-item" w="266" h="127" l="0" t="0" bg="#e8443a" cbg="#d92e24"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>1.商品展示管理模块</span></div> <div class="s-mod-cur"><span>自主添加产品类别，不限级数。后台对产品实现增、查、删、改等功能。前端对产品进行列表展示、详细页面展示。详细页面包含产品小图、大图、详细参数、文字内容介绍、多图滚动展示、图片放大展示、关联资讯介绍展示。</span></div> </div> </li> <li class="s-mod-item" w="266" h="127" l="278" t="0" bg="#aa5096" cbg="#922a7b"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>2.会员注册、登陆管理模块</span></div> <div class="s-mod-cur"><span>管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。</span></div> </div> </li> <li class="s-mod-item" w="127" h="266" l="556" t="0" bg="#1CA1E2" cbg="#1182BA"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>3.会员基本资料管理模块</span></div> <div class="s-mod-cur"><span>对会员注册的基本资料进行查看、修改。</span></div> </div> </li> <li class="s-mod-item" w="127" h="127" l="695" t="0" bg="#FFD302" cbg="#EAC203"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>4.商品多条件组合搜索管理模块</span></div> <div class="s-mod-cur"><span>在产品列表页面实现对产品按照价格、尺寸、日期、型号、产地等多条件字段组合搜索功能。</span></div> </div> </li> <li class="s-mod-item" w="266" h="127" l="834" t="0" bg="#0C6DB2" cbg="#09578E"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>5.会员权限设置管理模块</span></div> <div class="s-mod-cur"><span>管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。</span></div> </div> </li> <li class="s-mod-item" w="127" h="127" l="0" t="139" bg="#9B4C13" cbg="#8F4108"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>6.商品订单下载管理模块</span></div> <div class="s-mod-cur"><span>将企业产品手册、说明书、宣传画册等资料上传至网站，用户通过网站下载，可分用户权限实现下载控制，需与会员管理系统配合。</span></div> </div> </li> <li class="s-mod-item" w="127" h="127" l="139" t="139" bg="#8DC027" cbg="#76A31B"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>7.商品数据导入/导出管理模块</span></div> <div class="s-mod-cur"><span>在网站管理平台对产品型号、类别、价格；产品图片等数据进行批量上传，批量下载的管理。</span></div> </div> </li> <li class="s-mod-item" w="266" h="127" l="278" t="139" bg="#FF0198" cbg="#D80683"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>8.产品数据导入导出管理模块</span></div> <div class="s-mod-cur"><span>在网站管理平台对产品型号、类别、价格；产品图片等数据进行批量上传，批量下载的管理。</span></div> </div> </li> <li class="s-mod-item" w="266" h="127" l="695" t="139" bg="#4837cd" cbg="#3c2bb7"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>7.购物车管理模块</span></div> <div class="s-mod-cur"><span>包含在线订购单提交，可在线提交单个或连续多个订单，在线支付、物流管理、退换货管理。必须与会员系统配合。</span></div> </div> </li> <li class="s-mod-item" w="127" h="127" l="973" t="139" bg="#2b7ab7" cbg="#1e669d"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>8.QQ营销咨询3合1管理模块</span></div> <div class="s-mod-cur"><span>可以把QQ、MSN、旺旺做成一个3合1的滚动窗口，用户点击可与企业洽谈生意，通过此系统大大方便访客与企业的交流。</span></div> </div> </li> <li class="s-mod-item" w="127" h="266" l="0" t="278" bg="#33ac5b" cbg="#209747"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>9.流量统计管理模块</span></div> <div class="s-mod-cur"><span>集成第三方提供的网站流量统计系统，通过统计可以可看网站的访问量，以及互联网品牌指数。</span></div> </div> </li> <li class="s-mod-item" w="266" h="127" l="139" t="278" bg="#bf7030" cbg="#ae6021"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>10.新闻资讯管理模块</span></div> <div class="s-mod-cur"><span>不限层级添加新闻资讯类别，可自主管理公司简介、公司新闻、产品新闻、行业知识等。在后台进行增、删、查、改等一系列操作。</span></div> </div> </li> <li class="s-mod-item" w="127" h="266" l="417" t="278" bg="#914ae2" cbg="#7d33d0"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>11.在线咨询管理模块</span></div> <div class="s-mod-cur"><span>实现网站前台页面提交咨询内容及联系方式，后台查询咨询内容及咨询人情况，并进行在线咨询的回复，前台页面自动显示。</span></div> </div> </li> <li class="s-mod-item" w="266" h="266" l="556" t="278" bg="#e42ec4" cbg="#cf19af"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>12.会员中心管理模块</span></div> <div class="s-mod-cur"><span>实现会员填写字段注册，对填写内容进行有效性校验。 根据注册信息的用户名、密码、验证码进行会员登陆。 对会员注册的基本资料进行查看、修改。 管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。</span></div> </div> </li> <li class="s-mod-item" w="266" h="127" l="834" t="278" bg="#4392ec" cbg="#206fc8"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>13.友情链接管理模块</span></div> <div class="s-mod-cur"><span>与客户网站交换文字链接、图片链接均可，通过链接提升网站的PR值，有利于SEO优化排名。</span></div> </div> </li> <li class="s-mod-item" w="127" h="127" l="139" t="417" bg="#20c8a6" cbg="#13af90"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>14.会员管理模块</span></div> <div class="s-mod-cur"><span>会员短信、邮箱校验模,块 会员短信、邮箱验模块,密码问题保护模块,红包推,广管理模块 ,会员API接口.</span></div> </div> </li> <li class="s-mod-item" w="127" h="127" l="834" t="417" bg="#a3ca1d" cbg="#8bb00c"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>15.订单管理模块</span></div> <div class="s-mod-cur"><span>订单管理模块</span></div> </div> </li> <li class="s-mod-item" w="266" h="127" l="0" t="556" bg="#d8493a" cbg="#ba3122"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>16.订单管理模块</span></div> <div class="s-mod-cur"><span>订单管理模块</span></div> </div> </li> <li class="s-mod-item" w="127" h="266" l="278" t="417" bg="#c44a8c" cbg="#b72b77"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>17.订单管理模块</span></div> <div class="s-mod-cur"><span>订单管理模块</span></div> </div> </li> <li class="s-mod-item" w="266" h="127" l="417" t="556" bg="#8e48f7" cbg="#7026df"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>18.订单管理模块</span></div> <div class="s-mod-cur"><span>订单管理模块</span></div> </div> </li> <li class="s-mod-item" w="127" h="127" l="695" t="556" bg="#7a92c2" cbg="#5876b2"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>18.订单管理模块</span></div> <div class="s-mod-cur"><span>订单管理模块</span></div> </div> </li> <li class="s-mod-item" w="127" h="127" l="834" t="556" bg="#7f9861" cbg="#658242"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>18.订单管理模块</span></div> <div class="s-mod-cur"><span>订单管理模块</span></div> </div> </li> <li class="s-mod-item" w="127" h="266" l="973" t="417" bg="#876f5a" cbg="#755a41"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>18.订单管理模块</span></div> <div class="s-mod-cur"><span>订单管理模块</span></div> </div> </li> </ul> </div>
说明： 每个<li>（参考单元格）宽高：127，边距：12（可根据自己意思自由设定。只要好看就行），并设置了伪属性
- w——宽度
- h——高度
- l——左侧距离
- t——顶部距离
- bg——默认底色
- cbg——鼠标划过后底色
CSS
.w1100{width:1100px;margin:0 auto;} .s-mod{margin:20px auto 0;position:relative;} .s-mod-loding{text-align:center;} .s-mod ul{display:none;} .s-mod-item{display:block;position:absolute;} .s-mod-wrap{position:relative;overflow:hidden;} .s-mod-def{position:absolute;left:0;top:0;z-index:1;padding:0 12px;color:#fff;font-size:18px;line-height:25px;text-align:center;} .s-mod-def span{display:block;} .s-mod-cur{position:absolute;left:0;top:0;z-index:2;padding:0 12px;color:#fff;line-height:18px;} .s-mod-cur span{display:block;}
JQuery
$(function(){ $(".s-mod ul").fadeIn(300,function(){$(".s-mod .s-mod-loding").remove();}) $(".s-mod ul .s-mod-item").each(function(){ var i=$(this); var o={ w:1*i.attr("w"), h:1*i.attr("h"), l:1*i.attr("l"), t:1*i.attr("t"), bg:i.attr("bg"), cbg:i.attr("cbg"), speed:600 }; var wrap=i.find(".s-mod-wrap"); var def=i.find(".s-mod-def"); var cur=i.find(".s-mod-cur"); i.css({width:o.w,height:o.h,left:o.l,top:o.t}); wrap.css({width:o.w,height:o.h}); def.css({width:(o.w-24),height:o.h,backgroundColor:o.bg}); cur.css({width:(o.w-24),height:o.h,backgroundColor:o.cbg,top:o.h}); def.find("span").css({paddingTop:((o.h-def.find("span").height())/2)}) cur.find("span").css({paddingTop:((o.h-cur.find("span").height())/2)}) //滑动效果 i.hover(function(){ def.stop().animate({top:-o.h},o.speed,"easeOutBounce") cur.stop().animate({top:0},o.speed,"easeOutBounce") },function(){ def.stop().animate({top:0},o.speed,"easeOutBounce") cur.stop().animate({top:o.h},o.speed,"easeOutBounce") }) }) })
这里使用了jquery.easing.js插件，读者可自行去百度，或参考我的转载： http://www.cnblogs.com/JoannaQ/p/3568126.html
效果
参考：
- http://mrbool.com/creating-a-metro-style-menu-in-html-and-css/26266
- QQ群朋友共享的文件
1100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
