在水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序

最新推荐文章于 2022-12-27 16:40:31 发布

zhangxiaoxiang

最新推荐文章于 2022-12-27 16:40:31 发布

阅读量1.2w

点赞数

分类专栏： css网页设计文章标签： function stylesheet border xhtml float html

本文链接：https://blog.csdn.net/zhangxiaoxiang/article/details/1823994

版权

css网页设计专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天终于写完了一个可以水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序,它综合应用了水平下拉菜单,垂直下拉菜单,网页换肤等技巧.

这个程序需要用到三个文件,一个是h.css,用作水平下拉菜单的样式文件,另一个是v.css,用作垂直下拉菜单的样式文件,最后一个就是包含下拉菜单内容的网页文档test.html.

test.html文件内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script>
function startlist()
{

if(document.all)
{

        var navRoot = document.getElementById("nav");
for(var i=0;i<navRoot.childNodes.length;i++)
        {
           node = navRoot.childNodes[i];

    if(node.nodeName == "LI")
           {

              node.onmouseover = function(){this.className = "hover";};
              node.onmouseout = function(){this.className = "";};
           }
        }
      }
}
window.onload = startlist;

function changeSkin()
{
var pathName = document.getElementById("cssfile").href;
        var fileName = pathName.substring(pathName.lastIndexOf("/")+1);
document.getElementById("cssfile").href = (fileName=="h.css"?"v.css":"h.css");
}
</script>

h.css文件内容:

#content {clear:both;}
ul {
list-style:none;
margin:0px;
padding:0px;
}

li{
margin:0px;
padding:0px;
  float:left;
  width:100px;
        height: 20px;
border:1px solid #ddd;
position: relative;
  }
li ul{
background-color:#eee;
display:none;
top:20px;
        left:0px;
position:absolute;
}
li:hover,li.hover {background-color:#eee;}
li:hover,li.hover ul{
   display:block;
  }

v.css文件内容:

#nav {float:left;}
ul {
list-style:none;
margin:0px;
padding:0px;
}

li{
margin:0px;
padding:0px;
  width:100px;
        height: 20px;
border:1px solid #ddd;
position: relative;
  }
li ul{
background-color:#eee;
display:none;
top:0px;
        left:100px;
position:absolute;
}
li:hover,li.hover {background-color:#eee;}
li:hover,li.hover ul{
   display:block;
  }

zhangxiaoxiang

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
11
评论
在水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序

今天终于写完了一个可以水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序,它综合应用了水平下拉菜单,垂直下拉菜单,网页换肤等技巧.这个程序需要用到三个文件,一个是h.css,用作水平下拉菜单的样式文件,另一个是v.css,用作垂直下拉菜单的样式文件,最后一个就是包含下拉菜单内容的网页文档test.html.test.html文件内容: "http://www.w3.org/TR
复制链接

扫一扫