基于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 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
微信小程序中为什么使用var that=this
Aug 27 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
星际玩家的三大定律
2020/03/04 星际争霸
解析smarty模板中类似for的功能实现
2013/06/18 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
python定时执行指定函数的方法
2015/05/27 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
体育专业学生自我评价范文
2014/01/17 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
公司员工活动策划方案
2014/08/20 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
美术教师个人总结
2015/02/06 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
《猴王出世》教学反思
2016/02/23 职场文书