jQuery左侧菜单效果
来源：互联网 发布：ai做淘宝照片 编辑：程序博客网 时间：2024/06/10 01:34
<head>
<title>左侧菜单效果</title>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () { $(".testbox ul li").hover(function () { $(this).find(".boxshow").show(); }, function () { $(this).find(".boxshow").hide(); }); });
</script>
<style type="text/css">
*
{
padding: 0;
list-style: none;
margin: 0;
}
body
{
/**/background: #ffffff;
}
.testbox
{
margin-top: 10px;
margin-left: 10px;
width: 200px;
}
.testbox ul li a
{
color: black;
font-size: 12px;
text-decoration: none;
background-color: #eeeeff;
padding: 8px;
float: left;
border: 1px solid #FFF;
position: relative;
width: 100px;
}
.testbox ul li a:hover
{
color: #000;
font-size: 12px;
text-decoration: none;
background-color: #ffffcc;
padding: 8px;
float: left;
position: relative;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 1px;
border-right-style: solid;
width: 87px;
}
.boxshow
{
background-color: #ffffcc;
height: 263px;
width: 150px;
position: absolute;
left: 118px;
border: 1px solid #FFF;
font-size: 12px;
color: #000;
padding: 10px;
top: 45px;
display: none;
z-index: 1;
}
</style>
</head>
<body>
<div class="testbox">
<ul>
<li><a>网站分类</a></li>
<li><a href="#">.NET技术</a>
<div class="boxshow">
<ul>
<li><a>.NET新手区</a></li>
<li><a>ASP.NET</a></li>
<li><a>C#</a></li>
<li><a>WinForm</a></li>
<li><a>Silverlight</a></li>
<li><a>WCF</a></li>
</ul>
</div>
</li>
<li><a href="#">编程语言</a>
<div class="boxshow">
<ul>
<li><a>JAVA</a></li>
<li><a>C++</a></li>
<li><a>PHP</a></li>
</ul>
</div>
</li>
<li><a href="#">软件设计</a>
<div class="boxshow">
<ul>
<li><a>架构设计</a></li>
<li><a>面向对象</a></li>
<li><a>设计模式</a></li>
</ul>
</div>
</li>
<li><a href="#">Web前端</a>
<div class="boxshow">
<ul>
<li><a>Html/Css</a></li>
<li><a>JavaScript</a></li>
<li><a>HTML5</a></li>
<li><a>jQuery</a></li>
</ul>
</div>
</li>
<li><a href="#">企业信息化</a>
<div class="boxshow">
<ul>
<li><a>SAP</a></li>
<li><a>SharePoint</a></li>
<li><a>GIS技术</a></li>
<li><a>Oracle ERP</a></li>
</ul>
</div>
</li>
<li><a href="#">手机开发</a>
<div class="boxshow">
<ul>
<li><a>Android开发</a></li>
<li><a>IOS开发</a></li>
<li><a>Windows Phone</a></li>
<li><a>Windows Mobile</a></li>
</ul>
</div>
</li>
<li><a href="#">软件工程</a>
<div class="boxshow">
<ul>
<li><a>敏捷开发</a></li>
<li><a>项目与团队管理</a></li>
<li><a>软件工程</a></li>
</ul>
</div>
</li>
<li><a href="#">数据库技术</a>
<div class="boxshow">
<ul>
<li><a>SQL Server</a></li>
<li><a>MySQL</a></li>
<li><a>Oracle</a></li>
<li><a>NoSQL</a></li>
</ul>
</div>
</li>
<li><a href="#">操作系统</a>
<div class="boxshow">
<ul>
<li><a>Windows7</a></li>
<li><a>Windows Server</a></li>
<li><a>Linux</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
<title>左侧菜单效果</title>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () { $(".testbox ul li").hover(function () { $(this).find(".boxshow").show(); }, function () { $(this).find(".boxshow").hide(); }); });
</script>
<style type="text/css">
*
{
padding: 0;
list-style: none;
margin: 0;
}
body
{
/**/background: #ffffff;
}
.testbox
{
margin-top: 10px;
margin-left: 10px;
width: 200px;
}
.testbox ul li a
{
color: black;
font-size: 12px;
text-decoration: none;
background-color: #eeeeff;
padding: 8px;
float: left;
border: 1px solid #FFF;
position: relative;
width: 100px;
}
.testbox ul li a:hover
{
color: #000;
font-size: 12px;
text-decoration: none;
background-color: #ffffcc;
padding: 8px;
float: left;
position: relative;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: 1px;
border-right-style: solid;
width: 87px;
}
.boxshow
{
background-color: #ffffcc;
height: 263px;
width: 150px;
position: absolute;
left: 118px;
border: 1px solid #FFF;
font-size: 12px;
color: #000;
padding: 10px;
top: 45px;
display: none;
z-index: 1;
}
</style>
</head>
<body>
<div class="testbox">
<ul>
<li><a>网站分类</a></li>
<li><a href="#">.NET技术</a>
<div class="boxshow">
<ul>
<li><a>.NET新手区</a></li>
<li><a>ASP.NET</a></li>
<li><a>C#</a></li>
<li><a>WinForm</a></li>
<li><a>Silverlight</a></li>
<li><a>WCF</a></li>
</ul>
</div>
</li>
<li><a href="#">编程语言</a>
<div class="boxshow">
<ul>
<li><a>JAVA</a></li>
<li><a>C++</a></li>
<li><a>PHP</a></li>
</ul>
</div>
</li>
<li><a href="#">软件设计</a>
<div class="boxshow">
<ul>
<li><a>架构设计</a></li>
<li><a>面向对象</a></li>
<li><a>设计模式</a></li>
</ul>
</div>
</li>
<li><a href="#">Web前端</a>
<div class="boxshow">
<ul>
<li><a>Html/Css</a></li>
<li><a>JavaScript</a></li>
<li><a>HTML5</a></li>
<li><a>jQuery</a></li>
</ul>
</div>
</li>
<li><a href="#">企业信息化</a>
<div class="boxshow">
<ul>
<li><a>SAP</a></li>
<li><a>SharePoint</a></li>
<li><a>GIS技术</a></li>
<li><a>Oracle ERP</a></li>
</ul>
</div>
</li>
<li><a href="#">手机开发</a>
<div class="boxshow">
<ul>
<li><a>Android开发</a></li>
<li><a>IOS开发</a></li>
<li><a>Windows Phone</a></li>
<li><a>Windows Mobile</a></li>
</ul>
</div>
</li>
<li><a href="#">软件工程</a>
<div class="boxshow">
<ul>
<li><a>敏捷开发</a></li>
<li><a>项目与团队管理</a></li>
<li><a>软件工程</a></li>
</ul>
</div>
</li>
<li><a href="#">数据库技术</a>
<div class="boxshow">
<ul>
<li><a>SQL Server</a></li>
<li><a>MySQL</a></li>
<li><a>Oracle</a></li>
<li><a>NoSQL</a></li>
</ul>
</div>
</li>
<li><a href="#">操作系统</a>
<div class="boxshow">
<ul>
<li><a>Windows7</a></li>
<li><a>Windows Server</a></li>
<li><a>Linux</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
- jQuery左侧菜单效果
- 左侧菜单渐入效果 jquery
- jQuery导航条的效果（左侧菜单）
- jquery仿京东导航,仿淘宝商城左侧分类导航菜单,jquery实现下拉菜单效果
- bootstrap左侧滑动菜单效果
- JQuery 左侧导航菜单demo
- jquery左侧导航网页菜单
- jQuery左侧二级菜单树
- jQuery实现左侧分类菜单
- jQuery实现左侧分类菜单
- jQuery简易左侧固定菜单
- 利用jquery制作左侧菜单
- 左侧TIPS 滑进滑出效果JQUERY
- 模似windows XP 左侧的菜单效果
- 模似windows XP 左侧的菜单效果
- 左侧导航菜单 子菜单的显示隐藏效果
- jquery左侧导航滑动网页定位效果
- javascript jquery 仿京东左侧悬浮框效果
- 为什么数据库采用B树，搜索引擎用Hash？
- Server.MapPath方法的应用方法
- Scheme基本概念之Delimiters
- STS lesson one : p
- CCNA实验三：配置EIGRP
- jQuery左侧菜单效果
- Redis应用场景
- C、C++最大值、最小值初始化
- 两道腾讯面试题
- 重学C++ 函数指针
- 关于curl命令行下载页面为空的问题
- 友元函数
- NYOJ - 阶乘因式分解（二）
- android应用 获取本地指定类型文件 的两种最优方法
