找回密码
 注册

QQ登录

只需一步,快速开始

查看: 4068|回复: 18

[求助] 一个右侧二级隐藏导航搞不定,求代码,有偿!

[复制链接]
发表于 2013-8-28 01:51:27 | 显示全部楼层 |阅读模式
25体力
本帖最后由 jwentang 于 2013-8-28 01:54 编辑

06-2.jpg 06-1.jpg

如图所示导航效果,做不出来,在网上了下了JQ的一些导航来修改,始终改不出这种效果,现发贴求助,愿支付300元人民币求高手制作这个效果代码,除下拉导航部分,网页其他部分已经完成,详情见附件。QQ334113173 手机号码在QQ签名里面,不方便在论坛里公布了,求大神帮忙制作!

如图所示,在弹出的菜单里面,点击“三明治”类的时候会显示“三明治”类的下级子项同时自动隐藏“面包类”的子项内容

web2.zip

939.32 KB, 下载次数: 446

最佳答案

查看完整内容

谢谢谢谢,刚才看到了 这个关于小图片本以为很简单,10分钟可以搞定, 结果还是比较复杂,弄了半个钟头,不过终于较好地实现了。 在线演示地址:http://dreamdesign.105.idcxin.com/bbs/menber/yypz/web2_ok_adv/
发表于 2013-8-28 01:51:28 | 显示全部楼层
jwentang 发表于 2013-8-28 18:09
已经发消息给你了啊

谢谢谢谢,刚才看到了


这个关于小图片本以为很简单,10分钟可以搞定,
结果还是比较复杂,弄了半个钟头,不过终于较好地实现了。


在线演示地址:http://dreamdesign.105.idcxin.com/bbs/menber/yypz/web2_ok_adv/


爱陪烘OK_adv.jpg


web2_OK_adv.rar (1.15 MB, 下载次数: 520)
回复

使用道具 举报

 楼主| 发表于 2013-8-28 01:54:45 | 显示全部楼层
实在搞不定啊
回复

使用道具 举报

 楼主| 发表于 2013-8-28 08:31:23 | 显示全部楼层
望高手赐教啊!
回复

使用道具 举报

 楼主| 发表于 2013-8-28 10:07:57 | 显示全部楼层
走过路过,进来看看啊
回复

使用道具 举报

 楼主| 发表于 2013-8-28 14:07:01 | 显示全部楼层
没有人愿意帮忙吗?
回复

使用道具 举报

发表于 2013-8-28 14:15:02 | 显示全部楼层
其实这个效果不是很难,就是用display的显示隐藏可以实现
回复

使用道具 举报

发表于 2013-8-28 14:18:05 | 显示全部楼层

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

lz 自己 修改成你的样式把....
回复

使用道具 举报

发表于 2013-8-28 14:19:26 | 显示全部楼层
7楼的就可以了
再给个官方的吧
http://www.jq-school.com/Detail.aspx?id=32
回复

使用道具 举报

发表于 2013-8-28 14:33:02 | 显示全部楼层
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:\5B8B\4F53,Arial Narrow,arial,serif;background:#FFFFFF;color:#000;font-size:12px;line-height:20px;text-align:left;}
a{color:#03c;text-decoration:none;}
a:hover{color:#f60;text-decoration:none;}

/* tkl-sidebar */
.tkl-sidebar{width:183px;margin:100px auto;}
.tkl-sidebar #submain_hidden{border-top:0;display:none;}
.tkl-sidebar .bsb{border-bottom:1px solid #c8d2e5;border-top:0;}
/* tj_submain */
.tj_submain{border:1px solid #c8d2e5;border-bottom:0;width:181px;font-weight:normal;}
.tj_submain .title{background:url("images/bg_01.gif") repeat-x 0 -38px;height:24px;line-height:24px;font-size:12px;font-weight:bold;width:161px;padding-left:20px;}
.tj_submain li{width:181px;height:30px;border-bottom:1px solid #E7F3FF;position:relative;}
.tj_submain li a{width:141px;display:inline-block;padding:0 20px;height:30px;line-height:30px;}
.tj_submain li a.on{background:url("images/bg_01.gif") no-repeat scroll 0 -9px;border-top:1px solid #FFC83D;width:161px;height:29px;line-height:29px;padding:0px 0px 0px 20px;position:relative;z-index:90;}
.tj_submain span{position:absolute;top:0;left:180px;z-index:1;background-color:#FFFAE2;border:#FFC83D solid 1px;display:none;}
.tj_submain span a{display:block;height:26px;line-height:26px;}
.tj_submain span a:hover{background:#FFFAE2;background:#ebf0f5;text-decoration:none;}
.tj_submain ul li{float:left;margin-right:10px;display:inline;}
.tj_submain ul li span a{text-decoration:none;}
.tj_submain ul li span a:hover{color:#f60;}
.tj_submain #more_submenu a{background:url("images/subh_bg.gif") no-repeat;text-align:right;display:block;width:125px;padding-right:19px;cursorointer;}
.tj_submain #more_submenu a.show{background-position:100% 2px;}
.tj_submain #more_submenu a.less{background-position:100% -25px;}
</style>

<script type="text/javascript">
function do_list_row_show(strid){
        strid.getElementsByTagName('a')[0].className='on';
        strid.getElementsByTagName('span')[0].style.display="block";
        strid.style.position="relative";
}
function do_list_row_unshow(strid){
        strid.getElementsByTagName('a')[0].className='';
        strid.getElementsByTagName('span')[0].style.display="";
        strid.style.position="";
}
submenu = function(box,div){
        var div_classname = document.getElementById(div).getElementsByTagName('a')[0];
        if(div_classname.className=='show'){
                with(document.getElementById(box).style){
                        height='auto';display='block';
                }
                div_classname.className='less';div_classname.innerHTML='收缩';
        }else{
                with(document.getElementById(box).style){
                        height='0';display='none';
                }
                div_classname.className='show';div_classname.innerHTML='展开';
        }
}
</script>

</head>
<body>

        <div class="tkl-sidebar">
       
                <ul class="tj_submain">
                        <li class="title"><a href="#"> 网页特效</a></li>
                        <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);">
                                <a href="#"> 特效</a>
                                <span>
                                        <a href="#">图片特效</a>
                                        <a href="#">导航菜单</a>
                                        <a href="#">选项卡特效</a>
                                        <a href="#">文字特效</a>
                                        <a href="#">表单特效</a>
                                        <a href="#">表格特效</a>
                                </span>
                        </li>
                        <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);">
                                <a href="#">特效</a>
                                <span>
                                        <a href="#">图片特效</a>
                                        <a href="#">导航菜单</a>
                                        <a href="#">选项卡特效</a>
                                        <a href="#">文字特效</a>
                                        <a href="#">表单特效</a>
                                        <a href="#">表格特效</a>
                                </span>
                        </li>
                        <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);">
                                <a href="#">特效</a>
                                <span>
                                        <a href="#">图片特效</a>
                                        <a href="#">导航菜单</a>
                                        <a href="#">文字特效</a>
                                </span>
                        </li>
                        <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);">
                                <a href="#">s教程</a>
                                <span>
                                        <a href="#">s布局</a>
                                        <a href="#">s菜单</a>
                                        <a href="#">教程</a>
                                </span>
                        </li>
                </ul>
       
                <ul class="tj_submain" id="submain_hidden">
                        <li onMouseOut="do_list_row_unshow(this);" onMouseOver="do_list_row_show(this);">
                                <a href="#">教程</a>
                                <span>
                                        <a href="#">特效</a>
                                        <a href="#">图表</a>
                                </span>
                        </li>
                </ul>
       
                <ul class="tj_submain bsb">
                        <li id="more_submenu"><a onClick="submenu('submain_hidden','more_submenu'); return false;" class="show">展开</a></li>
                </ul>
               
        </div><!--tkl-sidebar end-->
       

</body>

可以参考下这个,我之前收藏的,分享下
回复

使用道具 举报

 楼主| 发表于 2013-8-28 16:15:24 | 显示全部楼层
还在调试中,快崩溃了,高手赐教啊
回复

使用道具 举报

 楼主| 发表于 2013-8-28 16:16:02 | 显示全部楼层

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

回复

使用道具 举报

 楼主| 发表于 2013-8-28 16:23:25 | 显示全部楼层
<div class="IamRight">我在右边</div>
这个我是想让它显示在“文字链接 显示”的右侧,在“右侧内容”的上一层,这个会随着“好评 中评 差评”的出现而自动滑动到“好评 中评 差评”的右侧

以上的代码还要怎么修改?
回复

使用道具 举报

发表于 2013-8-28 17:14:27 | 显示全部楼层
这么一个小小的导航功能楼主能出300,不知像这样规模和要求的一个企业网站,现在接单的行情是多少呢?

我花两个小时帮你搞定了,你这300块钱可以省了,IE678、谷歌、火狐、苹果、欧朋等各大浏览器都测试通过。

行情的问题希望楼主能不吝赐教,如果不便写在这里,可以发论坛信息给我,先谢了。


snap094.jpg


在线演示地址:http://dreamdesign.105.idcxin.com/bbs/menber/yypz/web2_ok/


web2_OK.rar (1.06 MB, 下载次数: 484)
回复

使用道具 举报

 楼主| 发表于 2013-8-28 17:39:40 | 显示全部楼层
yypz 发表于 2013-8-28 17:14
这么一个小小的导航功能楼主能出300,不知像这样规模和要求的一个企业网站,现在接单的行情是多少呢?

...

大牛,感谢不尽,就是这个效果,不过还有一个地方没有搞好啊,就是我在11,12楼贴出的那个问题,就是那个导航右侧的"About Us"那个小图标,它是随着这个隐藏导航的出现隐藏在移动!我在11,12楼贴出的代码就是在定位上面出了问题,老大,你就好人做到底吧
回复

使用道具 举报

发表于 2013-8-28 17:43:04 | 显示全部楼层
jwentang 发表于 2013-8-28 17:39
大牛,感谢不尽,就是这个效果,不过还有一个地方没有搞好啊,就是我在11,12楼贴出的那个问题,就是那个 ...

那个加几句代码就成,晚上回来弄,你晚点来收菜好啦,记得先告诉我现在网站接单的行情哈
回复

使用道具 举报

 楼主| 发表于 2013-8-28 18:09:25 | 显示全部楼层
yypz 发表于 2013-8-28 17:43
那个加几句代码就成,晚上回来弄,你晚点来收菜好啦,记得先告诉我现在网站接单的行情哈

已经发消息给你了啊
回复

使用道具 举报

 楼主| 发表于 2013-8-28 20:51:14 | 显示全部楼层
yypz 发表于 2013-8-28 20:29
谢谢谢谢,刚才看到了

膜拜下,高人啊!非常的感谢你的帮助
回复

使用道具 举报

发表于 2013-8-28 21:06:07 | 显示全部楼层
jwentang 发表于 2013-8-28 20:51
膜拜下,高人啊!非常的感谢你的帮助

过奖了,不客气。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-12-6 05:22 , Processed in 0.073968 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表