设为首页收藏本站
切换到宽版

Scripts 学盟

 找回密码
 加入学盟

QQ登录

只需一步，快速开始

Scripts 学盟 › 论坛 › 脚本开发技术 › 其它脚本 › jquery easyui-accordion 覆盖菜单
返回列表 发新帖
查看: 4566|回复: 5
打印 上一主题 下一主题

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

Rank: 2
跳转到指定楼层
1#
嘟嘟 发表于 2011-7-13 16:07:11 |只看该作者 |倒序浏览
bug 效果图： bug.jpg
  1. [color=Red]/***************白色菜单样式*/[/color]
  2. .nav  { float:left; width:841px; }
  3. .nav ul
  4. {
  5.     list-style: none;
  6.         width: 841px;
  7.         height: 68px;               
  8.         position: relative;
  9.         float:left;
  10. }

  12. .nav ul li
  13. {
  14.    
  15.         height:68px;
  16.         float:left;
  17. }
  18. .nav ul li a
  19. {
  20.     display: block;
  21.         outline: none;
  22.         height: 100%;
  23.         text-indent: -9000px;
  24. }
  25. .nav ul li.logo{background:url(../img/nav1_01.gif) 0 0 no-repeat; width:171px;}
  26. .nav ul li.sy{background:url(../img/nav1_02.gif) 0 0 no-repeat; width:113px;}
  27. .nav ul li.cp{background:url(../img/nav1_03.gif) 0 0 no-repeat; width:138px;}
  28. .nav ul li.fw{background:url(../img/nav1_04.gif) 0 0 no-repeat; width:135px;}
  29. .nav ul li.xw{background:url(../img/nav1_05.gif) 0 0 no-repeat; width:126px;}
  30. .nav ul li.gy{background:url(../img/nav1_06.gif) 0 0 no-repeat; width:158px;}
  31. .nav ul li.sy a:hover,.nav ul li.sycur{background:url(../img/nav2_02.gif) 0 0 no-repeat; width:113px;}
  32. .nav ul li.cp a:hover,.nav ul li.cpcur{background:url(../img/nav2_03.gif) 0 0 no-repeat; width:138px;}
  33. .nav ul li.fw a:hover,.nav ul li.fwcur{background:url(../img/nav2_04.gif) 0 0 no-repeat; width:135px;}
  34. .nav ul li.xw a:hover,.nav ul li.xwcur{background:url(../img/nav2_05.gif) 0 0 no-repeat; width:126px;}
  35. .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;}
  36. .nav ul li ul { display:none; border-top:1px solid #adcdda;width:190px;}
  37. .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; }
  38. .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;}
  39. .nav ul li ul li a:hover { background:none #499ad1 !important; color:#fff; width:100% !important;}
  40. .nav ul li:hover ul { display:block;}
  41. /* ie6 */
  42. .nav ul li.sfhover ul { display:block;}


  45. [color=Blue]/*******************蓝色 菜单样式[easyui-accordion  ]*****************/[/color]
  46. .accordion{
  47.         background:#fff;
  48.         border-width:0px;
  49.         overflow:hidden;
  50. }
  51. .accordion .accordion-header{
  52.         background:#75B9E0;
  53.         border-top-width:0;
  54.         border-bottom-color:#fff;
  55.         border-bottom-style:solid;
  56.         cursor:pointer;
  57.         color:#fff;
  58. }
  59. .accordion .accordion-header .panel-title{
  60.         font-weight:normal;
  61. }
  62. .accordion .accordion-header-selected .panel-title{
  63.         font-weight:bold;
  64. }
  65. .accordion-noborder .accordion-header{
  66.         border-width:0 0 1px;
  67.        
  68.        
  69. }
  70. .accordion-noborder .accordion-body{
  71.         border-width:0px;
  72. }
  73. .accordion-collapse{
  74.         background:url('images/banb.png') no-repeat;
  75. }
  76. .accordion-expand{
  77.         background:url('images/banp.png') no-repeat;
  78. }


  81. /**************end*******************/

  83. <div class="nav" id="nav" style="z-index:100;">
  84.             <ul>
  85.                 <li class="logo"><a href="/index.aspx">logo</a></li>
  86.                 <li class="sycur"><a href="/index.aspx">首页</a> </li>
  87.                 <li class="cp" style="z-index:100;"><a href="/ProductAndSolution.aspx">产品与方案</a>
  88.                     <ul style="z-index:100;">
  89.                         <li style="z-index:100;"><a href="/ProductAndSolution.aspx?tpid=1">·施工系列</a></li>
  90.                         <li style="z-index:100;"><a href="/ProductAndSolution.aspx?tpid=2">·造价系列</a></li>
  91.                         <li style="z-index:100;"><a href="/ProductAndSolution.aspx?tpid=3">·政府信息化</a></li>
  92.                         <li style="z-index:100;"><a href="/ProductAndSolution.aspx?tpid=4">·企业信息化</a></li>
  93.                         <li style="z-index:100;"><a href="/StandardSubject.aspx?ClassID=12">·标准课题</a></li>
  94.                     </ul>
  95.                 </li>
  96.                 <li class="fw" style="z-index:100;"><a href="/UserTrain.aspx">服务与支持</a>
  97.                     <ul style="z-index:100;">
  98.                         <li style="z-index:100;"><a href="/UserTrain.aspx">·用户培训</a></li>
  99.                         <li style="z-index:100;"><a href="/Question.aspx">·答疑解惑</a></li>
  100.                         <li style="z-index:100;"><a href="/Servicesupport.aspx?ID=3">·获取服务</a></li>
  101.                         <li style="z-index:100;"><a href="/DownSoft.aspx">·软件下载</a></li>
  102.                     </ul>
  103.                 </li>
  104.                 <li class="xw" style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=11">新闻中心</a>
  105.                     <ul style="z-index:100;">
  106.                         <li style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=11">·通知公告</a></li>
  107.                         <li style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=4">·市场活动</a></li>
  108.                         <li style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=3">·行业动态</a></li>
  109.                         <li style="z-index:100;"><a href="/NewsList.aspx?gettype=news&pid=2">·公司新闻</a></li>
  110.                     </ul>
  111.                 </li>
  112.                 <li class="gy" style="z-index:100;"><a href="/About.aspx">关于建科研</a>
  113.                     <ul style="z-index:100;">
  114.                         <li style="z-index:100;"><a href="/About.aspx?classid=1">·公司简介</a></li>
  115.                         <li style="z-index:100;"><a href="/About.aspx?classid=3">·企业文化</a></li>
  116.                         <li style="z-index:100;"><a href="/About.aspx?classid=4">·经营理念</a></li>
  117.                         <li style="z-index:100;"><a href="/About.aspx?classid=5">·公司目标</a></li>
  118.                         <li style="z-index:100;"><a href="/About.aspx?classid=10">·联系我们</a></li>
  119.                         <li style="z-index:100;"><a href="/About.aspx?classid=11">·渠道建设</a></li>
  120.                         <li style="z-index:100;"><a href="/About.aspx?classid=13">·人才招聘</a></li>
  121.                         <li style="z-index:100;"><a href="/About.aspx?classid=120">·发表留言</a></li>
  122.                         <li style="z-index:100;"><a href="/About.aspx?classid=121">·咨询顾问</a></li>
  123.                         <li style="z-index:100;"><a href="/About.aspx?classid=555">·合作伙伴</a></li>
  124.                     </ul>
  125.                 </li>
  126.             </ul>
  127.         </div>
复制代码
分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
分享分享0 收藏收藏0
哈哈哈大笑三声！

使用道具 举报

Rank: 8Rank: 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做来得快！！！！希望高手解决了别忘告诉小弟和大家分享一下！！
哈哈哈大笑三声！

使用道具 举报

Rank: 6Rank: 6
4#
Yisin 发表于 2011-7-18 20:52:16 |只看该作者
这个，还没听过
路不好走，你却依旧满眼的爱，找不到理由...

使用道具 举报

Rank: 2
5#
嘟嘟 发表于 2011-7-19 08:26:06 |只看该作者
Yisin 发表于 2011-7-18 20:52
这个，还没听过

自创  嘿嘿
哈哈哈大笑三声！

使用道具 举报

Rank: 8Rank: 8
6#
那个谁 发表于 2011-7-19 08:47:04 |只看该作者
嘟嘟 发表于 2011-7-18 17:43
小弟我“菜蔬学前”我是了许多方法都不行！最终认为-------jquery easyui-accordion  开发系统时候 必须 ...

其实一样的。用javascript 只是要多写很多代码。插件可以用来扩展。

使用道具 举报

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

手机版|Scripts 学盟   

GMT+8, 2026-5-3 06:52 , Processed in 1.011420 second(s), 15 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部