您的位置：首页 > Web前端 > HTML

HTML导航菜单

2012-09-18 14:25 253 查看

-------------------------------------------------------------------

"frameset.html"文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<FRAMESET cols="15%,*" framespacing="0" frameborder="0" border="0" borderColor="black">

<FRAME src="left.html" name="leftFrame" scrolling="no" noresize="noresize" framespacing="0" frameborder="0" border="0" />

<FRAME src="" name="rightFrame" scrolling="no" framespacing="0" frameborder="0" border="0" />



</FRAMESET>

-------------------------------------------------------------------

"left.html"文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=gb2312" />

<LINK href="tree.css" type="text/css" rel="stylesheet">

<TITLE>左侧导航页面</TITLE>

</HEAD>

<body id="body">

<table class="container" border="0" cellspacing="0" cellpadding="0" id="tbmenu">

<tr>

<td class="sideBar" valign="top">

<div id="menu_firewall">test</div>

<ul class="subMenu" id="sMenu_firewall" style="height:auto">

<li id="1" onclick="javascript: onClick(this)" href="main.html">自定义树</li>

<li id="2" onclick="javascript: onClick(this)" href="frameset1.html">菜单</li>

<li id="3" onclick="javascript: onClick(this)" href="arrow_menuClosed.gif">箭头</li>

<li id="4" onclick="javascript: onClick(this)" href="tabBg_active.gif">图块</li>

</ul>

<td>

</tr>

</table>

</HTML>

<SCRIPT language="JavaScript" type="text/JavaScript">

var curmenu = "network";

function onClick(e)

{

parent.rightFrame.location.href = e.getAttribute('href');

if (this.curmenu) {

this.curmenu.className = '';

}

this.curmenu = e;

e.className = 'active';

}

</SCRIPT>

-------------------------------------------------------------------

"tree.css"文件：

BODY {

FONT: 12px song, verdana; COLOR: #6b6b6b

}

TD {

FONT: 12px song, verdana; COLOR: #6b6b6b

}

DIV {

FONT: 12px song, verdana; COLOR: #6b6b6b

}

* {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px

}

LI {

LIST-STYLE-TYPE: none

}

.container {

CLEAR: both; WIDTH: 100%; HEIGHT: 1600px; TEXT-ALIGN: left

}

.sideBar {

BACKGROUND: #E6EFF7; WIDTH: 167px

}

.sideBar DIV {

PADDING-LEFT: 28px; BACKGROUND: #8CA5DE no-repeat 8px 5px; MARGIN-BOTTOM: 1px; COLOR: #ffffff; LINE-HEIGHT: 25px; HEIGHT: 25px

}

.sideBar .opened {

FONT-WEIGHT: bold; BACKGROUND: #8CA5DE no-repeat 8px 5px; CURSOR: pointer

}

.sideBar .closed {

CURSOR: pointer

}

.sideBar .menuOver {

FONT-WEIGHT: bold; BACKGROUND: #A9C7EC no-repeat 8px 5px; CURSOR: pointer

}

.sideBar .subMenu {

OVERFLOW: hidden; HEIGHT: 0px

}

.sideBar LI {

PADDING-LEFT: 40px; BACKGROUND: #FFFFFF; MARGIN-BOTTOM: 1px; CURSOR: pointer; COLOR: #083AA5; LINE-HEIGHT: 25px; HEIGHT: 25px

}

.sideBar .active {

FONT-WEIGHT: bold; BACKGROUND: url(/images/arrow_menuActive.gif) #FFFFFF no-repeat right 5px

}

.sideBar .subMenuOver {

BACKGROUND: #e8e3d9

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航