网页换肤程序(在水平下拉菜单和垂直下拉菜单之间切换)
今天终于写完了一个 可以水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序,它综合应用了水平下拉菜单,垂直下拉菜单,网页换肤等技巧.
这个程序需要用到三个文件,一个是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;
}
分享到:
相关推荐
在水平下拉菜单 和 垂直下拉菜单之间随意切换的网页换肤程序
html在水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序
png启动界面读取zdm(文本)显示工作时间和系统时间,下拉菜单换肤
vb菜单语言切换功能实例,语言换肤功能演示v1.9(含VB源码)[功能特点]: 1,使用LangSkinX.xls生成所需要的语言.lsx文件: ...
js 5种颜色网页换肤测试程序
jquery网页换肤
一个简单的网页换肤示例,采用jQuery
网页换肤程序,好不容易找到的呢 很好用。
网页换肤测试程序下载
网页换肤JS,自己用的,很好用,看看吧!
用js以及jQuery实现的网页换肤功能,有选择存储功能,替换标签和样式即可
菜单换肤 winforms菜单 C#皮肤
网页更换皮肤。。大家下下来看看效果
这是一个 超好的菜单皮肤控件,平常见到的都是自己给自己自定义菜单换肤控件,这是一个给系统控件菜单换肤代码,能够将text文本框右键菜单换肤 系统菜单换肤
一个案例,很好的讲解了网页换肤的原理! 一看即懂!
##特征: 多达 3 级导航在断点处折叠成垂直菜单(默认为 768px) 触摸/点击时激活垂直菜单,悬停时激活水平菜单(我想添加对触摸事件的检测,但大多数屏幕更宽的触摸设备也将悬停事件转换为触摸) 在断点处,菜单...
页面换肤
VC-MFC换肤程序,学习MFC按钮等按件换肤的好代码,可以了解换肤的过程!
换肤程序程序 C++实例 源Source
C#下的换肤功能试验程序, 通过换肤功能设计, 可以方便的美化界面