一、Metro风格菜单——简单

HTML

     
        
      
                     
       
        Tile 1
        
       
            
       
        Tile 2
        
       
            
       
        Tile 3
        
       
            
       
        Tile 4
        
       
                      
       
        Tile 5
        
       
        
      
        
      
                     
       
            
       
                      
       
            
       
                      
       
        
      
              
      
                     
       
            
       
            
       
                      
       
            
       
            
       
          
      
    
     

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

     
    
      
       
      
    
      
        
       
            
        
                
         
          1.商品展示管理模块
         
                
         
          自主添加产品类别，不限级数。后台对产品实现增、查、删、改等功能。前端对产品进行列表展示、详细页面展示。详细页面包含产品小图、大图、详细参数、文字内容介绍、多图滚动展示、图片放大展示、关联资讯介绍展示。
         
            
        
        
        
       
            
        
                
         
          2.会员注册、登陆管理模块
         
                
         
          管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。
         
            
        
        
        
       
            
        
                
         
          3.会员基本资料管理模块
         
                
         
          对会员注册的基本资料进行查看、修改。
         
            
        
        
        
       
            
        
                
         
          4.商品多条件组合搜索管理模块
         
                
         
          在产品列表页面实现对产品按照价格、尺寸、日期、型号、产地等多条件字段组合搜索功能。
         
            
        
        
        
       
            
        
                
         
          5.会员权限设置管理模块
         
                
         
          管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。
         
            
        
        
        
       
            
        
                
         
          6.商品订单下载管理模块
         
                
         
          将企业产品手册、说明书、宣传画册等资料上传至网站，用户通过网站下载，可分用户权限实现下载控制，需与会员管理系统配合。
         
            
        
        
        
       
            
        
                
         
          7.商品数据导入/导出管理模块
         
                
         
          在网站管理平台对产品型号、类别、价格；产品图片等数据进行批量上传，批量下载的管理。
         
            
        
        
        
       
            
        
                
         
          8.产品数据导入导出管理模块
         
                
         
          在网站管理平台对产品型号、类别、价格；产品图片等数据进行批量上传，批量下载的管理。
         
            
        
        
        
       
            
        
                
         
          7.购物车管理模块
         
                
         
          包含在线订购单提交，可在线提交单个或连续多个订单，在线支付、物流管理、退换货管理。必须与会员系统配合。
         
            
        
        
        
       
            
        
                
         
          8.QQ营销咨询3合1管理模块
         
                
         
          可以把QQ、MSN、旺旺做成一个3合1的滚动窗口，用户点击可与企业洽谈生意，通过此系统大大方便访客与企业的交流。
         
            
        
        
        
       
            
        
                
         
          9.流量统计管理模块
         
                
         
          集成第三方提供的网站流量统计系统，通过统计可以可看网站的访问量，以及互联网品牌指数。
         
            
        
        
        
       
            
        
                
         
          10.新闻资讯管理模块
         
                
         
          不限层级添加新闻资讯类别，可自主管理公司简介、公司新闻、产品新闻、行业知识等。在后台进行增、删、查、改等一系列操作。
         
            
        
        
        
       
            
        
                
         
          11.在线咨询管理模块
         
                
         
          实现网站前台页面提交咨询内容及联系方式，后台查询咨询内容及咨询人情况，并进行在线咨询的回复，前台页面自动显示。
         
            
        
        
        
       
            
        
                
         
          12.会员中心管理模块
         
                
         
          实现会员填写字段注册，对填写内容进行有效性校验。 根据注册信息的用户名、密码、验证码进行会员登陆。 对会员注册的基本资料进行查看、修改。 管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。
         
            
        
        
        
       
            
        
                
         
          13.友情链接管理模块
         
                
         
          与客户网站交换文字链接、图片链接均可，通过链接提升网站的PR值，有利于SEO优化排名。
         
            
        
        
        
       
            
        
                
         
          14.会员管理模块
         
                
         
          会员短信、邮箱校验模,块 会员短信、邮箱验模块,密码问题保护模块,红包推,广管理模块 ,会员API接口.
         
            
        
        
        
       
            
        
                
         
          15.订单管理模块
         
                
         
          订单管理模块
         
            
        
        
        
       
            
        
                
         
          16.订单管理模块
         
                
         
          订单管理模块
         
            
        
        
        
       
            
        
                
         
          17.订单管理模块
         
                
         
          订单管理模块
         
            
        
        
        
       
            
        
                
         
          18.订单管理模块
         
                
         
          订单管理模块
         
            
        
        
        
       
            
        
                
         
          18.订单管理模块
         
                
         
          订单管理模块
         
            
        
        
        
       
            
        
                
         
          18.订单管理模块
         
                
         
          订单管理模块
         
            
        
        
        
       
            
        
                
         
          18.订单管理模块
         
                
         
          订单管理模块
         
            
        
        
    
      
     

说明： 每个<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群朋友共享的文件