配合php数组+javascript怎么完成一个JS可伸缩菜单?

JavaScript013

配合php数组+javascript怎么完成一个JS可伸缩菜单?,第1张

<html>

<head>

<title>TreeView菜单</title>

<link   rel="stylesheet"   type="text/css"   href="style.css">

</head>

<body   style="margin:0   padding:0">

<div   id="root"   style="position:relative   left:2   top:+15">

<font   id="out01e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out01a"   href="JavaScript:"   class="open"   style="cursor:hand">   系统</a>

<div   id="out01edetails"   style="display:noneposition:relativeleft:0top:0"   >

&nbsp

<font   id="out0101e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out0101a"   href="JavaScript:"   class="open"   style="cursor:hand">   定单管理</a>

<br>

<div   id="out0101edetails"   style="display:none   position:relativeleft:0">

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="Order/autoindent.asp"   target="frmMain">   建议定单管理</a>

<br>

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="#"   target="frmMain">   定单管理</a>

<br>

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="#"   target="frmMain">   门店定单管理</a>

<br>

</div>

&nbsp

<font   id="out0102e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out0102a"   href="JavaScript:"   class="open"   style="cursor:hand">   库存管理</a>

<br>

<div   id="out0102edetails"   style="display:none   position:relativeleft:0">

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="Stock/stockquery.asp"   target="frmMain">   库存数据查询</a>

<br>

</div>

&nbsp

<font   id="out0103e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out0103a"   href="JavaScript:"   class="open"   style="cursor:hand">   销售管理</a>

<br>

<div   id="out0103edetails"   style="display:none   position:relativeleft:0">

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="Sales/categquery.asp"   target="frmMain">   大类销售数据查询</a>

<br>

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="Sales/salesquery.asp"   target="frmMain">   销售数据查询</a>

<br>

</div>

&nbsp

<font   id="out0104e"   class="open"   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font>

<a   id="out0104a"   href="JavaScript:"   class="open"   style="cursor:hand">   中仓收货数据管理</a>

<br>

<div   id="out0104edetails"   style="display:none   position:relativeleft:0">

&nbsp&nbsp&nbsp

<font   style="font-family:wingdings   font-size:12pt   color:bb4400   cursor:hand">2</font>

<a   href="CenterReceiveOrder/orderquery.asp"   target="frmMain">   中仓收货数据查询</a>

<br>

</div>

</div>

</div>

<div   id="root"   style="position:relativeleft:2top:+15">

<span   width="18"   height="18"   border="0"><font   style="font-family:wingdings   font-size:9pt   color:bb4400   cursor:hand">0</font></span>

<a   href="#">

<span>返回主页</span>

</a>

</div>

<script   language="JavaScript">

<!--

function   clickHandler()   {

var   tid,   targetId,   srcElement,   targetElement

srcElement   =   window.event.srcElement

tid   =   srcElement.id

if   (srcElement.className   ==   "open")   {

tid   =   srcElement.id

tid   =   tid.substring(0,tid.length-1)   +   "e"

targetId   =   tid   +   "details"

targetElement   =   document.all(targetId)

if   (targetElement.style.display   ==   "none")   {

//to   expand

eval(tid   +   ".innerText   =   '1'")

targetElement.style.display   =   ""

}   else   {

eval(tid   +   ".innerText   =   '0'")

targetElement.style.display   =   "none"

}

}

}

document.onclick   =   clickHandler

-->

</script>

</body>

</html>

html中伸缩菜单，靠当独的一个html或者是css做不出来的，一般是结合jQ或者是js来实现，这里我就用JS来举例吧，主要是做好一个目录，一般是用ul、li去布局好就行，然后在给一个id，在通过Js去获取对象，然后设置鼠标的hover事件就可以了，这里我提交代码：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>简洁实用的二级下拉导航菜单</title>

<meta http-equiv="content-type" content="text/htmlcharset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

body,html{padding:0margin:0text-align:centerfont:normal 14px 'arial'}

#mainNavBar{width:100%background:#999padding:10px 0}

#nav{width:760pxheight:30pxmargin:0 auto}

#nav ul{padding:0margin:0}

#nav ul li{position:relativefloat:leftwidth:60pxheight:30pxline-height:30pxoverflow:hiddenlist-style-type:none}

#nav ul li a{display:blockcolor:#ffftext-decoration:none}

#nav ul li a:hover{font-weight:boldbackground:#666}

#subNav{position:absolutewidth:150pxtop:30pxleft:0pxpadding:5pxbackground:#666color:#ffftext-align:left}

#subNav a{text-decoration:nonefont-weight:normaldisplay:block}

#subNav a:hover{color:#f00background:#f00}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div id="mainNavBar">

<div id="nav">

<ul>

<li>

<a href="#">Add</a>

<div id="subNav">

<a href="#">写日志</a>

<a href="#">增加分类</a>

</div>

</li>

<li>

<a href="#">Edit</a>

<div id="subNav">

<a href="#">修改分类</a>

<a href="#">文章编辑</a>

</div>

</li>

<li>

<a href="#">Admin</a>

<div id="subNav">

<a href="#">文章管理</a>

<a href="#">评论管理</a>

<a href="#">留言管理</a>

<a href="#">退出</a>

</div>

</li>

</ul>

</div>

</div>

<script language="javascript">

var nav=document.getElementById("nav").getElementsByTagName("li")

for(i=0i<nav.lengthi++){

nav[i].onmouseover=function(){

this.style.fontWeight="bold"

this.style.overflow="visible"

this.style.background="#666666"

}

nav[i].onmouseout=function(){

this.style.fontWeight="normal"

this.style.background="#999999"

this.style.overflow="hidden"

}

}

</script>

</body>

</html>

#header #shousuo{

width:950px

height:50px

background:#f4f4f4

margin-top:10px

}

#shousuo ul li{

line-height:50px

list-style-type:none

float:left

margin-left:5px

font-weight:bold

font-size:14px