专栏首页DeveWork分享本站右侧 “类Metro风格侧边栏” 的实现方法

分享本站右侧 “类Metro风格侧边栏” 的实现方法

本站DeveWork.com 右侧边栏有个“类Metro风格侧边栏”的小工具,半年前的时候微软所带来的“Metro风格”(也叫Modern 风格、Windows UI)还挺流行,因此当初在设计这个主题的时候想着运用一下。具体实现的起来也不是很难,CSS 热点+CSS Sprite 技术,纯CSS+Html。具体见下文。

实现原理简介

CSS 图片热点(热区):大概就是通过CSS 分隔整张图片为多个区域,为之热点(hotspot),不同区域链接到不同网址。

CSS Sprite:中文翻译为“CSS 雪碧、CSS妖精、CSS图片合并”——将多个图片整合到一个图片中,然后再用CSS来定位。

综合使用两种方法的好处是,减少了http 请求数,进而减少服务器负载,实现加速的效果。经过多次测试,兼容性非常不错。

“类Metro风格侧边栏” 实现思路

首先Jeff 的话先上网找了一下Windows Phone 的一些图片,看看在竖屏的手机界面Metro 的格子是如何摆放的,最后确定了如下:

随后确定每个格子放什么内容,链接到哪个url;然后就是PS 了,最后PS 后大概就跟你看的样子差不多了:

想着为某些格子加上些“动画”效果(如最后的“联系”与“WordPress”的格式,鼠标移动上去会有“动画”),于是便设计了hover 后的图片,打算用CSS Sprite,先合并在原来的图片上。

审查元素,你会看到加载的图片其实是如下面这张(点击查看原图片):

最后加载的图片最好是无损压缩一下,减少体积。

代码

CSS

/*metro侧边栏*/ #metroside{background:url(images/8.jpg) no-repeat;width:300px;height:446px;margin:0;padding: 0;text-indent: -999em} #metroside a{display:block} #metroside ul{margin:0;padding: 0;}#metroside li{list-style: none;display:inline;float:left;margin:0;padding: 0;background:none}#metroside a:hover{background:#fff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity: 0.3} #metroside .one a{width:144px;height:144px;margin-top:3px;margin-right:7px} #metroside .two a{width:70px;height:70px;margin-top:3px;margin-right:6px} #metroside .two a:hover{background:url(images/8.jpg) -3px -600px no-repeat;width:70px;height:70px;opacity:1;filter:alpha(opacity=100)} #metroside .thr a{width:70px;height:70px;margin-top:3px;} #metroside .fou a{width:70px;height:70px;margin-top:4px;margin-right:6px} #metroside .fiv a{width:70px;height:70px;margin-top:4px;} #metroside .fiv a:hover{background:url(images/8.jpg) -227px -600px no-repeat;opacity:1;filter:alpha(opacity=100)} #metroside .six a{width:297px;height:144px;margin-top:4px;text-decoration: none} #metroside .sev a{width:144px;height:144px;margin-top:4px;margin-right:7px} #metroside .sev a:hover{background:url(images/8.jpg) 0 -452px no-repeat;opacity:1;filter:alpha(opacity=100)} #metroside .eig a{width:144px;height:144px;margin-top:4px;} #metroside .eig a:hover{background:url(images/8.jpg) -151px -452px no-repeat;opacity:1;filter:alpha(opacity=100)}

html:

<div id="metroside"> <ul> <li class= "one " > <a href= "http://feed.feedsky.com/devework" title="RSS订阅,点击订阅本站" target=" _blank"> RSS</a > </li> <li class= "two " > <a href= "contact" title="站长的QQ,习惯隐身~">qq</a > </li> <li class= "thr " > <a href= "http://weibo.com/jh2316 " title="新浪微博@Jeff的阳台" rel="nofollow" target=" _blank">weibo </a> </li> <li class= "fou " > <a rel="nofollow" target="_blank" href= "https://twitter.com/jianhuiorg" title="几乎不用,原因你懂得">twitter </a> </li> <li class= "fiv " > <a href= "http://devework.com/contact" title="点击在线发“私信”" target=" _blank">mail </a> </li> <li class= "six " > <a rel="nofollow" href= "http://devework.com/random " title="精彩,就在DeveWork.com">see</a> </li> <li class= "sev " > <a href= "http://devework.com/contact " title="联系" target=" _blank">contact </a> </li> <li class= "eig" > <a href= "http://devework.com/category/wordpress" title="WordPress,偶的最爱!">wp</a> </li> </ul> </div>

在WordPress 上,Jeff是将css 代码放到style.css 中,html直接在后台新建一个文本小工具,粘贴html代码。

在我写这篇文章,发现半年前的代码其实还可以优化一下,但,偷懒了。至于所谓“动画”的实现,还可以高级一点,比如用jquery 实现更加漂亮的效果、或者CSS3特效,但,技术上还达不到。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress 添加个性化的博客宠物(妹纸篇)

    某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感...

    Jeff
  • WordPress 添加个性化的博客宠物(汉纸篇)

    之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客...

    Jeff
  • WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)

    本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧?  一般你在各大网站的右下角都能看到类似的东东,但许多网站都普遍只有“返回顶部”的效果。不过就...

    Jeff
  • 【 前端相关 网页组件 】纯CSS3实现 “图片轮播” 效果

    使用纯CSS3代码实现简单的图片轮播 image.png 原理介绍 跑马灯图 : image.png 灯图原理 : image.png 基本思路 1.基本...

    Levi.Ackermann
  • 分享一款jQuery全屏滚动页面特性案例

    分享一款jQuery全屏滚动页面特性案例。 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面...

    业余草
  • Web页面中5种超酷的Hover效果

    想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

    葡萄城控件
  • 右侧悬浮菜单悬浮窗 css+html css自动判断PC显示手机端隐藏

    感觉还不错,只是部署到博客不太搭配(颜色太鲜艳了),用css加了个设备判断,电脑端显示、手机端隐藏。1221px 界点

    AlexTao
  • 右侧悬浮菜单悬浮窗 css+html css自动判断PC显示手机端隐藏 Alextao html

    源自:请查看原文内。感觉还不错,只是部署到博客不太搭配(颜色太鲜艳了),用css加了个设备判断,电脑端显示、手机端隐藏。1221px 界点

    AlexTao
  • emlog每日一键打卡(踩/赞三合一)插件1.2

    Youngxj
  • 使用jatoolsPrinter实现套打

    最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。

    week

扫码关注云+社区

领取腾讯云代金券