常用的隐藏式目录菜单-JS特效-爱易网页

常用的隐藏式目录菜单

日期：2014-05-18　浏览次数：20316 次

以下是程序代码

<html>
<head>
<TITLE>隐藏式菜单，ali xixi整理收集。</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE>
#ssm2 A 
{ FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none}
#ssm2 A:hover
 { COLOR: #ccff33}
</STYLE>
</HEAD>
<BODY>
告诉你一个应有尽有的网页特效网址：<a href="http://js.aiyiweb.com">http://js.aiyiweb.com</a>
<hr />
<SCRIPT language="javascript">
//状态栏显示信息
function MM_displayStatusMsg(msgStr) 
{ 
 status=msgStr;
 document.MM_returnValue = true;
}
//高亮显示
function highlight(x)
{
document.forms[x].elements[0].focus()
document.forms[x].elements[0].select()
}
//菜单弹出时的处理
function MM_jumpMenu(targ,selObj,restore)
{ 
 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 if (restore) selObj.selectedIndex=0;
}
var NS;
IE=document.all;
NS=document.layers;
hdrFontFamily="Verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#CCCCCC";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#CCCCCC";
linkTarget="_top";
YOffset=60;
staticYOffset=20;
menuBGColor="#CCCCCC";
menuIsStatic="no";
menuHeader="爱易网菜单"
menuWidth=150; 
staticMode="advanced"
barBGColor="#C0C0C0";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barText="把鼠标移到这里";
//鼠标移走时的菜单处理
function moveOut() 
{
if (window.cancel)
{ cancel="";}
if (window.moving2)
 { clearTimeout(moving2);
  moving2="";
  }
if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) 
{
 if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
}
if (NS) 
{
 document.ssm2.left += (5%menuWidth);
}
moving1 = setTimeout('moveOut()', 5)
}
else {
 clearTimeout(moving1)
 }
};
function moveBack() {
 cancel = moveBack1()
}
function moveBack1() {
 if (window.moving1) {
 clearTimeout(moving1)
}
if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
 if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
}
if (NS) {
 document.ssm2.left -= (5%menuWidth);
}
moving2 = setTimeout('moveBack1()', 5)}
 else {
 clearTimeout(moving2)
 }
};
lastY = 0;
//根据浏览器类型设置菜单模式
function makeStatic(mode) {
if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
}
if (NS) {winY = window.pageYOffset;var NM=document.ssm2
}
if (mode=="smooth") {
 if ((IE||NS) && winY!=lastY) {
 smooth = .2 * (winY - lastY);
 if(smooth > 0) smooth = Math.ceil(smooth);
 else smooth = Math.floor(smooth);
 if (IE) NM.pixelTop+=smooth;
 if (NS) NM.top+=smooth;
 lastY = lastY+smooth;
}
setTimeout('makeStatic("smooth")', 1)
}
else if (mode=="advanced") {
 if ((IE||NS) && winY>YOffset-staticYOffset) {
 if (IE) {NM.pixelTop=winY+staticYOffset
 }
if (NS) {NM.top=winY+staticYOffset
 }
}
else {
 if (IE) {NM.pixelTop=YOffset}
 if (NS) {NM.top=YOffset-7 }
}
setTimeout('makeStatic("advanced")', 1)
 }
}
//根据浏览器类型初始化菜单
function init() {
if (IE) {
ssm2.style.pixelLeft = -menuWidth;
ssm2.style.visibility = "visible"
}
else if (NS) {
document.ssm2.left = -menuWidth;
document.ssm2.visibility = "show"
}
else {
alert('浏览器类型判断错误!')
}
}
//当用户选择菜单时，在状态栏提示导航地址
function MM_displayStatusMsg(msgStr) { 
 status=msgStr;
 document.MM_returnValue = true;

}
//判断浏览器类型
if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="275">下一篇：几款非常实用的下拉菜单</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34261' title='美图手机2问世 三大问题令其市场销量堪忧' target="_blank">
                        美图手机2问世 三大问题令其市场销量堪忧</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6910' title='国美苏宁线上首度正面PK 京东列席4月电商战' target="_blank">
                        国美苏宁线上首度正面PK 京东列席4月电商战</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6857' title='惠普董事长莱恩辞职 为巨额财务减记埋单' target="_blank">
                        惠普董事长莱恩辞职 为巨额财务减记埋单</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34390' title='微信企业号必须搬走四座大山，否则只能铩羽而归！' target="_blank">
                        微信企业号必须搬走四座大山，否则只能铩羽而归！</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10811' title='英特尔技术高管离任 电视业务或受影响 ' target="_blank">
                        英特尔技术高管离任 电视业务或受影响 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34360' title='华为美国推出电商网站 发售Mate 2LTE版' target="_blank">
                        华为美国推出电商网站 发售Mate 2LTE版</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34214' title='百度对糯米来说到底意味着什么？' target="_blank">
                        百度对糯米来说到底意味着什么？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34371' title='618首日看京东阿里不同策略，鹿死谁手？' target="_blank">
                        618首日看京东阿里不同策略，鹿死谁手？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34300' title='中移动将推出多项4G资费新政' target="_blank">
                        中移动将推出多项4G资费新政</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：204人　
        网站在2时11分44秒内访问总人数：21234人
    当前 17.27%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>