打印

求一套比较好得树状菜单

是垂直得,希望大家能帮个忙~~

最好是用LI标签做得~~
看视频,搜秀一下
http://www.souxou.com
有个要求,需要鼠标移开后,停留一段时间在消失

最少要有三级菜单~~

另外当前出现得子菜单,目菜单要有背景显示,以表示在那个菜单上~~

谢谢了~~
看视频,搜秀一下
http://www.souxou.com
嘿嘿,你在这里应该也算老会员了,应该明白这里并不欢迎直接索取代码的行为.你要的这种菜单在网上搜索很多的,仔细找找
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~
晕,我们也打过几次交道了,您老也不开恩一下??

网上没有找到啊,另外,我没有直接索取,我已经做了一段了,可是问题是做不下去啊,感觉有问题,所以希望指教啊,也不定全用,只是看看能不能移植过来~~~
看视频,搜秀一下
http://www.souxou.com

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
嘿嘿,放水一个,那其他人呢?做人要厚道嘛,得一视同仁~~~


你有什么问题尽可以提出来
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

<script type="text/javascript" language="javascript">
<!--//--><![CDATA[//><!--
var HandleList = new Array();
sfHover = function() {
       var sfEls = document.getElementById("leftc").getElementsByTagName("LI");
       
       for (var i=0; i<sfEls.length; i++) {
           sfEls[i].id = 'Li_' + i;
              sfEls[i].onmouseover=function() {
                     this.className+=" sfhover";
              }
              sfEls[i].onmouseout=function() {
                     var obj = this;
                     //alert("obj.parentNode.id="+obj.parentNode.id)
var parent_node=obj.parentNode
while(parent_node.id!="leftc" && parent_node!='body'){
parent_node=parent_node.parentNode;
}                     
                     if(obj.parentNode.id == 'leftc')
                     {
                         HandleList[i] = setTimeout( function(){ OnLeave(obj) }, 200);
                     }
                     else
                     {
                         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
              }
       }
}
function OnLeave(obj)
{
              var index = obj.id.split('_')[1];
              clearTimeout(HandleList[index]);
              obj.className=obj.className.replace(new RegExp(" sfhover\\b"), "");
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>
</script>
看视频,搜秀一下
http://www.souxou.com

TOP

<ul id="leftc"><ul class="ot"><li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
       <li><a href="#">11</a>
       <ul class="ot"><li><a href="#">112</a></li><li><a href="#">113</a></li><li><a href="#">114</a></li><li><a href="#">115</a></li><li><a href="#">116</a></li><li><a href="#">117</a></li></ul>
       </li>
       <li><a href="#">22</a>
              <ul class="ot"><li><a href="#">222</a></li><li><a href="#">223</a></li><li><a href="#">224</a></li><li><a href="#">225</a></li><li><a href="#">226</a></li><li><a href="#">33</a>
                     <ul class="ot"><li><a href="#">332</a></li><li><a href="#">333</a></li><li><a href="#">334</a></li><li><a href="#">335</a></li><li><a href="#">336</a></li><li><a href="#">337</a></li></ul>
              </li></ul>
       </li>
       <li><a href="#">44</a>
              <ul class="ot"><li><a href="#">442</a></li><li><a href="#">443</a></li><li><a href="#">444</a></li><li><a href="#">445</a></li><li><a href="#">446</a></li><li><a href="#">447</a></li></ul>
       </li>
</ul>
看视频,搜秀一下
http://www.souxou.com

TOP

菜单基本可以用
但是第三级菜单不能延迟消失,这是一个问题

还有,对于第一级菜单选择其他时候,所以子菜单 应该立即消失,这里不行,它仍settimeout后消失

保持当前菜单状态,倒没什么太大问题~~~
看视频,搜秀一下
http://www.souxou.com

TOP

还有一个问题,因为第三级菜单离左边比较远,所以好像回被右边得东西挡住~~~
设置 z-index没用~
看视频,搜秀一下
http://www.souxou.com

TOP

Sheneyan
哥们呢???
看视频,搜秀一下
http://www.souxou.com

TOP

没人知道怎么做?
居然Sheneyan兄也不知道哪里去了啊~~~
看视频,搜秀一下
http://www.souxou.com

TOP

....顺便提供css吧...
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

得之,我幸。失之,我命。

TOP

http://www.milonic.com/
如果这个也不能满足你的要求的话。。。
那世界上就没有了
无限级算法thread-2780498-1-6.html 2780498-1-1.html

TOP

mickeyboy
你给得是不错,看到了,但改起来似乎很费劲啊~有没有比较容易改得三级菜单系统啊 ~??
看视频,搜秀一下
http://www.souxou.com

TOP

怀疑你是灌水混出来的哦.
眼睛

TOP

我?我很少灌水吧???
看视频,搜秀一下
http://www.souxou.com

TOP

我现在真的需要一个可以编辑的菜单啊,谁有,给一个啊,最少要三层,和microsoft一样的,谢谢了~~~
看视频,搜秀一下
http://www.souxou.com

TOP

同志们,please

求你们了~~

5555555555555555555555
看视频,搜秀一下
http://www.souxou.com

TOP

都-终级用户-了!
那个应该好改吧?先设计自己的菜单 然后添加到js里
无限级算法thread-2780498-1-6.html 2780498-1-1.html

TOP

用硕思魔法菜单可以做出这个效果

TOP


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>

<style type="text/css">
<!--
body {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 11px;
       margin-left: 0px;
       margin-top: 30px;
       margin-right: 0px;
       margin-bottom: 0px;
       background-color: #053553;
}
#menu {
background-color: #FEF0E5;
filterrogidXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#FEF0E5', gradientType='0');
}
#nav, #nav ul {
float:left; /* 菜单总体水平位置 */
clear:right;
list-style:none;
/*line-height:22px; 一级菜单高 */
/*background: #eee; 所有菜单移出色 */
/*font-weight: bold;8*/
padding:0px;
margin:0px;
/*border:1px solid #ccc;
border-right: 0px;*/
}
#nav ul ul{
/*border:1px solid #ccc;*/
border-top:0px;
border-right:0px;
}
#nav a {
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
/*border-right:1px solid #CCC;*/
padding: 3px 4px 3px 7px;
}
#nav a:hover{
color:#000;
/*border: 1px solid #cccccc;*/
margin: 0px;
padding: 2px 5px 2px 6px;
background-color: #f1f1f1;
text-decoration: none;
} /* 所有 a:hover 字体样式 */
#nav a.selected{background:url(flyout_arrow.gif) no-repeat right 50%;} /* 下拉图标 */
#nav li {
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul li{
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul { /* 二级弹出位 */
position:absolute;
margin:-21px 0px 0px 119px;
padding:0;
left:-9999em;
width:120px;
font-weight:normal;
display:block;
border:1px solid #CCCCCC;
background:#fff;
}
/* 二级菜单宽 */
#nav li ul a {
width:120px; /* 二级菜单宽 */
/*line-height:24px; 二级菜单高
border:1px solid #CCC;*/
text-align:left;
margin: 0px;
}
#nav li ul ul {
margin:-21px 0px 0px 119px;
border:1px solid #CCC;
} /* 三级弹出位 */
#nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}
#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
left:auto;
height:22px;
} /* 所有弹出菜单自动左边距 */
#nav li:hover, #nav li.sfhover {
background:#f1f1f1;
border:1px solid #CCC;
height:22px;
}
/* 所有悬浮样式 */
-->
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
img1=new Image();
img1.src="/Upload/eweb/20051011154815868.gif";
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
window.onload=sfHover;
//--><!]]></script>
</head>
<body>
<table width="120" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" id="menu">
<ul id="nav">
<li><a href="http://www.it33pay.cn/mill" target="_blank">首页</a></li>
<li><a href="http://www.it33pay.cn/mill" target="_blank" class="selected">公司简介</a>
<ul>
<li ><a href="#" class="selected">网站项目 </a>
<ul>
<li><a href="http://www.it33pay.cn/mill">公司简介 </a>
<li><a href="http://www.it33pay.cn/mill">整公司简介</a></li>
<li><a href="http://www.it33pay.cn/mill">公司简介</a></li>
<li><a href="http://www.it33pay.cn/mill" target="_blank">公司简介</a></li>
<li><a href="http://www.it33pay.cn/mill">网公司简介</a></li>
<li><a href="http://www.it33pay.cn/mill">公司简介</a></li>
<li><a href="http://www.it33pay.cn/mill">公司简介</a> </li>
</ul>
</li>
<li ><a href="#" class="selected">多媒体设计制作</a>
<ul>
<li><a href="http://www.it33pay.cn/mill">网站项目 </a>
<li><a href="http://www.it33pay.cn/mill">平面设计</a></li>
<li><a href="http://www.it33pay.cn/mill">CAD工程图设计</a></li>
<li><a href="http://www.it33pay.cn/mill">3D建模与动画</a></li>
<li><a href="http://www.it33pay.cn/mill">Flash游戏动画</a></li>
<li><a href="http://www.it33pay.cn/mill">音效及音乐</a></li>
<li><a href="http://www.it33pay.cn/mill">游戏原画设定</a></li>
</ul>
</li>
<li ><a href="#" class="selected">软件开发</a>
<ul>
<li><a href="http://www.it33pay.cn/mill">应用软件</a></li>
<li><a href="http://www.it33pay.cn/mill">游戏开发</a></li>
<li><a href="http://www.it33pay.cn/mill">驱动程序</a></li>
<li><a href="http://www.it33pay.cn/mill">嵌入式开发</a></li>
<li><a href="http://www.it33pay.cn/mill">手机开发</a></li>
<li><a href="http://www.it33pay.cn/mill">单片机</a></li>
<li><a href="http://www.it33pay.cn/mill">数据库设计</a></li>
<li><a href="http://www.it33pay.cn/mill">代码移植</a></li>
</ul>
</li>
<li><a href="#">网络硬件</a></li>
</ul>
</li>
<li><a href="http://www.it33pay.cn/mill" target="_blank" class="selected">信息与知识</a>
<ul>
<li><a href="#">企业会员管理</a></li>
<li><a class="selected" href="#">Sub Menu 32</a>
<ul>
<li><a href="http://www.it33pay.cn/mill">实用信息与工具 </a></li>
<li><a href="http://www.it33pay.cn/mill">新闻动态</a></li>
<li><a href="http://www.it33pay.cn/mill">知识与技能</a></li>
<li><a href="http://www.it33pay.cn/mill">设计制作与欣赏</a></li>
<li><a href="http://www.it33pay.cn/mill">项目交易经验谈</a></li>
<li><a href="http://www.it33pay.cn/mill">下载</a></li>
</ul>
</li>
<li><a href="#">个人会员管理</a></li>
<li><a href="#">会员检索</a></li>
<li><a href="#">属主修改记录</a></li>
<li><a href="#">个人会员检索</a></li>
</ul>
</li>
<li><a href="#">优秀作品欣赏</a></li>
<li><a href="#" target="_blank">招骋</a></li>
<li><a href="#">关于本站</a></li>
</ul>
</td>
</tr>
</table>


</body>
</html>

so cool!

TOP

这一套tree相当不错:

 提示:您可以先修改部分代码再运行
今天是2006.06.06-----------祝各位666大顺!

┏┯┓┏┯┓┏┯┓┏┯┓
┨┠┨┠┨┠
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

怎么样让我放的代码 也可以让大家直接运行的看呢
是要输入<textarea>代码吗?
so cool!

TOP

[html]调试代码[ /html]
注:"/"要紧贴"["

┏┯┓┏┯┓┏┯┓┏┯┓
┨┠┨┠┨┠
┗┷┛┗┷┛┗┷┛┗┷┛

TOP