我们来做一个会呼吸的菜单吧!!
浏览:3245次 出处信息
我看到了网上有一些例子..我就来凑个热闹..说下我自己的做法..
大家先可以看一下最终的效果 http://resume.skiyo.cn/
我的做法相对比较简单..大部分工作都是css来做的..
首先我们需要看上去差不多是下面的一张菜单图片..你可以点击之后看大图..
然后我们就来写HTML了..注意.重点就在这里..我让a在li的上面..遮盖住li..
以下是代码片段: <div id="menu"> <ul> <li id="nv_about"><a href="#about_anchor"> </a></li> <li id="nv_skill"><a href="#skill_anchor"> </a></li> <li id="nv_works"><a href="#works_anchor"> </a></li> <li id="nv_introduce"><a href="#introduce_anchor"> </a></li> <li id="nv_contact"><a href="#contact_anchor"> </a></li> </ul> </div> |
CSS为:
以下是代码片段: #menu { margin-top:10px; width:800px; height:40px; } #menu li { list-style:none; float:left; } #menu li a{ display:block; } #menu #nv_about { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat 0px 0px; /* 这是li的背景 统一为灰色的 */ } #menu #nv_about a{ width:160px; height:40px; background:url(../images/menu.jpg) no-repeat 0px -40px; /* li上面a的背景..是其他的颜色 */ } #menu #nv_skill { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -160px 0px; } #menu #nv_skill a{ width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -160px -40px; } #menu #nv_works { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -320px 0px; } #menu #nv_works a{ width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -320px -40px; } #menu #nv_introduce { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -480px 0px; } #menu #nv_introduce a{ width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -480px -40px; } #menu #nv_contact { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -640px 0px; } #menu #nv_contact a { width:160px; height:40px; background:url(../images/menu.jpg) no-repeat -640px -40px; } |
然后我们就可以编写jQuery的代码了..
以下是代码片段: $(document).ready(function (){ if($.browser.msie && (parseInt($.browser.version) <= 7)){try {document.execCommand("BackgroundImageCache", false, true);}catch(e){}} var a = $(’#menu li a’); a.css(’opacity’, 0); //默认的先把a弄成透明的 a.hover( function() { $(this).stop().animate({’opacity’: 1}, "slow"); //鼠标经过的时候 a标签慢速的显示 遮盖都后面的li }, function() { $(this).stop().animate({’opacity’: 0}, "slow"); //鼠标移开 再把a弄成透明的 } ); }); |
好了..这个方法的好处就是js代码相对简单..
但是css的可扩展性很低..= =||
建议继续学习:
- 120个优秀的水平导航设计 (阅读:73808)
- 网站导航设计的6大分类 (阅读:7839)
- 递归并不一定非得是“自己调用自己的function” (阅读:3167)
- 实现一个更精简的Tab (阅读:2393)
- 关于网站地图 (阅读:2384)
- 用面包屑来简化多层的tabs (阅读:2349)
- 网站导航设计模式指南 (阅读:2326)
- 给网站布置一个明晰的“关于”页面 (阅读:2181)
- 看看Gmail的新功能 (阅读:2133)
- 与众不同易,精益求精难 — QQ导航改版设计心得 (阅读:2445)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
文章信息
- 作者:Jessica 来源: Skiyo
- 标签: 导航 菜单
- 发布时间:2010-07-07 12:29:39
建议继续学习
近3天十大热文
- [66] Go Reflect 性能
- [66] Oracle MTS模式下 进程地址与会话信
- [65] 如何拿下简短的域名
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [59] android 开发入门
- [59] 图书馆的世界纪录
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [47] 读书笔记-壹百度:百度十年千倍的29条法则