基于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 相关文章推荐
json 定义
Jun 10 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
详谈PHP编码转换问题
2015/07/28 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
Python操作列表之List.insert()方法的使用
2015/05/20 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Sanic框架流式传输操作示例
2018/07/18 Python
一百多行python代码实现抢票助手
2018/09/25 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
酒店行政人事部经理职务说明书
2014/02/26 职场文书
三方合作协议书范本
2014/04/18 职场文书
2014年教师节寄语
2014/08/11 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python