基于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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
Javascript var变量删除原理及实现
Aug 26 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
javascript常用的方法分享
2015/07/01 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python将数组n等分的实例
2019/12/02 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
高中同学聚会邀请函
2014/01/11 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
办公室主任先进事迹
2014/01/18 职场文书
同事吵架检讨书
2014/02/05 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
拉贝日记观后感
2015/06/05 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python