纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

HTML代码如下

<div id="nav">
<dl class="sy">
<dt>
<a class="first" href="#" >首页</a>
</dt>
<dd class="line">|</dd>
<dd class="triangle"></dd>
</dl>
<dl class="ty">
<dt>
<a href="#">特约</a>
<ul>
<li class="tip"><a href="#" >签约请求</a></li>
<li><a href="#" >签约服务</a></li>
</ul>

</dt>
<dd class="line">|</dd>
<dd class="triangle"></dd>
</dl>
<dl class="bx">
<dt>
<a href="#">保险</a>
<ul>
<li class="tip"><a href="#" >保险信息</a></li>
<li><a href="#" >新员投保</a></li>
</ul>
</dt>
<dd class="line">|</dd>
<dd class="triangle"></dd>
</dl>
<dl class="dd">
<dt>
<a href="#">订单</a>
<ul>
<li class="tip"><a href="#" >订单管理</a></li>
<li><a href="#" >评价管理</a></li>
<li><a href="#" >维修记录</a></li>
</ul>
</dt>
<dd class="line">|</dd>
<dd class="triangle"></dd>
</dl>
<dl class="dp">
<dt>
<a href="#">店铺</a>
<ul>
<li class="tip"><a href="#" >店铺设置</a></li>
<li><a href="#" >店铺信息</a></li>
<li><a href="#" >维修分类</a></li>
<li><a href="#" >维修品牌</a></li>
</ul>
</dt>
<dd class="line">|</dd>
<dd class="triangle"></dd>
</dl>
<dl class="fw">
<dt>
<a href="#">服务</a>
<ul>
<li class="tip"><a href="#" >投诉管理</a></li>
<li><a href="#" >退约记录</a></li>
</ul>

</dt>
<dd class="line">|</dd>
<dd class="triangle"></dd>
</dl>
<dl class="hf">
<dt>
<a href="#">会费</a>
<ul>
<li class="tip"><a href="#" >年费/保证金</a></li>
<li><a href="#" >店铺续约</a></li>
</ul>
</dt>
<dd class="line">|</dd>
<dd class="triangle"></dd>
</dl>
<dl class="zp">
<dt>
<a href="#">招聘</a>
<ul>
<li class="tip"><a href="#" >招聘信息</a></li>
</ul>
</dt>
<dd class="line">|</dd>
<dd class="triangle"></dd>
</dl>
<dl class="tj">
<dt>
<a href="#">统计</a>
<ul>
<li class="tip"><a href="#" >流量统计</a></li>
<li><a href="#" >销售统计</a></li>
<li><a href="#" >行业分析</a></li>
</ul>

</dt>
<dd class="triangle"></dd>
</dl>
</div>

<style>
#nav{
float:left;
margin-left:10px;
margin-top:20px;
}
#nav dl{
float:left;
font-size:14px;
padding-left:5px;
position:relative;
}
#nav dt{
float:left;
display:block;
width:48px;
height:auto;
text-align: center;
line-height:30px;
}
#nav dt a{
color:#999999;
}

#nav dl .first{
color:#fff;
font-weight:bold;
}
#nav .line{
float:left;
margin-top:6px;
margin-left:4px;
}
#nav .triangle{
display:none;
background:url(../images/l_bgs_img.png);
width:21px;
height:13px;
background-position:-256px -11px;
position:relative;
top:41px;
left:14px;
}
#nav dt:hover{
background:#fff;
}
#nav dt:hover a{
color:#000;
}
#nav ul{
display:none;
width:auto;
min-width:90px;
height:auto;
/*outline: 1px solid #000;*/
border:1px solid #000;
border-top:0;
position:absolute;
left:4px;
z-index:2;

}
#nav ul .tip{
margin-top:10px;
}
#nav li{
width:auto;
margin:6px 4px;
}
#nav li:hover{
background:#555555;
}
#nav li:hover a{
color:#fff;
}
#nav dt:hover ul{
display:block;
background:#fff;
}

</style>

有一个网站的导航栏给我的印象不错,于是就把网页保存下来想研究一下它的js代码，没想到的是竟然是用.NET的自定义控件生成的！上面的代码差点没把我看晕过去！（有兴趣的话可以试一试哦，里面N多变量的～～～汗），还好大三时学过c＃（垃圾）加上它的控件可以试用，就下下来用了，感觉还真的不错，简单易用，可是～测试的时候差点没昏了！NND试用版的竟然只能再本机测试，别人的PC访问不但显示不了网页还警告说要注册购买！！！！大哥的竟然还要$（本少爷每月实习补助才1千￥啊），一怒之下决定自己封装一个。参考了树型菜单的js源码，花了3天时间，终于第一版写好了^_^

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Phenix PanelBar</title>
<script language="javascript">
/*--------------------------------------------------|
| Phenix PanelBar | www.seu.edu.cn |
|---------------------------------------------------|
| |
| I believe one day I can fly like phenix! |
| |
| Finished: 17.11.2004 |
|--------------------------------------------------*/

//item object
//alert("arrived here");
function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){

this.id=id;
this.pid=pid;
this.label=label;
this.url=url;
this.title=title;
this.target=target;
this.img=img;
this.over=over;
this.img2=img2;
this.over2=over2;
this.type=type;
//this._ih = false; //is it the head item?
this._hc = false; //has the child item?
this._ls = false; //has sibling item?
this._io = false; //whether the panelbar is open?
};

//menu object
function PhenMenu(objName) {

this.config = {

closeSameLevel : true

};
//alert("asdsdf");
this.obj = objName;

this.items = [];

this.root = new PhenItem(-1);

};

//add a new item to the item array
PhenMenu.prototype.add = function(id,pid,label,url,type,img,over,img2,over2,title,target){
this.items[this.items.length] = new PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target);
};

// Outputs the menu to the page
PhenMenu.prototype.toString = function() {
//alert("arrived here");
var str = '<div>\n';

if (document.getElementById) {

str += this.addItem(this.root);

} else str += 'Browser not supported.';

str += '\n</div>';
//alert(str);
//document.write(str);
//alert(this.items[0]._hc);
return str;

};

// Creates the menu structure
PhenMenu.prototype.addItem = function(pItem) {

var str = '';

//var n=0;

for (var n=0; n<this.items.length; n++) {

if(this.items[n].pid == pItem.id){

var ci = this.items[n];
//alert(ci.pid);
//alert(ci.id);
this.setHS(ci);
//alert("item:"+ci._hc);
//alert(ci._ls);
str += this.itemCreate(ci, n);

if(ci._ls) break;

}

}

return str;

};

// Creates the node icon, url and text
PhenMenu.prototype.itemCreate = function(pItem, itemId) {
//alert(pItem.type.toLowerCase());
var str = '';

if(pItem.type == 'header')
str = '<table width="100%" class="header" valign="middle" onmouseover="this.className=\'headerSelected\'" onmouseout="this.className=\'header\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';

else
str = '<table width="100%" class="item" valign="middle" onmouseover="this.className=\'itemOver\'" onmouseout="this.className=\'item\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';

if (pItem.img) {

str += '  <img id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" />';

}
if (pItem.url) {
str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';
if (pItem.title) str += ' title="' + pItem.title + '"';
if (pItem.target) str += ' target="' + pItem.target + '"';
str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"';
str += '>';
}
str += '    ' + pItem.label;
if (pItem.url) str += '</a>';
str += '</td></tr></table>';
//alert(pItem.url);
//alert(str);
if (pItem._hc) {
str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=3.0); VISIBILITY: hidden"><tr><td>';
str += this.addItem(pItem);
str += '</td></tr></table>';
//alert(str);
//document.write(str);
}

return str;
};

// Checks whether a item has child and if it is the last sibling
PhenMenu.prototype.setHS = function(pItem) {

var lastId;

for (var n=0; n<this.items.length; n++) {

if (this.items[n].pid == pItem.id) pItem._hc = true;

if (this.items[n].pid == pItem.pid) lastId = this.items[n].id;

}

if (lastId==pItem.id) pItem._ls = true;

};

// Toggle Open or close
PhenMenu.prototype.o = function(id) {
//alert(this.items.length);
var ci = this.items[id];
//alert(ci);
//this.setHS(ci);
//alert(this.items[id]._hc);
this.itemStatus(!ci._io, id);

ci._io = !ci._io;

if (this.config.closeSameLevel) this.closeLevel(ci);

};

// Change the status of a item(open or closed)
PhenMenu.prototype.itemStatus = function(status, id) {

cTable = document.getElementById('ct' + this.obj + id);

if(status){

cTable.filters.item(0).Apply();
cTable.style.display = 'block';
cTable.style.visibility = "";
cTable.filters.item(0).Play();
}
else
cTable.style.display = 'none';

//cDiv.style.display = (status) ? 'block': 'none';

};

// Closes all items on the same level as certain item
PhenMenu.prototype.closeLevel = function(pItem) {
//alert(this.items[0]._hc);
for (var n=0; n<this.items.length; n++) {
//alert(this.items[n]._hc);
if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) {

this.itemStatus(false, n);

this.items[n]._io = false;

this.closeAllChildren(this.items[n]);

}

};

PhenMenu.prototype.closeAllChildren = function(pItem) {

for (var n=0; n<this.items.length; n++) {

if (this.items[n].pid == pItem.id && this.items[n]._hc) {

if (this.items[n]._io) this.itemStatus(false, n);

this.items[n]._io = false;

this.closeAllChildren(this.items[n]);

}

};
</script>
<style>
.header {
height:25px;
FONT-FAMILY: Arial,Verdana;
background-image:url(images/sideNavCategoryBg.gif);
font-size:11px;
color: #666666;

}
.headerSelected {
height:25px;
FONT-FAMILY: Arial,Verdana;
background-image:url(images/sideNavCategorySelectedBg.gif);
font-size:11px;
background-repeat:repeat-x;
COLOR: #333333;
CURSOR: pointer;
}

.navigation_item {
PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
}
.item {
PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px;
}
.itemOver {
PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED
}
.itemSelected {
PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
}

A.headerSelected {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
}
</style>
</head>
<body>
<table width="221" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<p>Phenix panelbar</p>

p = new PhenMenu('p');
//alert("asds");
p.add(0,-1,'label1凤凰','','header','http://www.telerik.com/images/ProductImages//e.gif');
p.add(1,0,'label1.1凤凰','www.sina.com.cn');
p.add(2,0,'label1.2','www.sina.com.cn');
p.add(3,0,'label1.3','www.sina.com.cn');
p.add(4,0,'label1.4','www.sina.com.cn');

p.add(5,-1,'label2','','header','http://www.telerik.com/images/ProductImages//c.gif');
p.add(6,5,'label2.1','www.seu.edu.cn');
p.add(7,5,'label2.2','www.seu.edu.cn');
p.add(8,5,'label2.3','www.seu.edu.cn');
p.add(9,5,'label2.4','www.seu.edu.cn');

p.add(10,-1,'label3','','header','http://www.telerik.com/images/ProductImages//m.gif');
p.add(11,10,'label3.1','www.seu.edu.cn');
p.add(12,10,'label3.2','www.seu.edu.cn');
p.add(13,10,'label3.3','www.seu.edu.cn');
p.add(14,10,'label3.4','www.seu.edu.cn');

p.add(15,-1,'label4','','header','http://www.telerik.com/images/ProductImages//r.gif');
p.add(16,15,'label4.1','www.seu.edu.cn');
p.add(17,15,'label4.2','www.seu.edu.cn');
p.add(18,15,'label4.3','www.seu.edu.cn');
p.add(19,15,'label4.4','www.seu.edu.cn');
//alert(p.items.length)
document.write(p);

//p.toString();
//alert(p.items.length);
//delete(p);
</script> </td>
</tr>
</table>
</body>
</html>

PS：里面的script代码和style样式可以写在单独的js和css文件里。

王小源

囧囧丸

流氓三金

毕加索

风小筝

天佑

纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,的更多相关文章

纯CSS实现的风车转动效果特效演示
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
纯CSS实现3D正方体动画效果
前言纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移效果图
[刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图实现思路 ...
使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片
查看本章节查看作业目录需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片实现思路: 在 ...
纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
一个纯CSS实现的卡片翻转效果
先上代码 <div id="box"> <div class="front">正面</div> <div class= ...
纯CSS实现内容放大缩小效果
先搭架子再实现第一个内容填充更多内容拆掉border,查看最终效果 html代码  <div class="service"> ...

随机推荐

bat基础
首先所有命令在cmd命令行中都能找到说明: 例如想知道type用法输入type /? 其他命令都一样 type [drive:][path] filename 显示文本文件内容虽然有点鸡肋 1 ...
这两天遇到iphone使用app store下载免费软件,必须验证付款信息才能购物是怎么回事？？？
答案: 在你这台设备上再设置一下,具体方法是:1.点设置进入2.点iTunes Store 和App Store 3.点 Apple ID ,如果没设置,设置一下,如果有的,再点击 4.出现一上选择的 ...
UV动画
[猫猫的Unity Shader之旅]之纹理映射 http://blog.csdn.net/dbtxdxy/article/details/46954417 [猫猫的Unity Shader之旅]之U ...
移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
Notepad++源码编译及其分析
Notepad++是一个小巧精悍的编辑器,其使用方法我就不多说了,由于notepad++是使用c++封装的windows句柄以及api来实现的,因此对于其源码的研究有助于学习如何封装自己简单的库(当然 ...
C/C++面试题集锦(一)
C/C++面试题集锦(一) */--> C/C++面试题集锦(一) 在类的头文件中进行声明然后在定义文件中实现有什么意义? 一方面使类的实现只编译一次,提高编译效率:另一方面可以实现类的接口和实 ...
MySQL报错：Got error 28 from storage engine
今天碰到数据库出错: Got error 28 from storage engine 查了一下,数据库文件所在的盘应该没事,应该是数据库用的临时目录空间不够问题原因: 磁盘临时空间不够导致. 解决 ...
tar 解压bz2报错 Cannot exec: No such file or directory
tar: bzip2: Cannot exec: No such file or directorytar: Error is not recoverable: exiting now 需要安装bzi ...
JavaScript倒计时
倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 <div id="c ...
java基础杂烩
1. int ... arg: 可变参数 2. 数组拷贝放在JDK中的System类中,arraycopy(原数组,从原数组那一个索引开始拷贝,目标数组,在目标数组哪一个位置开始粘贴,拷贝元素的个 ...

纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,的更多相关文章

随机推荐

热门专题