css+javaScript实现下拉菜单
作者: 文章来源: 发表时间:2008-07-24 12:51:07
阅读次数:今日:1 本周:3 本月:15 总计:6035

    这两天抽空升级了一下“深度学习(asp)网址导航系统”未程序实现了换肤功能,考虑到选择查看方便,在风格处采用了下拉菜单。 鼠标悬停下拉菜单在网页中很常见,一般的下拉菜单都是通过 JavaScript 对菜单的显示和隐藏进行控制,另一种就是用纯粹的 CSS 也可以实 现。
    用 CSS 的几点好处是,不需要考虑客户端浏览器是否禁用了 JS,而且用 CSS 实现下拉菜单效率比 JS 要高,还可以方便地制定样式和定位。只 用 CSS 实现起来比较麻烦,代码较多,而且为了浏览器的兼容性不是很好(当然现在的ie7和firefox3都没问题的),实用性目前并不强,一个方 向而已。
    用 JS 实现下拉菜单比 CSS 相对容易处理多了,因为各个浏览器之间对 JS 支持的差异相比 CSS 来说要小一些。

    综合上述原因我在“深度学习(asp)网址导航”程序中采用“css+js实现下拉菜单”,大家可以参考“深度学习(asp)网址导航”程序代码,可以根据需要按照原来的 HTML 结构逐级添加。

css+js实现下拉菜单演示地址:http://www.deepteach.com/url/

我这里剥离一个功能简单的演示代码如下:

<script type="text/javascript"> 
    function displaySubMenu(ITstudy_cn) { 
        var subMenu = document.getElementById(ITstudy_cn); 
        subMenu.style.display = "block"; 
    } 
    function hideSubMenu(ITstudy_cn) { 
        var subMenu = document.getElementById(ITstudy_cn); 
        subMenu.style.display = "none"; 
    } 
</script> 
<style> 
* { padding:0; margin:0;} 
body { text-align: center; font-family: "宋体",arial;border: 0; background: #FFF; font-size:12px; color:#000;} 

/* 页头下拉菜单 */ 
    #navigation { 
        margin:2px; 
    } 
    #navigation, #navigation li ul { 
        list-style-type:none; 
    } 
    #navigation li { 
        float:left;   text-align:center; position:relative;  
    } 
    #navigation li a:link, #navigation li a:visited { 
        display:block;     text-decoration:none;  
    } 
    #navigation li a:hover { 
        color:#fff;   background:#2687eb; 
    } 
    #navigation li ul li a:hover { 
        color:#990000;   background:#d6ecfd; text-decoration:underline; 
    } 
    #navigation li ul { 
        display:none;    position:absolute;  width:90px; 
        top:13px;   left:-45px; padding:5px; border:1px solid #d6ecfd;background-color:#f2f9fe; 
    } 

</style> 

<ul id="navigation"> 
    <li ><a href="http://www.itstudy.cn">首页</a></li> 
    <li>&nbsp; | &nbsp;  </li> 
    <li onmouseover="displaySubMenu(’fg’)" onmouseout="hideSubMenu(’fg’)" > 
        <a href="javascript:void(0);" >风格</a> 
        <ul id="fg"> 
          <li><a href="javascript:" >恢复默认设置</a></li> 
          <li><a href="javascript:" >深度空间风格</a></li> 
          <li><a href="javascript:" >IT学习网风格</a></li> 
        </ul> 
    </li> 
    <li> &nbsp; &nbsp;  </li> 
</ul> 


这个下拉菜单代码的原型来自“小胖的blog”大家可以查看他的演示代码,示例中还给出了二级下拉菜单
关键字:css,javaScript,菜单
最后编辑时间:2008-07-24 12:51:07
上一篇: 修改安装xp和vs2010时填写的错误的用户信息
下一篇: css控制表单input文本框文字垂直居中