Jquery、简单的下拉列表、网页左部导航菜单
简单的下拉菜单、左部导航使用。
2016-5-13 记
效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
margin-left: 100px;
margin-top: 50px;
width: 120px;
}
.caktye_list{
border: 1px solid #eee;
}
.caktye_list li{
list-style: none;
}
.caktye_list li a{
width: 120px;
display: block;
height: 32px;
line-height: 32px;
text-decoration: none;
color: #333;
/*text-align: center;*/
border-top: 1px solid #eee;
}
.caktye_list li:first-child a{
border-top: none;
}
.cak{
display: none;
}
.cak li a{
width: 120px;
border-top: 1px solid #FFF;
background-color: #FDECF9;
}
.cak li a:hover{
background-color: #eee;
}
.cak li:first-child a{
border-top: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="caktye_list">
<li>
<a href="###">JavaScript</a>
<ul class="cak">
<li><a href="###">语法</a></li>
<li><a href="###">语句</a></li>
<li><a href="###">函数</a></li>
</ul>
</li>
<li>
<a href="###">Jquery</a>
<ul class="cak">
<li><a href="###">语法</a></li>
<li><a href="###">语句</a></li>
<li><a href="###">函数</a></li>
</ul>
</li>
<li>
<a href="###">Angular</a>
<ul class="cak">
<li><a href="###">语法</a></li>
<li><a href="###">语句</a></li>
<li><a href="###">函数</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".caktye_list li a").click(function(){
$(this).siblings("ul").slideToggle("fast");
$(this).siblings("ul").children("ul").slideUp("fast"); if($(this).siblings("ul").css("display")== "block"){
$(this).parents("li").siblings('li').children('ul').slideUp("fast");
}
})
})
</script>
</body>
</html>
需导入jQuery的js文件
Jquery、简单的下拉列表、网页左部导航菜单的更多相关文章
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- jquery——简单的下拉列表制作及bind()方法的示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Jquery学习笔记（8）--京东导航菜单（2）增加弹框
京东导航,添加中间的弹框栏,使用position定位,放在左侧栏的li标签里面,成为一个整体,保证鼠标在弹框里的时候,弹框不消失: <!DOCTYPE html> <html lan ...
- Jquery学习笔记（7）--京东导航菜单
主要是几个模块的浮动和定位不好处理,另外还缺少右侧导航,及幻灯片. <!DOCTYPE html> <html lang="en"> <head> ...
- css3和jquery实现的可折叠导航菜单(适合手机网页)
之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览 源码下载 这个 ...
- jQuery 简单漂亮的 Nav 导航菜单
自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一 ...
- Smint – 用于单页网站制作的 jQuery 导航菜单插件
Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
随机推荐
- url带#号，微信授权，微信分享那些坑
微信授权的方法是,在项目里面配置拦截器(此处可以参考各个框架的拦截器)没有拦截器也可以,反正意思就是跳转到项目里的时候判断微信环境 如果是微信环境, 判断微信环境的方法是 var ua = windo ...
- 常用的HTML代码
一.文字1.标题文字 <h#>..........</h#> #=1~6:h1为最大字,h6为最小字 2.字体变化 <font>..........</fon ...
- kettle系列-5.kettle实现二进制文件迁移
本文就是分享下二进制文件(图片.txt文件等)在oracle和文件系统间的传输的转换示例. 转换示例如下图: 示例本身较简单,但很多人应该还是不太清楚怎么做,很多时候都是上网搜索,网上有关的就是通过j ...
- Objective-C歌词解析
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { FILE* fp1;//定义文件指针 ...
- html表单提交方式
xml 表单提交方式: * 使用submit提交 <form> 要提交的数据 <input type="submit" /'> </form> ...
- scp 从远程服务器上一下载文件
scp -P202 xx3.x6.xx.xx:/usr/local/zookeeper-.zip /tmp #指定远程服务器的端口和远程服务器的目标文件 ,最后指定要下载到本的地目录 也可以从远程服务 ...
- Oracle执行计划详解
Oracle执行计划详解 --- 作者:TTT BLOG 本文地址:http://blog.chinaunix.net/u3/107265/showart_2192657.html --- 简介: ...
- [WPF]WPF Data Virtualization和UI Virtualization
这篇博客将介绍WPF中的虚拟化技术. 1. Data Virtualization 通常情况下我们说数据虚拟化是指数据源没有完全加载,仅加载当前需要显示的数据呈现给用户.这种场景会让我们想到数据分页显 ...
- 再谈缓存和Redis
自从上次分享<Redis到底该如何利用?>已经有1年多了,这1年经历了不少.从码了我们网站的第一行开始到现在,我们的缓存模块也不断在升级,这之中确实略有心得,最近也有朋友探讨缓存,觉得可以 ...
- winform进程、线程、TreeView递归加载
进程: 一般来说,一个程序就是一个进程,不过也有一个程序需要多个进程支持的情况. 进程所使用的类:Process 所需命名空间:System.Diagnostics; 可以通过进行来开启计算机上现有的 ...