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

原创 2007年10月14日 12:05:00

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

这个程序需要用到三个文件,一个是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>

<link rel="stylesheet" type="text/css" href="h.css" id="cssfile"/>
</head>
<body>
<ul id="nav">
 <li>java培训 
 <ul>
  <li>java基础提高</li>
  <li>java就业实战</li>
  <li>java高手精华</li>
 </ul>
 </li>
 <li>.net培训 
 <ul>
  <li>.net基础提高</li>
  <li>.net就业实战</li>
  <li>.net高手精华</li>
 </ul>
 </li>
 <li><a href="#" onclick="changeSkin()">切换样式</a></li>
</ul>
<div id="content">
 内容区
</div>
</body>
</html>

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;
  }

CSS实现垂直和s水平下拉菜单

垂直下拉菜单 *{margin:0;padding:0;} .ul1{ text-decoration: none; list-style: none; ...
  • wangweiscsdn
  • wangweiscsdn
  • 2017-01-10 14:27:27
  • 1277

用CSS实现水平方向菜单&竖直方向菜单&下拉菜单

最近在复习CSS,用CSS做的菜单显示,后面再详解。 纵向菜单 *{margin:0;padding:0;} /*制作横向排列的菜单*/ ...
  • liangxz0311
  • liangxz0311
  • 2015-03-29 22:29:42
  • 1934

jQuery+ul实现漂亮竖直下拉菜单

  • 2013年06月26日 17:48
  • 105KB
  • 下载

CSS垂直树形下拉菜单

CSS垂直树形下拉菜单 翻译:Linyupark / 2006-04-29 让我们看下效果是怎样的吧:CSS与简单JS制作出的菜单 第一步:建立菜单首先建立菜单架构非常重要,最好的方法是使用ul来建...
  • linqingfeng
  • linqingfeng
  • 2006-05-02 19:53:00
  • 3011

css - 下拉菜单

http://www.runoob.com/css/css-dropdowns.html 一、基本下拉菜单当鼠标移动到指定元素上时,会出现下拉菜单 实例: 下拉菜单实例|菜鸟教程(runoob...
  • qq_25077833
  • qq_25077833
  • 2016-11-27 23:04:23
  • 527

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

在水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序 今天终于写完了一个 可以水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序,它综合应用了水平下拉菜单,垂直下拉菜单,网页换肤等技巧.这个程序需...
  • mrwu9902
  • mrwu9902
  • 2010-04-04 14:54:00
  • 223

CSS垂直树形下拉菜单,挺漂亮

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档ul { fon...
  • diyucity
  • diyucity
  • 2008-05-27 17:52:00
  • 2062

h5+css 垂直导航菜单

垂直导航菜单
  • baidu_32731497
  • baidu_32731497
  • 2016-07-03 11:11:35
  • 3824

网页换肤程序(在水平下拉菜单和垂直下拉菜单之间切换)

网页换肤程序(在水平下拉菜单和垂直下拉菜单之间切换)今天终于写完了一个 可以水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序,它综合应用了水平下拉菜单,垂直下拉菜单,网页换肤等技巧.这个程序需要用...
  • qinxike
  • qinxike
  • 2009-07-04 14:33:00
  • 497

屌炸天-css3水平导航下拉菜单

1. 简介 参考:http://designmodo.com/css3-dropdown-menu/ 本人重新定义了css的样式, 得到了适合自己的css文件 2. 原css文件 s...
  • Cryhelyxx
  • Cryhelyxx
  • 2014-11-29 19:49:22
  • 2339
收藏助手
不良信息举报
您举报文章:在水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序
举报原因:
原因补充:

(最多只允许输入30个字)