很不错的JS+CSS滑动门-CSDN博客

代码简介：

绝对值得一看的CSS滑动门，因为它在鼠标放上后自动弹出一个带阴影的层，无操作的情况下层会自动隐藏，这样更节省网页布局，而且它的风格也很清新，淘宝网有这种效果，没有用到任何修饰图片，绝对不容错过。

代码内容：

View Code

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > 很不错的JS + CSS滑动门_网页代码站(www.webdm.cn) </ title >
< style type = " text/css " >
     * { margin: 0 ;padding: 0 ;}
    body{ font:normal 12px Verdana, Arial, Helvetica, sans - serif; text - align:center;}
    #warpper{ position:absolute; left:100px; top:100px;}
    h5{ float :left;}
    a{ text - decoration:underline; cursor:pointer; font - weight:bold;}
    dl{ height:18px; line - height:18px; background:#f7f7f7; padding: 0 10px;}
    dt,.normal{ float :left; padding: 0 10px; border - right:1px solid #ccc; text - decoration:none; width:auto; cursor:pointer;}
    dt.over{ position:relative;border:1px solid #86e5f0; padding: 0 10px 15px 10px; border - bottom:1px solid #caf1f1; margin: - 1px 0 0 - 1px; z - index: 1000 ; color:#ff6026; text - decoration:underline; background:#caf1f1; height:12px; }
    li{ float :left; list - style - type:none; margin:5px 10px; width:120px;}
    dl dd{ position:absolute; width:500px; left: 0 ;top:17px ! important; border:1px solid #86e5f0; background:#caf1f1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength = 4 , Direction = 120 , color = #cccccc); padding:10px 0 ;}
    .block{ display:block;}
    .none{ display:none;}
</ style >
< script language = " javascript " >
    function $(str){ return document.getElementById(str);}
    function $$(str){ return document.getElementsByTagName(str);}
    var timer;
    function changeMenu(thisObj,num){
         if (thisObj.className == " over " ) return false ;
        hids(thisObj);
        thisObj.className = " over " ;
        $( " c " + (num + 1 )).className = " block " ;

        $( " c " + (num + 1 )).onmouseover = function(){clearTimeout(timer);}
        $( " c " + (num + 1 )).onmouseout = function(){timer = setTimeout(function(){hids(thisObj);}, 500 )}
        thisObj.onmouseout = function(){timer = setTimeout(function(){hids(thisObj);}, 3000 )}

    }
    function hids(thisObj){
        clearTimeout(timer);
        var tabObj = thisObj.parentNode.getAttribute( " id " );
        var obj_dt = $(tabObj).getElementsByTagName( " dt " );
         for (var i = 0 ;i < obj_dt.length;i ++ ){
            obj_dt[i].className = " normal " ;
            $( " c " + (i + 1 )).className = " none " ;
        }
    }
</ script >
</ head >
< body >
     < dl id = " warpper " >
         < dt onmouseover = " changeMenu(this,0); " > 网页代码站 </ dt >
         < dd id = " c1 " class = " none " >
             < ul >
                 < li >< a href = " /soft/3628.shtml " target = " _blank " > VB远程网络监视、文件传输、消息发送实例程序 </ a ></ li >< li >< a href = " /http://www.codefans.netsoft/3627.shtml " target = " _blank " > 一款超强的VB网络工具箱源程序 </ a ></ li >< li >< a href = " /soft/3626.shtml " target = " _blank " > 开源指法练习打字软件VB版 </ a ></ li >< li >< a href = " /soft/1115.shtml " target = " _blank " > Magento开源网店 v1. 2 </ a ></ li >
             </ ul >
         </ dd >

         < dt onmouseover = " changeMenu(this,1); " > 最新源码 </ dt >
         < dd id = " c2 " class = " none " >
             < ul >
                 < li >< a href = " /soft/3536.shtml " target = " _blank " > JBlog PHP博客程序 v1. 5 </ a ></ li >< li >< a href = " /soft/3621.shtml " target = " _blank " > ASP FSO在线文件管理、上传、编辑系统 </ a ></ li >              </ ul >
         </ dd >

         < dt onmouseover = " changeMenu(this,2); " > 源码排行 </ dt >
         < dd id = " c3 " class = " none " >
             < ul >
                 < li >< a href = " /soft/2543.shtml " target = " _blank " > Java写的图片幻灯片切换特效 </ a ></ li >< li >< a href = " /soft/2258.shtml " target = " _blank " > 基于VB的走马灯效果 </ a ></ li >< li >< a href = " http://www.codefans.net/soft/2430.shtml " target = " _blank " > VB简单的3维绘图代码 </ a ></ li >< li >< a href = " /soft/3065.shtml " target = " _blank " > php + Ajax国际象棋游戏源程序 </ a ></ li >
             </ ul >
         </ dd >

         < dt onmouseover = " changeMenu(this,3); " > 源码分类 </ dt >
         < dd id = " c4 " class = " none " >
             < ul >
                 < li >< a href = " /soft/3609.shtml " target = " _blank " > osFileManager PHP网站文件管理系统 v2. 2 </ a ></ li >< li >< a href = " http://www.codefans.net/soft/1035.shtml " target = " _blank " > 56770 Eshop 乐彼网上开店系统 v8. 4 </ a ></ li >< li >< a href = " /soft/3601.shtml " target = " _blank " > JAVA实现CLDC与MIDP底层编程的代码 </ a ></ li >
             </ ul >
         </ dd >

         < dt onmouseover = " changeMenu(this,4); " > 软件下载 </ dt >
         < dd id = " c5 " class = " none " >
             < ul >
                 < li >< a href = " /soft/3621.shtml " target = " _blank " > ASP FSO在线文件管理、上传、编辑系统 </ a ></ li >< li >< a href = " /soft/3614.shtml " target = " _blank " > VB托盘气泡提示控件 </ a ></ li >< li >< a href = " /soft/3603.shtml " target = " _blank " > 一款Java网络格斗游戏源码 </ a ></ li >< li >< a href = " /soft/3617.shtml " target = " _blank " > 因特达Access数据库在线管理工具 v9. 0 </ a ></ li >< li >< a href = " /soft/3611.shtml " target = " _blank " > VB6写的MSSQL数据库管理工具 </ a ></ li >
             </ ul >
         </ dd >

         < dt onmouseover = " changeMenu(this,5); " > 电子书籍 </ dt >
         < dd id = " c6 " class = " none " >
             < ul >
                 < li >< a href = " /soft/3628.shtml " target = " _blank " > VB远程网络监视、文件传输、消息发送实例程序 </ a ></ li >< li >< a href = " /soft/3627.shtml " target = " _blank " > 一款超强的VB网络工具箱源程序 </ a ></ li >< li >< a href = " http://www.codefans.net/soft/3626.shtml " target = " _blank " > 开源指法练习打字软件VB版 </ a ></ li >< li >< a href = " /soft/1115.shtml " target = " _blank " > Magento开源网店 v1. 2 </ a ></ li >< li >< a href = " /soft/3536.shtml " target = " _blank " > JBlog PHP博客程序 v1. 5 </ a ></ li ></ li >
             </ ul >
         </ dd >
     </ dl >
< br />
< p >< a href = " http://www.webdm.cn " > 网页代码站 </ a > - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
</ body >
</ html >
代码来自：http: // www.webdm.cn/webcode/9251eb03-dc8b-42cc-884b-f93555055ca7.html

转载于:https://www.cnblogs.com/webdm/archive/2011/07/23/2114609.html