• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
Joanna Qian
Stay Hungry， Stay Foolish！
博客园    首页    新随笔    联系   管理    订阅  订阅
Metro UI（Win 8风格）页面设计小记

一、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群朋友共享的文件

 

posted on 2014-03-05 04:55  Joanna Qian  阅读(1410)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3