JQuery 左侧导航菜单demo

最新推荐文章于 2019-07-24 22:49:30 发布
最新推荐文章于 2019-07-24 22:49:30 发布
阅读量1.8k 收藏
点赞数
分类专栏： JQuery 文章标签： jquery class 测试 div function border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sias606/article/details/7532172
版权


<!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>左侧菜单效果</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script>
$().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:#666;
}
.testbox {
    margin-top: 10px;
    margin-left: 10px;
    width: 200px;
}
.testbox ul li a {
    color: #FFF;
    font-size: 12px;
    text-decoration: none;
    background-color: #333;
    padding: 8px;
    margin: 4px;
    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: #CCC;
    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;
    border-right-color: #CCC;
    z-index: 2;
    width: 87px;
}
.testbox ul li .boxshow {
    background-color: #ccc;
    height: 330px;
    width: 300px;
    position: absolute;
    left: 118px;
    border: 1px solid #FFF;
    font-size: 12px;
    color: #000;
    padding: 10px;
    top: 14px;
    display: none;
    z-index: 1;
}
-->
</style>
</head>
<body>
<div class="testbox">
  <ul>
    <li><a href="#">测试分类标题1</a>
      <div class="boxshow">分类标题1的内容</div>
    </li>
    <li><a href="#">测试分类标题2</a>
      <div class="boxshow">分类标题2的内容</div>
    </li>
    <li><a href="#">测试分类标题3</a>
      <div class="boxshow">分类标题3的内容</div>
    </li>
    <li><a href="#">测试分类标题4</a>
      <div class="boxshow">分类标题4的内容</div>
    </li>
    <li><a href="#">测试分类标题5</a>
      <div class="boxshow">分类标题5的内容</div>
    </li>
    <li><a href="#">测试分类标题6</a>
      <div class="boxshow">分类标题6的内容</div>
    </li>
    <li><a href="#">测试分类标题7</a>
      <div class="boxshow">分类标题7的内容</div>
    </li>
    <li><a href="#">测试分类标题8</a>
      <div class="boxshow">分类标题8的内容</div>
    </li>
    <li><a href="#">测试分类标题9</a>
      <div class="boxshow">分类标题9的内容</div>
    </li>
  </ul>
</div>
</body>
</html>
SIAS606
关注
专栏目录
用Jquery做的左边导航菜单
08-29
这是一个Jquery做的抽屉式的左边导航菜单，后台使用Java技术，借助dom4j对Xml进行解析，从而构建菜单。菜单很小，有疑问请到tntxia.iteye.com留言。
淘宝左侧菜单demo
01-07
淘宝左侧菜单demo 玩转淘宝 左侧菜单
js左侧三级菜单导航实例代码
aijiagui7454的博客
10-18 365
在左侧三级菜单导航想必大家都见到过吧，它的实现过程也并不复杂，下面有个不错的示例，感兴趣的朋友可以了解下 实例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt...
左侧滑动菜单栏最简Demo源码
04-02
自己写的一个最简单的仿人人、易信、百度云盘客户端滑动菜单栏的Demo源码，下面是我的说明博客http://blog.csdn.net/u013465022/article/details/22786021
jQuery招聘网站左侧导航分类菜单代码.zip
07-11
代码： <link rel="stylesheet" href="css/base.css?3.1.64"> <link rel="stylesheet" href="css/home.css?3.1.64"> [removed][removed] [removed] $(function(){ $('.aui-content-main ....
jQuery实现简单的列表式导航菜单效果代码
11-25
本文实例讲述了jQuery实现简单的列表式导航菜单效果代码。分享给大家供大家参考。具体如下： 这里使用jQuery实现简单的列表式导航菜单，是根据网上的一个教程，边看边写的，经过了修正，拷贝代码即可使用。主要实现...
一款jQuery实现的手风琴左侧导航菜单下载
10-14
主要使用了jquery库的slideUp和slideDown方法，再配合华丽的样式就可以实现非常好看的手风琴滑动收缩菜单，可用于前后台左右侧导航菜单，好处在于不占据空间。Demo及在线演示效果：...
jquery左侧浮动菜单
08-02
在网页设计中，创建一个美观且实用的导航菜单是至关重要的。"jQuery 左侧浮动菜单"是一个专门针对这一需求的实现，它利用了流行的JavaScript库jQuery的强大功能，为用户提供了一个方便的、可展开的左侧菜单。这个...
jquery左侧悬浮收缩菜单
11-14
总结来说，“jquery左侧悬浮收缩菜单”是一个利用jQuery和CSS实现的交互式菜单功能，它可以提高网站的用户体验，使用户能方便地访问导航菜单，同时保持页面的简洁。通过理解这一功能的实现原理，开发者可以将其应用...
jQuery左侧菜单导航
12-03
有朋友要WEB网页左侧菜单开发的，可以下，绝对满意。
仿QQ左侧菜单Demo
08-11
模仿QQ左菜单效果！想要自己的侧滑菜单更加的绚丽吗？本Demo值得参看参考~
JS左侧导航菜单
09-22
初学实用工具源码-非常实用好看的js常用左侧导航菜单，可展开折叠，代码齐全，具有demo演示，css文件，稍改动就能用在自己的程序代码中。
导航栏Demo
12-12
TabLayout使用Demo，详情见博客http://blog.csdn.net/u012702547/article/details/50273523
非常漂亮实用的系统左侧导航菜单
11-09
非常漂亮实用的系统左侧导航菜单
jquery左侧导航
yan7_7的博客
12-11 442
jquery左侧导航
js左侧下拉菜单效果demo示例（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-13 1578
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;左侧下拉菜单&lt;/title&gt; &lt;style&gt; *{ margin: 0; padding: 0; } ht
jQuery----左侧导航栏面板切换实现
01-17 1575
页面运行结果： 点击曹操　　　　　　　　　点击刘备　　　　　　　　点击孙权　　　　　　　　原图 需求说明：原图如上所示，点击一方诸侯的时候，显示该诸侯手下猛将，其他诸侯手下猛将隐藏 页面结构： 实现思路： ①给大的li注册鼠标点击事件 当鼠标点击时...
jquery框架：左侧导航条
weixin_43731793的博客
07-24 804
左侧导航条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面</title> </head> <style> *{ font-family: 微软雅黑; margin:0px; paddi...
jQuery实现iOS风格页面导航菜单教程
本篇文章主要介绍了如何利用jQuery技术开发出具有iOS风格的页面导航菜单。随着iOS设备的普及，这种简洁、直观的设计风格在网站设计中越来越受欢迎。作者将通过详细的步骤和示例，指导读者如何实现这种菜单效果。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值