基于jquery的大众点评,分类导航实现代码


Posted in Javascript onAugust 23, 2011

        简单   轻盈    快速    高效!

基于jquery的大众点评,分类导航实现代码
html结构:

<div id="menu"> 
<ul id="G_chan-panel" class="pop-panel pp_channels Fix" style="position: absolute; visibility: visible; z-index: 1001; top: 175px; left: 189px; "> 
<li class="root-item "> <a href="#" class="root-name"><span>餐饮</span></a> 
<ul class="pop-panel Fix sub-list"> 
<li class="main-cate"><a href="#">餐饮频道</a></li> 
<li><a href="#">粤菜</a></li> 
... 
</ul> 
</li> 
<li class="root-item"> <a href="#" class="root-name"><span>购物</span></a> 
<ul class="pop-panel Fix sub-list"> 
<li class="main-cate"><a href="#">购物频道</a></li> 
<li><a href="#">超市/便利店</a></li> 
... 
<li><a href="#">其他</a></li> 
</ul> 
</li> 
</ul> 
</div>

jquery代码:
<script type="text/javascript"> 
$(function () { 
$('#G_chan-panel').delegate("li", "mouseenter", function () { $(this).addClass("active") }); 
$('#G_chan-panel').delegate("li", "mouseleave", function () { $(this).removeClass("active") }); 
}); 
</script>

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("bg.png"); 
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 = $('#G_chan').offset().top; 
var Y = $('#G_chan').offset().left; 
$("#G_chan-panel").offset({ top: X + 36, left: Y - 5 }); 
//鼠标经过 动画效果 防点击链接跳转 
$("#G_chan").hover(function (event) { 
event || event.stopPropagation(); $("#G_chan-panel").slideDown().mouseleave(function () { 
$(this).slideUp() 
}); 
}); 
//点击 城市列表 下拉动画 防冒泡 
$("#G_loc").click(function (event) { event.preventDefault(); $("#G_loc-panel").slideToggle("slow"); });作者:曾祥展
Javascript 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 #Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 #Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 #Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 #Javascript
jQuery最佳实践完整篇
Aug 20 #Javascript
jQuery的deferred对象使用详解
Aug 20 #Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
django框架cookie和session用法实例详解
2019/12/10 Python
如何通过python检查文件是否被占用
2020/12/18 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
什么是唯一索引
2015/07/05 面试题
如何写一个自定义标签
2012/12/28 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
高中自我鉴定范文
2013/11/03 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
golang定时器
2022/04/14 Golang
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
字节飞书面试promise.all实现示例
2022/06/16 Javascript