菜单

分类导航实今世码_jquery_脚本之家

2020年2月13日 - 首页

简单 轻盈 快速 高效!

html结构: 复制代码 代码如下:

jquery代码: 复制代码 代码如下:

css样式: 复制代码 代码如下: BODY {
background-color:#fff; color:#555; font: 9pt/14px Tahoma, “宋体”,
Arial, Helvetica, Sans-Serif; letter-spacing: 0; margin: 0; } html,
body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, a, img, th, td,
form, fieldset, iframe, object, pre, code, legend, blockquote { border:
0 none; margin: 0; outline: 0 none; padding: 0; } h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal; } UL, LI { list-style: none
outside none; margin: 0; padding: 0; } IMG { border: medium none;
margin: 0; padding: 0; cursor:pointer; } input, img, select {
vertical-align: middle; } A { color: #666666; } A:link { color:
#666666; text-decoration: none; } A:visited { color: #666666;
text-decoration: none; } A:hover { color: #C90809; text-decoration:
none; } /*导航*/ .pp_channels .root-item, .pp_channels .root-name,
.pp_channels .root-name span, .pp_channels .sub-list li a {
background-image: url; background-repeat: no-repeat; } .G_chan-panel {
position: absolute; z-index: 1000; top: 120px; left: 199px; visibility:
hidden; } .pp_channels { width: 138px; padding: 0; border-width: 0 0
2px 1px; border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-box-shadow: -1px 1px 1px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc; box-shadow: 0 1px 5px #ccc; }
.pp_channels .root-item { zoom: 1; position: relative; width: 139px;
height: 34px; background-position: -13px -373px; overflow: visible;
vertical-align: middle; } .pp_channels .root-name { display: block;
z-index: 1001; position: relative; border-top:1px solid #B9F5D2;
padding-left: 10px; background-position: -10px -358px; cursor: pointer;
} .pp_channels .root-name span { display: block; border-right: 1px
solid #B9F5D2; padding-left: 9px; height: 34px; font-size: 1.2em;
line-height: 34px; color: #000; background-position: -167px -358px; }
.pp_channels .active .root-name { background: #fff; } .pp_channels
.active .root-name span { color: #C00; border-color: #fff; }
.pp_channels .no-sub .root-name span { border-color: #fff;
background-position: 20px -358px; } .pp_channels .sub-list { left:
138px; top: -34px; padding: 5px 2px 5px 16px; width: 200px; overflow:
hidden; _top: -35px; -moz-box-shadow: -1px 1px 1px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc; box-shadow: 0 1px 5px #ccc; }
.pp_channels .active .sub-list { visibility: visible; } .pp_channels
.sub-list li { float: left; width: 83px; margin: 0 10px 5px 0; }
.pp_channels .sub-list .main-cate { width: 200px; margin-right: -10px;
font-weight: bold; } .pp_channels .sub-list a { padding-left: 3px;
line-height: 21px; background-position: -169px -418px;
*background-position: -169px -420px; } .pp_channels .sub-list a: hover
{ background-position: -169px -438px; *background-position: -169px
-440px; } .pop-panel { z-index: 1000; position: absolute; visibility:
hidden; border: 1px solid #B9F5D2; padding: 5px 9px; background: #fff;
color: #61646E; #margin-left:-0px; _margin-left:-0px; } .pop-panel a
{ color: #61646E; } .pop-panel a: hover { text-decoration:none; color:
#C00; } 其他一些应用: 复制代码
代码如下: //定位 var X = $.top; var Y = $.left; $.offset({ top: X + 36,
left: Y – 5 }); //鼠标经过 动画效果 防点击链接跳转 $.hover { event ||
event.stopPropagation.slideDown().mouseleave.slideUp; //点击 城市列表
下拉动画 防冒泡 $.click { event.preventDefault.slideToggle;作者:曾祥展

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图