jquery 左侧展开栏目
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>my_news</title>
<style>
*{padding:0;list-style:none;margin:0;}
body{background:#666;}
.linBox{margin-top:10px;margin-left:10px;width:70px;}
.linBox ul li a{color:#fff; font-size:12px; text-decoration:none;background:#333;padding:8px;margin:4px;float:left;border:1px solid #fff;position:relative; width:100px;}
.linBox ul li .linBoxList{background:#ccc; height:330px;width:300px;position:absolute; left:118px;border:1px solid #fff; font-size:12px;color:#000;padding:10px;display:none;top:14px;z-index:1;}
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$(".linBox ul li").hover(function(){
$(this).find(".linBoxList").show();
},
function(){
$(this).find(".linBoxList").hide();
});
});
</script>
</head>
<body>
<div class="linBox">
<ul>
<li>
<a href="">xxxxxxxxxx</a>
<div class="linBoxList">
<a href="">mmmmmm</a> <a href="">mmmmmm</a> <a href="">mmmmmm</a>
</div>
</li>
<li>
<a href="">yyyyyyyyyyy</a>
<div class="linBoxList">
<a href="">yyyyyyyyyy</a>
</div>
</li>
<li>
<a href="">zzzzzzzzzz</a>
<div class="linBoxList">
<a href="">zzzzzzzzz</a>
</div>
</li>
<li>
<a href="">xxxxxxxxxx</a>
<div class="linBoxList">
<a href="">1111111111111</a>
</div>
</li>
<li>
<a href="">xxxxxxxxxx</a>
<div class="linBoxList">
<a href="">1111111111111</a>
</div>
</li>
</ul>
</div>
</body>
</html>
jquery 左侧展开栏目的更多相关文章
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- jQuery左侧图片右侧文字滑动切换代码
分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div cla ...
- 基于jQuery左侧大图右侧小图切换代码
基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <hea ...
- 基于jQuery左侧小图滚动右侧大图显示代码
今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- jQuery 收缩展开效果
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- jQuery 当前展开其他收缩 三级下拉菜单(转载)
jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
随机推荐
- mysql 备份与还原
http://dev.yesky.com/281/35291281.shtml 每一种逻辑错误发生的概率都极低,但是当多种可能性叠加的时候,小概率事件就 放大成很大的安全隐患,这时候备份的必要性就凸显 ...
- JavaScript运行机制浅析
从一个简单的问题谈起: <script type="text/javascript"> alert(i); var i = 1; </script> 输出结 ...
- poj 3608 Bridge Across Islands
题目:计算两个不相交凸多边形间的最小距离. 分析:计算几何.凸包.旋转卡壳.分别求出凸包,利用旋转卡壳求出对踵点对,枚举距离即可. 注意:1.利用向量法判断旋转,而不是计算角度:避免精度问题和TLE. ...
- Spring实例化bean的三种方法
1.用构造器来实例化 <bean id="hello2" class="com.hsit.hello.impl.ENhello" /> 2.使用静态 ...
- STL源码剖析之list的sort函数实现
SGI STL的list的函数的实现源码大致如下: //list 不能使用sort函数,因为list的迭代器是bidirectional_iterator, 而sort //sort函数要求rand ...
- 推荐一个markdown编辑器-Haroopad
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:推荐一个markdown编辑器-Haroopad.
- 【Android - 基础】之Dialog分类及使用
1.确定取消对话框 代码: // 使用AlertDialog.Builder初始化对话框 AlertDialog.Builder builder0 = new AlertDialog.Builder( ...
- foreach -begin -process -end
gc d:\vm.txt|foreach -begin {write-host "It's beginning."} -process {$_ +"aa"} ...
- 即时通讯(IM)
即时通讯(IM)功能是APP的重要功能之一,而开发好移动IM却绝非易事.通常来说,IM技术选型至少要解决以下问题:1. 协议选型 2. IM服务器选型 3. 对协议和服务器做相应修改,通常来说直接拿个 ...
- 关于Parse库的配置问题
在使用Parse的一些相关服务时候,需要下载Parse的SDK,除了需要添加相应的系统框架和库的支持 AudioToolbox.framework CFNetwork.framework CoreGr ...