请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
邮件列表客服QQ 800003860切换到窄版
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服 蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 求一套比较好得树状菜单
返回列表 发新帖
查看: 13255|回复: 26

求一套比较好得树状菜单 [复制链接]

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-11 10:32:00 |显示全部楼层
是垂直得，希望大家能帮个忙～～

最好是用LI标签做得～～
会不会下一站就是终点？
西部数码顶级域名注册商39元抢注！

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-11 10:36:00 |显示全部楼层
有个要求，需要鼠标移开后，停留一段时间在消失

最少要有三级菜单～～

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

谢谢了～～
会不会下一站就是终点？
租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

Sheneyan　

子虚乌有

荣誉管理 手机认证 

帖子
8391
体力
26707
威望
187
居住地
江苏省 苏州市
发表于 2006-4-11 10:44:00 |显示全部楼层
嘿嘿,你在这里应该也算老会员了,应该明白这里并不欢迎直接索取代码的行为.你要的这种菜单在网上搜索很多的,仔细找找
子叶：子乌的叶子
子乌书简

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-11 10:50:00 |显示全部楼层
晕，我们也打过几次交道了，您老也不开恩一下？？

网上没有找到啊，另外，我没有直接索取，我已经做了一段了，可是问题是做不下去啊，感觉有问题，所以希望指教啊，也不定全用，只是看看能不能移植过来～～～
会不会下一站就是终点？

使用道具 举报

Sheneyan　

子虚乌有

荣誉管理 手机认证 

帖子
8391
体力
26707
威望
187
居住地
江苏省 苏州市
发表于 2006-4-11 10:54:00 |显示全部楼层
嘿嘿,放水一个,那其他人呢?做人要厚道嘛,得一视同仁~~~


你有什么问题尽可以提出来
子叶：子乌的叶子
子乌书简

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-11 10:56:00 |显示全部楼层
<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.id = 'Li_' + i;
                sfEls.onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls.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 = 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>
会不会下一站就是终点？

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-11 10:59:00 |显示全部楼层
<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>
会不会下一站就是终点？

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-11 11:01:00 |显示全部楼层
菜单基本可以用
但是第三级菜单不能延迟消失，这是一个问题

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

保持当前菜单状态，倒没什么太大问题～～～
会不会下一站就是终点？

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-11 11:02:00 |显示全部楼层
还有一个问题，因为第三级菜单离左边比较远，所以好像回被右边得东西挡住～～～
设置 z-index没用～
会不会下一站就是终点？

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-11 11:14:00 |显示全部楼层
Sheneyan
哥们呢？？？
会不会下一站就是终点？

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-11 13:30:00 |显示全部楼层
没人知道怎么做？
居然Sheneyan兄也不知道哪里去了啊～～～
会不会下一站就是终点？

使用道具 举报

Sheneyan　

子虚乌有

荣誉管理 手机认证 

帖子
8391
体力
26707
威望
187
居住地
江苏省 苏州市
发表于 2006-4-11 14:50:00 |显示全部楼层
....顺便提供css吧...
子叶：子乌的叶子
子乌书简

使用道具 举报

maypaopao　

流浪的小板凳

银牌会员

帖子
2123
体力
4515
威望
6
居住地
江苏省 盐城市
发表于 2006-4-11 14:54:00 |显示全部楼层
http://www.meizz.com/Web/Article/211/436.htm
得之，我幸。失之，我命。

使用道具 举报

mickeyboy　

宝疙瘩

高级会员

帖子
382
体力
850
威望
35
居住地
山西省 太原市
发表于 2006-4-12 09:13:00 |显示全部楼层
http://www.milonic.com/
如果这个也不能满足你的要求的话。。。
那世界上就没有了
Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-12 10:20:00 |显示全部楼层
mickeyboy
你给得是不错，看到了，但改起来似乎很费劲啊～有没有比较容易改得三级菜单系统啊 ～？？
会不会下一站就是终点？

使用道具 举报

tygx99　

眼睛GG

银牌会员

帖子
314
体力
1193
威望
12
发表于 2006-4-12 13:44:00 |显示全部楼层
怀疑你是灌水混出来的哦.
眼睛

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-12 14:34:00 |显示全部楼层
我？我很少灌水吧？？？
会不会下一站就是终点？

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-12 14:38:00 |显示全部楼层
我现在真的需要一个可以编辑的菜单啊，谁有，给一个啊，最少要三层，和microsoft一样的，谢谢了～～～
会不会下一站就是终点？

使用道具 举报

alexhuang78　楼主
帖子
543
体力
3271
威望
0
发表于 2006-4-13 09:16:00 |显示全部楼层
同志们，please

求你们了～～

5555555555555555555555
会不会下一站就是终点？

使用道具 举报

mickeyboy　

宝疙瘩

高级会员

帖子
382
体力
850
威望
35
居住地
山西省 太原市
发表于 2006-4-13 11:00:00 |显示全部楼层
都-终级用户-了！
那个应该好改吧？先设计自己的菜单 然后添加到js里
Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

使用道具 举报

ytar　
帖子
104
体力
352
威望
0
发表于 2006-5-17 10:09:00 |显示全部楼层
用硕思魔法菜单可以做出这个效果

使用道具 举报

mill　
帖子
53
体力
156
威望
0
发表于 2006-6-6 13:40:00 |显示全部楼层

<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.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.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!

使用道具 举报

marvellous　

金翅擘海

钻石会员

帖子
16559
体力
37158
威望
143
发表于 2006-6-6 13:50:00 |显示全部楼层
这一套tree相当不错:

 提示：您可以先修改部分代码再运行


今天是2006.06.06-----------祝各位666大顺!

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

使用道具 举报

mill　
帖子
53
体力
156
威望
0
发表于 2006-6-6 14:01:00 |显示全部楼层
怎么样让我放的代码 也可以让大家直接运行的看呢
是要输入<textarea>代码吗?
so cool!

使用道具 举报

marvellous　

金翅擘海

钻石会员

帖子
16559
体力
37158
威望
143
发表于 2006-6-6 14:24:00 |显示全部楼层
[html]调试代码[ /html]
注："/"要紧贴"["

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

使用道具 举报

mill　
帖子
53
体力
156
威望
0
发表于 2006-6-6 14:49:00 |显示全部楼层

 提示：您可以先修改部分代码再运行


so cool!

使用道具 举报

lanbill　
帖子
60
体力
204
威望
3
居住地
天津市 南开区
发表于 2007-9-12 14:32:47 |显示全部楼层
喜欢楼上的代码,谢谢啦~
天生我菜必有用

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Html Smilies
您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 10:26 , Processed in 0.246437 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部