Scripts 学盟 › 论坛 › 脚本开发技术 › 其它脚本 › jquery easyui-accordion 覆盖菜单

查看: 4342|回复: 5

jquery easyui-accordion 覆盖菜单 [复制链接]

书生

Rank: 2

电梯直达

1^#

嘟嘟 发表于 2011-7-13 16:07:11 |只看该作者 |倒序浏览

bug 效果图：

[color=Red]/***************白色菜单样式*/[/color]
.nav { float:left; width:841px; }
.nav ul
{
list-style: none;
width: 841px;
height: 68px;
position: relative;
float:left;
}
.nav ul li
{
height:68px;
float:left;
}
.nav ul li a
{
display: block;
outline: none;
height: 100%;
text-indent: -9000px;
}
.nav ul li.logo{background:url(../img/nav1_01.gif) 0 0 no-repeat; width:171px;}
.nav ul li.sy{background:url(../img/nav1_02.gif) 0 0 no-repeat; width:113px;}
.nav ul li.cp{background:url(../img/nav1_03.gif) 0 0 no-repeat; width:138px;}
.nav ul li.fw{background:url(../img/nav1_04.gif) 0 0 no-repeat; width:135px;}
.nav ul li.xw{background:url(../img/nav1_05.gif) 0 0 no-repeat; width:126px;}
.nav ul li.gy{background:url(../img/nav1_06.gif) 0 0 no-repeat; width:158px;}
.nav ul li.sy a:hover,.nav ul li.sycur{background:url(../img/nav2_02.gif) 0 0 no-repeat; width:113px;}
.nav ul li.cp a:hover,.nav ul li.cpcur{background:url(../img/nav2_03.gif) 0 0 no-repeat; width:138px;}
.nav ul li.fw a:hover,.nav ul li.fwcur{background:url(../img/nav2_04.gif) 0 0 no-repeat; width:135px;}
.nav ul li.xw a:hover,.nav ul li.xwcur{background:url(../img/nav2_05.gif) 0 0 no-repeat; width:126px;}
.nav ul li.gy a:hover,.nav ul li.gycur{background:url(../img/nav2_06.gif) 0 0 no-repeat; width:158px;z-index:999999;}
.nav ul li ul { display:none; border-top:1px solid #adcdda;width:190px;}
.nav ul li ul li{float:none; height:33px; border-bottom:1px solid #adcdda;border-left:1px solid #adcdda; border-right:1px solid #adcdda; background:#fff; margin:0; }
.nav ul li ul li a{text-indent:52px; display:block; background:none;font-size:12px; line-height:33px;font-family:"??"; font-weight:bold; color:#06549e;}
.nav ul li ul li a:hover { background:none #499ad1 !important; color:#fff; width:100% !important;}
.nav ul li:hover ul { display:block;}
/* ie6 */
.nav ul li.sfhover ul { display:block;}
[color=Blue]/*******************蓝色菜单样式[easyui-accordion ]*****************/[/color]
.accordion{
background:#fff;
border-width:0px;
overflow:hidden;
}
.accordion .accordion-header{
background:#75B9E0;
border-top-width:0;
border-bottom-color:#fff;
border-bottom-style:solid;
cursor:pointer;
color:#fff;
}
.accordion .accordion-header .panel-title{
font-weight:normal;
}
.accordion .accordion-header-selected .panel-title{
font-weight:bold;
}
.accordion-noborder .accordion-header{
border-width:0 0 1px;
}
.accordion-noborder .accordion-body{
border-width:0px;
}
.accordion-collapse{
background:url('images/banb.png') no-repeat;
}
.accordion-expand{
background:url('images/banp.png') no-repeat;
}
/**************end*******************/
<div class="nav" id="nav" style="z-index:100;">
<ul>
<li class="logo"><a href="/index.aspx">logo</a></li>
<li class="sycur"><a href="/index.aspx">首页</a> </li>
<li class="cp" style="z-index:100;"><a href="/ProductAndSolution.aspx">产品与方案</a>
<ul style="z-index:100;">
<li style="z-index:100;"><a href="/ProductAndSolution.aspx?tpid=1">·施工系列</a></li>
<li style="z-index:100;"><a href="/ProductAndSolution.aspx?tpid=2">·造价系列</a></li>
<li style="z-index:100;"><a href="/ProductAndSolution.aspx?tpid=3">·政府信息化</a></li>
<li style="z-index:100;"><a href="/ProductAndSolution.aspx?tpid=4">·企业信息化</a></li>
<li style="z-index:100;"><a href="/StandardSubject.aspx?ClassID=12">·标准课题</a></li>
</ul>
</li>
<li class="fw" style="z-index:100;"><a href="/UserTrain.aspx">服务与支持</a>
<ul style="z-index:100;">
<li style="z-index:100;"><a href="/UserTrain.aspx">·用户培训</a></li>
<li style="z-index:100;"><a href="/Question.aspx">·答疑解惑</a></li>
<li style="z-index:100;"><a href="/Servicesupport.aspx?ID=3">·获取服务</a></li>
<li style="z-index:100;"><a href="/DownSoft.aspx">·软件下载</a></li>
</ul>
</li>
<li class="xw" style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=11">新闻中心</a>
<ul style="z-index:100;">
<li style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=11">·通知公告</a></li>
<li style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=4">·市场活动</a></li>
<li style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=3">·行业动态</a></li>
<li style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=2">·公司新闻</a></li>
</ul>
</li>
<li class="gy" style="z-index:100;"><a href="/About.aspx">关于建科研</a>
<ul style="z-index:100;">
<li style="z-index:100;"><a href="/About.aspx?classid=1">·公司简介</a></li>
<li style="z-index:100;"><a href="/About.aspx?classid=3">·企业文化</a></li>
<li style="z-index:100;"><a href="/About.aspx?classid=4">·经营理念</a></li>
<li style="z-index:100;"><a href="/About.aspx?classid=5">·公司目标</a></li>
<li style="z-index:100;"><a href="/About.aspx?classid=10">·联系我们</a></li>
<li style="z-index:100;"><a href="/About.aspx?classid=11">·渠道建设</a></li>
<li style="z-index:100;"><a href="/About.aspx?classid=13">·人才招聘</a></li>
<li style="z-index:100;"><a href="/About.aspx?classid=120">·发表留言</a></li>
<li style="z-index:100;"><a href="/About.aspx?classid=121">·咨询顾问</a></li>
<li style="z-index:100;"><a href="/About.aspx?classid=555">·合作伙伴</a></li>
</ul>
</li>
</ul>
</div>

复制代码

分享到: QQ空间 腾讯微博 腾讯朋友

分享0 收藏0

哈哈哈大笑三声！

使用道具举报

超级版主

Rank: 8 Rank: 8

2^#

那个谁 发表于 2011-7-13 16:12:55 |只看该作者

围观。求指教、求指教

使用道具举报

书生

Rank: 2

3^#

嘟嘟 发表于 2011-7-18 17:43:52 |只看该作者

那个谁发表于 2011-7-13 16:12
围观。求指教、求指教

小弟我“菜蔬学前”我是了许多方法都不行！最终认为-------jquery easyui-accordion 开发系统时候必须结合 jquery easyui 中的布局才行，单独拿出来做网站效果还不如直接用 javascript/jquery做来得快！！！！希望高手解决了别忘告诉小弟和大家分享一下！！

哈哈哈大笑三声！

使用道具举报