安科网

Jquery二级菜单，鼠标经过显示二级分类,大类和小类都有链接

ruoyiqing

ruoyiqing

2013-10-13

关注 关注

Jquery二级菜单，鼠标经过显示二级分类,大类和小类都有链接

 一般类似向下打开的导航菜单都是小类才有链接，这个因为是鼠标经过而不是点击的，大小类别都是链接

Jquery二级菜单，鼠标经过显示二级分类,大类和小类都有链接
演示
XML/HTML Code
  1. <div id="FrontProductsCategory_show01-1293769104214" class="FrontProductsCategory_show01-d1_c2"><div class="menu-first">  
  2.     <ul>  
  3.     <li >  
  4.           <a href="http://www.freejs.net/daohangcaidan.html" target="_self" class="menu-text1">  
  5.                     导航菜单<span></span>  
  6.                 </a>  
  7.                 <div class="menu-second">  
  8.             <p class="top"></p>  
  9.             <ul>  
  10.                 <li>  
  11.                       <a href="http://www.freejs.net/article_daohangcaidan_36.html" target="_self" class="menu-text2">  
  12.                         水平展开菜单,侧拉菜单  
  13.                         </a>  
  14.                         </li>  
  15.                 <li>  
  16.                       <a href="" target="_self" class="menu-text2">  
  17.                         A  
  18.                         </a>  
  19.                         </li>  
  20.                 <li>  
  21.                       <a href="" target="_self" class="menu-text2">  
  22.                         B<span>(1)</span>  
  23.                         </a>  
  24.                         </li>  
  25.                 <li>  
  26.                       <a href="" target="_self" class="menu-text2">  
  27.                         C<span>(5)</span>  
  28.                         </a>  
  29.                         </li>  
  30.                 </ul>  
  31.             <p class="bottom"></p>  
  32.           </div>  
  33.           </li>  
  34.        
  35.      
  36.       <li >  
  37.           <a href="" target="_self" class="menu-text1">  
  38.                     表单<span></span>  
  39.                 </a>  
  40.                 <div class="menu-second">  
  41.             <p class="top"></p>  
  42.             <ul>  
  43.                 <li>  
  44.                       <a href="" target="_self" class="menu-text2">  
  45.                         A<span>(12)</span>  
  46.                         </a>  
  47.                         </li>  
  48.                 <li>  
  49.                       <a href="" target="_self" class="menu-text2">  
  50.                         B<span>(19)</span>  
  51.                         </a>  
  52.                         </li>  
  53.                 <li>  
  54.                       <a href="" target="_self" class="menu-text2">  
  55.                         C<span>(11)</span>  
  56.                         </a>  
  57.                         </li>  
  58.                 </ul>  
  59.             <p class="bottom"></p>  
  60.           </div>  
  61.           </li>  
  62.       <li class="menu-none">  
  63.           <a href="" target="_self" class="menu-text1">  
  64.                     焦点图<span>(28)</span>  
  65.                 </a>  
  66.                 </li>  
  67.         
  68.       </ul>  
  69.   </div>  
  70. </div>   
CSS Code
  1. @charset "utf-8";  
  2. .FrontProductsCategory_show01-d1_c2{  
  3.    text-align: left;  
  4.     margin: 0px auto;  
  5.     padding-left: 65px;  
  6.     width: 75%;  
  7.     color: #4c4948;  
  8.     clear: both;  
  9.     overflow: hidden;  
  10. }  
  11. .FrontProductsCategory_show01-d1_c2 UL{  
  12.    padding-bottom: 0px;  
  13.     list-style-type: none;  
  14.     margin: 0px;  
  15.     padding-left: 0px;  
  16.     padding-right: 0px;  
  17.     padding-top: 0px;  
  18. }  
  19. .FrontProductsCategory_show01-d1_c2 LI{  
  20.    padding-bottom: 0px;  
  21.     list-style-type: none;  
  22.     margin: 0px;  
  23.     padding-left: 0px;  
  24.     padding-right: 0px;  
  25.     padding-top: 0px;  
  26. }  
  27. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI{  
  28.    display: inline;  
  29. }  
  30. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI A{  
  31.    border-bottom: #fff 1px solid;  
  32.     line-height: 32px;  
  33.     width: 160px;  
  34.     display: block;  
  35.     background: url(first-bg.gif) no-repeat 0px 0px;  
  36.     height: 32px;  
  37.     border-top: #fff 1px solid;  
  38.     text-decoration: none;  
  39. }  
  40. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI A:hover{  
  41.    background: url(index_11.jpg) no-repeat 0px 0px;  
  42.     text-decoration: none;  
  43. }  
  44. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI A.current{  
  45.    width: 160px;  
  46.     background: url(first-bg.gif) no-repeat 0px -64px;  
  47.     height: 32px;  
  48. }  
  49. .FrontProductsCategory_show01-d1_c2 .menu-second{  
  50.    padding-bottom: 0px;  
  51.     margin: 0px;  
  52.     padding-left: 0px;  
  53.     width: 160px;  
  54.     padding-right: 0px;  
  55.     display: none;  
  56.     height: 100%;  
  57.     padding-top: 0px;  
  58. }  
  59. .FrontProductsCategory_show01-d1_c2 .menu-second UL LI{  
  60.    padding-bottom: 0px;  
  61.     margin: 0px;  
  62.     padding-left: 0px;  
  63.     padding-right: 0px;  
  64.     padding-top: 0px;  
  65. }  
  66. .FrontProductsCategory_show01-d1_c2 .menu-second P{  
  67.    margin: 0px;  
  68. }  
  69. .FrontProductsCategory_show01-d1_c2 .menu-second UL LI A{  
  70.    line-height: 25px;  
  71.     margin: 1px 0px;  
  72.     width: 160px;  
  73.     background: url(second-b.gif) no-repeat 0px 0px;  
  74.     height: 25px;  
  75.     text-decoration: none;  
  76. }  
  77. .FrontProductsCategory_show01-d1_c2 .menu-second UL LI A:hover{  
  78.    width: 160px;  
  79.     background: url(second-b.gif) no-repeat 0px -25px;  
  80. }  
  81. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI.menu-none A{  
  82.    line-height: 32px;  
  83.     margin: 2px 0px;  
  84.     width: 160px;  
  85.     display: block;  
  86.     background: url(first-bh.gif) no-repeat 0px 0px;  
  87.     height: 32px;  
  88.     text-decoration: none;  
  89. }  
  90. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI.menu-none A:hover{  
  91.    width: 160px;  
  92.     background: url(first-bh.gif) no-repeat 0px -32px;  
  93.     height: 32px;  
  94.     text-decoration: none;  
  95. }  
  96. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI.menu-none A.current{  
  97.    width: 160px;  
  98.     background: url(first-bh.gif) no-repeat 0px -64px;  
  99.     height: 32px;  
  100.     color: #0066cc;  
  101. }  
  102. A.menu-text1:link{  
  103.    padding-left: 40px;  
  104.     color: #4c4948;  
  105.     font-size: 12px;  
  106.     text-decoration: none;  
  107. }  
  108. A.menu-text1:visited{  
  109.    padding-left: 40px;  
  110.     color: #4c4948;  
  111.     font-size: 12px;  
  112.     text-decoration: none;  
  113. }  
  114. A.menu-text1:active{  
  115.    padding-left: 40px;  
  116.     color: #4c4948;  
  117.     font-size: 12px;  
  118.     text-decoration: none;  
  119. }  
  120. A.menu-text1:hover{  
  121.    color: #0066cc;  
  122.     font-size: 12px;  
  123.     text-decoration: underline;  
  124. }  
  125. A.menu-text2:link{  
  126.    padding-bottom: 0px;  
  127.     padding-left: 40px;  
  128.     padding-right: 0px;  
  129.     color: #3472a1;  
  130.     font-size: 12px;  
  131.     text-decoration: none;  
  132.     padding-top: 0px;  
  133. }  
  134. A.menu-text2:visited{  
  135.    padding-bottom: 0px;  
  136.     padding-left: 40px;  
  137.     padding-right: 0px;  
  138.     color: #3472a1;  
  139.     font-size: 12px;  
  140.     text-decoration: none;  
  141.     padding-top: 0px;  
  142. }  
  143. A.menu-text2:active{  
  144.    padding-bottom: 0px;  
  145.     padding-left: 40px;  
  146.     padding-right: 0px;  
  147.     color: #3472a1;  
  148.     font-size: 12px;  
  149.     text-decoration: none;  
  150.     padding-top: 0px;  
  151. }  
  152. A.menu-text2:hover{  
  153.    color: #0066cc;  
  154.     font-size: 12px;  
  155.     text-decoration: underline;  
  156. }  
JavaScript Code
  1. var FrontProductsCategory_show01 = {  
  2.     productListHref :"",  
  3.     categoryId :"",  
  4.     tree :"",  
  5.     productListHrefTarget :"_self",  
  6.     /* 创建一个dhtml树 compId：组件实例ID, width：宽度, height：高度, rootId：根ID */  
  7.     createTree : function(compId, width, height, rootId) {  
  8.         this.tree = new dhtmlXTreeObject(compId, width, height, rootId);  
  9.         this.tree.setOnClickHandler(this.setOnClickHandler);  
  10.         this.tree.setOnOpenHandler(this.tonopen);  
  11.     },  
  12.     /* 设置点击结点的回调函数 cid:商品分类ID */  
  13.     setOnClickHandler : function(cid) {  
  14.         if (FrontProductsCategory_show01.productListHrefTarget == "_blank") {  
  15.             window.open(FrontProductsCategory_show01.productListHref.replace(  
  16.                     "productListHrefParamValue", cid), "",  
  17.                     "toolbar=yes,location=yes,menubar=yes,resizable=yes");  
  18.         } else {  
  19.             window.location.href = FrontProductsCategory_show01.productListHref  
  20.                     .replace("productListHrefParamValue", cid);  
  21.         }  
  22.     },  
  23.     tonopen : function(id, mode) {  
  24.         if (mode > 0) {  
  25.             FrontProductsCategory_show01.tree.setItemColor(id, jQuery(  
  26.                     "div[class^=FrontProductsCategory_show01-d3] span.standartTreeRow")  
  27.                     .css("color"), jQuery(  
  28.                     "div[class^=FrontProductsCategory_show01-d3] span.standartTreeRow")  
  29.                     .css("color"));  
  30.         } else {  
  31.             FrontProductsCategory_show01.tree.setItemColor(id, jQuery(  
  32.                     "div[class^=FrontProductsCategory_show01-d3] span.standartTreeRow")  
  33.                     .css("_color"), jQuery(  
  34.                     "div[class^=FrontProductsCategory_show01-d3] span.standartTreeRow")  
  35.                     .css("_color"));  
  36.         }  
  37.         return true;  
  38.     }  
  39. }  


原文地址:http://www.freejs.net/article_daohangcaidan_54.html

padding margin jquery

ruoyiqing

ruoyiqing

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

vmware扩展跟分区

进行的操作：在 windows 下运行 CMD , 转到 vmware 的安装目录,可执行vmware-vdiskmanager.exe；在Linux下，直接敲入vmware-vdiskmanager ,可执行该指令扩充使用的指令: vmware-vdis

周公周金桥 2020-09-06

Wyn Enterprise中如何转换数据类型？

在设计报表或者仪表板时，有时候从数据集获取到的数据类型和我们分析所需的类型并不匹配，不是同一种数据类型，可能会造成无法将数据正确分类或者过滤等情况。此处主要是仪表板数据集的数据类型转换。此处要注意，直接通过下拉选择调整类型可能部分情况不会生效。此时，需要使

大象从不倒下 2020-07-31

css基础--盒子模型

1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。　　盒模型允许我们

AlisaClass 2020-07-19

多张图片懒加载

ul li { height: 900px; margin: 100px auto; text-align: center; }. oDiv.style.display = ‘block‘ : oDiv.style.display = ‘none‘

MaureenChen 2020-04-21

知识图谱如何改变银行业务模式？

知识图谱被构造为附加的虚拟数据层，位于现有数据库之上，并将数据大规模链接在一起。由于知识图谱基于知识和概念，因此要想创建良好的知识图谱，必须让整个组织内不同领域的主题专家都参与进来。试图建立自己的知识图谱的金融机构不必从头开始。由于知识图谱能够以智能的方式

xingguanghai 2020-03-13

web第六天，CSS优先级与盒子模型

　　　　通过设置inherit值，可以改变默认的继承方式。　　　　当设置相同样式时，后写的优先级较高，但不建议出现重复设置样式的情况。　　　　场景 ： 紧急情况下使用。　　　　群组选择器与单一选择器的权重相同，靠后写的优先级高。　　　　3，padding属

teresalxm 2020-02-18

css布局及鼠标悬浮下拉框展现

<span class="span-left"> 信息。。。。。。。。。<span class="span-right"><span>评论|</span><spa

木四小哥 2013-05-14

Scope- ruby中变量的作用范围

当程序从一个class，或者module，或者method进入（退出）时，作用域就会改变，对应的3个关键字为：class module，和 def， 每一个关键字的位置就是作用域的入口。class和module的作用域于method的不同，当定义class

SoShellon 2013-06-01

Nginx 下缓存静态文件（如css js)(转)

如css,js,htm,html,jpg,gif,png,flv,swf，这些文件都不是经常更新。便于缓存以减轻服务器的压力。proxy_cache cache_one;设置缓存共享内存区块，也就是keys_zone名称。proxy_cache_valid

Simagle 2013-05-31

浏览器缓存机制

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同

羽化大刀Chrome 2013-05-31

css的margin与padding练习

DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>margin<

waterv 2020-01-08

svn c命令

大数据资料共享。

ganyouxianjava 2012-05-31

inotify+rsync实现linux文件批量更新[转]

Timeout = 300通过该选项可以覆盖客户指定的IP超时时间.通过该选项可以确保rsync服务器不会永远等待一个崩溃的客户端.超时单位为秒钟,0表示没有超时定义,这也是默认值.对于匿名rsync服务器来说,一个理想的数字是600.#transfer

LutosX 2013-07-29

linux_5 个获取 Linux 主机信息的命令

Linux 系统管理员在接手一台新的服务器的时候，如果没有好的交接文档，我们可以得到的主机信息就要靠我们自己了。很多信息是可以直接通过命令从主机上获得的，下面就和大家分享 5 个获取 Linux 主机信息的命令。您可能会注意到，主机名通常也出现在命令提示符

vanturman 2013-06-27

Linux中SWAP交换分区

编辑 /etc/fstab文件，并增加如下第二行代码。如果您喜欢这篇文章。UUID=b45eed4a-b319-43fa-9d03-200c558b5d84 / ext4 defaults 1 1UUID=0ab45aeb-98f7-4f31-863d-7

wutongyuq 2013-04-12

mac系统如何显示和隐藏文件

显示Mac隐藏文件的命令：defaults write com.apple.finder AppleShowAllFiles YES. 隐藏Mac隐藏文件的命令：defaults write com.apple.finder AppleShowAllFil

luoqu 2013-04-10

【内测来袭】PerfDogService 一键搭建您的性能测试平台

PerfDog是一款移动平台的性能测试工具，快速定位分析性能问题，提升APP应用及游戏性能和品质。手机无需ROOT/越狱，手机硬件、游戏及应用APP也无需做任何修改，极简化即插即用，是全网唯一支持iOS/Android/小程序/H5等移动全平台性能测试的工

today0 2020-09-22

最靠谱的http协议无状态解释

3 每次的请求都是独立的，它的执行情况和结果与前面的请求和之后的请求是无直接关系的，它不会受前面的请求应答情况直接影响，也不会直接影响后面的请求应答情况。所以，这个状态，加上前面说的客户端也有cookie，就是指，客户端和服务器在临时会话中产生的数据！

89520292 2020-09-18

(转)[iOS概念]Apple Pay与IAP的区别

在Apple Pay的发布会上,Eddy Cue表示,苹果并没有兴趣建立一个收集用户数据的业务,苹果并不知道你购买了什么,不知道你是从哪里购买的,为了这个商品花了多少钱。所以这也就是苹果和支付宝,微信等最大的不同:Apple Pay并不会将资金存放在App

bigname 2020-08-25

QNET：APP弱网络测试专家

基本思路是在PC上装一个Fiddler网络抓包工具，然后再将Android设备的网络代理到PC上，通过在PC上的Fiddler在设置延时来进行弱网络模拟。

灵均兰草 2020-08-20
ruoyiqing

ruoyiqing

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号