jQuery实现导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现导航栏</title>
<style>
*{
padding:0;
margin:0;
}
#navigation>ul{
list-style: none;
}
#navigation>ul>li{
float: left;
width: 80px;
height: 30px;
background: #009f95;
color: #ffffff;
text-align: center;
line-height: 30px;
cursor:pointer;
}
#navigation>ul>li:hover{
background:#0B61A4;
}
#navigation>ul>li>a{
color:#fff;
text-decoration:none;
}
#navigation>ul>li>ul{
display:none; }
#navigation>ul>li>ul>li{
background: #00B83F;
list-style: none;
}
#navigation>ul>li>ul>li:hover{
background: #1E9FFF;
}
#navigation>ul>li>ul>li>a{
color:#fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li>
<a href="">1</a>
<ul>
<li><a href="">11</a></li>
<li><a href="">13</a></li>
<li><a href="">14</a></li>
</ul>
</li>
<li>
<a href="">2</a>
<ul>
<li><a href="">21</a></li>
<li><a href="">22</a></li>
<li><a href="">23</a></li>
</ul>
</li>
<li>
<a href="">3</a>
</li>
</ul>
</div>
<script src="../js/vendor/jquery-3.2.1.min.js"></script>
<script>
$("#navigation>ul>li:has(ul)").hover(function(){
//show
$(this).children('ul').stop().slideDown();
},function(){
//hide
$(this).children('ul').stop().slideUp();
}) </script>
</body> </html>
jQuery实现导航栏的更多相关文章
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
- jquery实现导航栏跟随窗口滚动
最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...
- jquery 实现导航栏滑动效果
精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- 简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...
- jquery实现导航栏头部点击变换颜色
实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- jquery实现导航栏鼠标点击后实行背景高亮，点击离开恢复（超级简单！！！！），jquery导航栏
1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...
- jquery实现导航栏效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- JQuery Mobile - 导航栏选中状态代码
class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.htm ...
随机推荐
- 对View的onMeasure()方法的进一步研究
在Android开发中,很多人对自定义View是望而生畏,但这又是向高级进阶的必经之路,主要是对View里面的很多方法不知道怎么理解,其中一个就是onMeasure()方法. 首先,我自定义一个MyV ...
- 把KB转化为KB及以上单位
/** * 把KB转化为KB及以上单位 * @param int $kb * @return string $new_val */ function return_over_kb($kb) { $kb ...
- 【Yii系列】错误处理和日志系统
缘起 跟随上一章的脚步,上一章中,我们主要讲解了在用户发起请求,解析请求,服务器反馈请求以及session的一些知识点,这过程中,难免会遇到一些问题,比方说数据库查询失败,用户输入导致脚本出错,网络问 ...
- SQL捕捉blocking信息
场景: 客户抱怨数据库慢,但是回去看的时候,可能已经不慢了,为了查出当时到底是什么原因导致数据慢,制作了下面的存储过程,然后每隔3分钟运行一遍,把blocking信息插入一个数据库中. 主要就是查询s ...
- CSS学习---css基础知识0105
CSS, Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 举例:颜色,大小,高度.宽度.内外边距.边框.浮动.定位.字 ...
- DB_NAME DB_UNIQUE_NAME 和 SID 的理解
1. DB_NAME 表示数据库名称,DB_NAME 会保持在数据文件头.控制文件.REDO文件里,所以更改DB_NAME不能仅仅修改spfile ,还需要用nid 来进行更改,并且更改后还需要手工做 ...
- SpringBoot 中解决跨域请求
CORS 理解 同源策略是web浏览器实现的一个重要的安全概念,它防止JavaScript代码对不同的来源(例如,不同的域)发出请求,而不是它所服务的来源.虽然同源策略有效地防止来自不同来源的资源,但 ...
- 8、Node.js Buffer(缓冲区)
内容:Buffer与字符编码,Buffer创建.写入.读取.转换成JSON对象.合并.比较.拷贝.裁剪.长度 Buffer 与字符编码Buffer 实例一般用于表示编码字符的序列,比如 UTF-8 . ...
- BZOJ4870:[SHOI2017]组合数问题(组合数学,矩阵乘法)
Description Input 第一行有四个整数 n, p, k, r,所有整数含义见问题描述. 1 ≤ n ≤ 10^9, 0 ≤ r < k ≤ 50, 2 ≤ p ≤ 2^30 − 1 ...
- 使用loader打包静态文件－样式2
这篇我们了解下css-loader常用的配置项,要配置的话,use里面就不再是一个字符串了 // 打包模块不知道该怎么办,就去模块配置里面该怎么办 module: { // 规则 rules: [{ ...