仿sidki菜单效果
Posted: May 05 2010, 09:52
刚写好了一个TEST页面....应该是能用的
可以用来做功能菜单........有喜欢的 就自己改吧.....代码都不是很难.....JS基本不用动.....就改改CSS的大小和颜色吧 我觉得.....
有一点点垃圾代码 浏览器判断好像没有必要 我也忘了为什么最开始代码不共用了... 想精减就自己试试吧....
可以用来做功能菜单........有喜欢的 就自己改吧.....代码都不是很难.....JS基本不用动.....就改改CSS的大小和颜色吧 我觉得.....
有一点点垃圾代码 浏览器判断好像没有必要 我也忘了为什么最开始代码不共用了... 想精减就自己试试吧....
Code: Select all
<html>
<style type="text/css">
#Expand_Box{display:none;right:1px!important;position:absolute;visibility: visible;border:1px solid #fff;text-align:center;z-index:200;}
#Expand_Box span{cursor:hand; float:right;}
</style>
<!-- 浏览器判断 -->
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
//以下进行测试
// if(Sys.ie) document.write('IE: '+Sys.ie);
// if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
// if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
// if(Sys.opera) document.write('Opera: '+Sys.opera);
// if(Sys.safari) document.write('Safari: '+Sys.safari);
</script>
<SCRIPT LANGUAGE="javascript">
// 根据浏览器设置点击事件
if (!Sys.ie) {
if (window.Event)
{
top.document.captureEvents(Event.CLICK);
document.captureEvents(Event.CLICK);
}
top.document.onclick = _onClick;
document.onclick = _onClick;
} else {
document.onclick = _onClick;
}
// 点击显示
function _onClick() {
// 点击link 返回 不显示
if (window.event.srcElement.tagName == "A") {
return;
}
// 点击INPUT框 返回 不显示
if (window.event.srcElement.tagName == "INPUT") {
return;
}
document.getElementById("Expand_Box").style.right="18px";
document.getElementById("Expand_Box").style.bottom="0"-getScrollTop()+"px";
document.getElementById("Expand_Box").style.display="block";
}
// 滚动消失
window.onscroll = _onScroll;
function _onScroll(){
_close();
};
// 消失
function _close(){
document.getElementById("Expand_Box").style.display='none';
}
/********************
* 取窗口滚动条高度
******************/
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
</SCRIPT>
<body>
<style type="text/css">
#Expand_Box{width:100px;line-height:30px;color:#fff; background:#000;}
</style>
<DIV id="Expand_Box"><a onclick="_close();">Close</a><br>
22
</DIV>
<a href="#">aaaaaaaaaaaa</a>
<input type="text">
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
1
<br>
</body>
</html>