[纯耍帅] 纯CSS、兼容IE7+、宽度自适应、无限级导航菜单
杰拉斯 | 时间:2013-10-15, Tue | 19,147 views前端开发
先来个Demo:
http://www.clanfei.com/demos/nav/nav.html
好吧,我承认,我有点标题党了,IE7的兼容并不是特别好,当鼠标离开某个导航再进入时,会留下上一次子菜单的残影(写的好像玄幻小说似的=。=)
不过纯属研究,O(∩_∩)O哈哈~
先来个Demo:
http://www.clanfei.com/demos/nav/nav.html
好吧,我承认,我有点标题党了,IE7的兼容并不是特别好,当鼠标离开某个导航再进入时,会留下上一次子菜单的残影(写的好像玄幻小说似的=。=)
不过纯属研究,O(∩_∩)O哈哈~
8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢。后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技术培训生,将接受CTO等技术大牛的封闭培训,并被安排到最有挑战的项目中,由技术带头人担任主管。
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>网页中的各种长宽、坐标</title> </head> </head> <body onmousemove="getXandY()"> <label>window.event.clientX:</label><label id="xa" class="xy"></label><br /> <label>window.event.clientY:</label><label id="ya" class="xy"></label><br /> <label>window.event.x :</label><label id="xb" class="xy"></label><br /> <label>window.event.y :</label><label id="yb" class="xy"></label><br /> <label>window.event.screenX:</label><label id="xc" class="xy"></label><br /> <label>window.event.screenY:</label><label id="yc" class="xy"></label><br /><br /> <label>window.screen.height:</label><label id="screenHeight" class="xy"></label><br /> <label>window.screen.width:</label><label id="screenWidth" class="xy"></label><br /><br /> <label>window.document.body.clientHeight:</label><label id="ch" class="xy"></label><br /> <label>window.document.body.clientWidth:</label><label id="cw" class="xy"></label><br /> <label>window.document.body.clientLeft:</label><label id="cl" class="xy"></label><br /> <label>window.document.body.clientTop:</label><label id="ct" class="xy"></label><br /><br /> <label>window.document.body.scrollHeight:</label><label id="sh" class="xy"></label><br /> <label>window.document.body.scrollWidth:</label><label id="sw" class="xy"></label><br /> <label>window.document.body.scrollLeft:</label><label id="sl" class="xy"></label><br /> <label>window.document.body.scrollTop:</label><label id="st" class="xy"></label><br /><br /> <label>window.document.body.offsetHeight:</label><label id="oh" class="xy"></label><br /> <label>window.document.body.offsetWidth:</label><label id="ow" class="xy"></label><br /> <label>window.document.body.offsetLeft:</label><label id="ol" class="xy"></label><br /> <label>window.document.body.offsetTop:</label><label id="ot" class="xy"></label><br /> <script type="text/javascript"> function getXandY(){ var Xa = window.event.clientX; var Ya = window.event.clientY; document.getElementById("xa").innerHTML = Xa; document.getElementById("ya").innerHTML = Ya; var Xb = window.event.x; var Yb = window.event.y; document.getElementById("xb").innerHTML = Xb; document.getElementById("yb").innerHTML = Yb; var Xc = window.event.screenX; var Yc = window.event.screenY; document.getElementById("xc").innerHTML = Xc; document.getElementById("yc").innerHTML = Yc; var screenHeight = window.screen.height; var screenWidth = window.screen.width; document.getElementById("screenHeight").innerHTML = screenHeight; document.getElementById("screenWidth").innerHTML = screenWidth; var clientHeight = window.document.body.clientHeight; var clientWidth = window.document.body.clientWidth; var clientLeft = window.document.body.clientLeft; var clientTop = window.document.body.clientTop; document.getElementById("ch").innerHTML = clientHeight; document.getElementById("cw").innerHTML = clientWidth; document.getElementById("cl").innerHTML = clientLeft; document.getElementById("ct").innerHTML = clientTop; var scrollHeight = window.document.body.scrollHeight; var scrollWidth = window.document.body.scrollWidth; var scrollLeft = window.document.body.scrollLeft; var scrollTop = window.document.body.scrollTop; document.getElementById("sh").innerHTML = scrollHeight; document.getElementById("sw").innerHTML = scrollWidth; document.getElementById("sl").innerHTML = scrollLeft; document.getElementById("st").innerHTML = scrollTop; var offsetHeight = window.document.body.offsetHeight; var offsetWidth = window.document.body.offsetWidth; var offsetLeft = window.document.body.offsetLeft; var offsetTop = window.document.body.offsetTop; document.getElementById("oh").innerHTML = offsetHeight; document.getElementById("ow").innerHTML = offsetWidth; document.getElementById("ol").innerHTML = offsetLeft; document.getElementById("ot").innerHTML = offsetTop; } </script> </body> </html>
收集整理自网上
其一,左栏固定宽度,右栏自适应之绝对定位法:
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左栏固定宽度,右栏自适应之绝对定位法</title> <style type="text/css"> body{ margin: 0; } #nav{ top: 0; left: 0; width: 230px; height: 600px; background: #ccc; position: absolute; } #main{ height: 600px; margin-left: 230px; background: #0099ff; } </style> </head> <body> <div id="container"> <div id="nav"> 左栏 </div> <div id="main"> 右栏 </div> </div> </body> </html>
看起来很美好,但是。。
由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况
上周,我整理了《jQuery设计思想》。
那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQuery"。
我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks)。他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值。