今天终于写完了一个可以水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序,它综合应用了水平下拉菜单,垂直下拉菜单,网页换肤等技巧.
这个程序需要用到三个文件,一个是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在水平下拉菜单和垂直下拉菜单之间随意切换的网页换肤程序
网页下拉菜单3种实现,html+css实现,js实现,JQuery实现。
记得之前我们给大家分享过一些飘带式的菜单,比如CSS3 飘带菜单 超酷3D CSS3菜单和CSS3飘带状多级下拉菜单;也分享过几款手风琴下拉菜单,可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉...
收藏的很多下拉菜单的集合包,二级下拉菜单、三级下拉菜单等。
信捷触摸屏编程教程,初学者学习信捷触摸屏教程,信捷触摸屏下拉菜单实例程序。能让你很容易懂得下拉菜单的使用方法。
jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表
今天带来的这款JavaScript应用就实现了这个功能,它是一款带有垂直下拉菜单的图片切换插件,在图片播放器左侧将会悬浮一列菜单,并且鼠标滑过菜单项时将会展开二级菜单,同时你还可以点击左右切换按钮来切换图片。
网页特效菜单的制作 有点击展开的下拉菜单 多层展开的菜单 多层下拉菜单等
VBA设置多级下拉菜单.xlsm VBA设置动态多级下拉菜单.xlsm
wincc 下拉菜单,代码实现下拉菜单的制作
今天我们要为大家分享一款基于jQuery和Bootstrap的垂直手风琴下拉菜单,因为它是Bootstrap风格的,所以外观上绝对可以称得上完美。另外,菜单项在展开的时候,菜单项的内容将会以飞入的动画特效展示出来,同时菜单项...
JS 无限下拉菜单 JS 无限下拉菜单 JS 无限下拉菜单 js下拉菜单 无限下拉菜单 JS 无限下拉菜单
jQuery多级下拉菜单支持多级下拉列表菜单,适用于商城网站或者企业网站,php中文网推荐下载!
Visual C++源代码 5 如何在工具栏添加下拉菜单Visual C++源代码 5 如何在工具栏添加下拉菜单Visual C++源代码 5 如何在工具栏添加下拉菜单Visual C++源代码 5 如何在工具栏添加下拉菜单Visual C++源代码 5 如何在...
C语言编写的下拉式菜单程序
一款简单实用的jQuery垂直手风琴折叠下拉菜单代码,点击可以一级菜单可收缩展开二级子菜单,而且还有过渡动画效果。
最新项目需求要求做一个三级下拉菜单列表(树形下拉菜单)。但UGUI并没有原生的插件,只能自己实现。思路每个级的ItemPanel(一个单级菜单条)样式是一样的,于是需要一个panel来装所有的itemPanel,在整个菜单 顶部...
jquery导航条滑动下拉菜单_滑动显示二级下拉菜单 jquery导航条滑动下拉菜单_滑动显示二级下拉菜单 jquery导航条滑动下拉菜单_滑动显示二级下拉菜单 jquery导航条滑动下拉菜单_滑动显示二级下拉菜单
很好用的一个网页下拉菜单,可分级,非常小巧的JS下拉菜单代码,直接插入网相应位置,方便简单。