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

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

阅读量：5216 次

发布时间：2019-06-14

本文共 10702 字，大约阅读时间需要 35 分钟。

HTML代码如下

<dt>

</dt>

</dl>

<dt>

<ul>

</ul>

</dt>

</dl>

<dt>

<ul>

</ul>

</dt>

</dl>

<dt>

<ul>

</ul>

</dt>

</dl>

<dt>

<ul>

</ul>

</dt>

</dl>

<dt>

<ul>

</ul>

</dt>

</dl>

<dt>

<ul>

</ul>

</dt>

</dl>

<dt>

<ul>

</ul>

</dt>

</dl>

<dt>

<ul>

</ul>

</dt>

</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>

/*--------------------------------------------------|

| 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" οnmοuseοver="this.className=\'headerSelected\'" οnmοuseοut="this.className=\'header\'" οnclick="'+this.obj+'.o('+itemId+')"><tr><td>';

else

str = '<table width="100%" class="item" valign="middle" οnmοuseοver="this.className=\'itemOver\'" οnmοuseοut="this.className=\'item\'" οnclick="'+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 += ' οnmοuseοver="window.status=\'' + pItem.label + '\';return true;" οnmοuseοut="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>

<tr>

<td>