仿sidki菜单效果

新手入门、经验交流

Moderator: cre

Forum rules
  • 软件自带帮助是最好的入门教程,请仔细阅读;在您掌握最基本知识前,我们没法帮助您
  • 提问前请先查阅软件帮助文件和论坛相关讨论
  • 查阅软件帮助和论坛相关讨论即可解决的问题帖将直接删除,以免浪费他人时间
  • 请学会如何提问,尽量将问题描述清楚,不明确的提问将被直接删除
Post Reply
ddbb
Moderator
Posts: 425
Joined: Jan 07 2008, 13:30

仿sidki菜单效果

Post by ddbb »

刚写好了一个TEST页面....应该是能用的

可以用来做功能菜单........有喜欢的 就自己改吧.....代码都不是很难.....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>
liumailong
Posts: 50
Joined: Jun 04 2009, 03:38

Re: 仿sidki菜单效果

Post by liumailong »

居然没人顶,坛子真是人烟稀少呀!
renfeibai
Posts: 25
Joined: Jan 10 2008, 20:10

Re: 仿sidki菜单效果

Post by renfeibai »

用这个软件的人本来就不多,而且太久没更新,总是有些小问题。
User avatar
phoenix
Site Admin
Posts: 529
Joined: Dec 29 2007, 16:27

Re: 仿sidki菜单效果

Post by phoenix »

renfeibai wrote:用这个软件的人本来就不多,而且太久没更新,总是有些小问题。
软件问题请明确指出。
Post Reply