jQuery系列(七):导航栏实例
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} ul {
list-style: none;
} .box {
width: 960px;
/*height: 60px;*/
overflow: hidden;
margin: 0 auto;
/*border: 1px solid green;*/
} .box ul li {
float: left;
/*width: 160px;*/
/*height: 60px;*/
line-height: 60px;
text-align: center; } .box ul li a {
text-decoration: none;
display: block;
width: 40px;
height: 60px;
color: #000;
padding: 0 60px;
background-color: yellow;
} .box .show {
width: 100%;
height: 200px;
position: absolute;
/*background-color: red;*/
top: 60px;
left: 0;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666; display: none;
box-shadow: 0 0 5px #777;
} .box .show.active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href=" ">felix手机</a>
<div class="show">
<div class="container">
张三
</div>
</div>
</li>
<li>
<a href="#">felix手机</a>
<div class="show">
<div class="container">
李四
</div>
</div>
</li>
<li>
<a href="#">felix手机</a>
<div class="show">
<div class="container">
王五
</div>
</div>
</li>
<li>
<a href="#">felix手机</a>
<div class="show">
<div class="container">
赵六
</div>
</div>
</li>
<li>
<a href="#">felix手机</a>
<div class="show">
<div class="container">
武七
</div>
</div>
</li>
<li>
<a href="#">felix手机</a>
<div class="show">
<div class="container">
哈哈哈哈
</div>
</div>
</li>
</div>
<script type="text/javascript" src='../jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(function () {
// 控制当鼠标第一次呼入的动画效果
let animated = false;
$('.box>ul>li>a').mouseenter(function (ev) {
// 下面代码时鼠标第一次滑入a标签的动画效果
if (!animated) {
animated = true;
let jQa = $(this);
jQa.css('color', '#F52809');
// next()表示当前标签的紧挨着的兄弟标签
$(this).next("div").stop().slideDown(600);
} else {
let jQa = $(this);
// 修改a标签的样式
jQa.css('color', '#F52809').parent('li').siblings('li').children('a').css('color', 'black');
// 切换下面显示区域的内容
jQa.next('div').stop().show().parents('li').siblings('li').children('.show').stop().hide();
}
});
// 鼠标进入到下方区域,保持不变
$('.show').mouseenter(function (ev) {
$(this).stop().show();
});
// 鼠标离开下方区域
$('.show').mouseleave(function (ev) {
$(this).stop().slideUp(300);
animated = false
});
// 鼠标离开导航栏列表
$('.box').mouseleave(function (ev) {
console.log($(ev.target));
$(ev.target).next("div").stop().slideUp(300);
animated = false; });
})
</script>
</body>
</html>
jQuery系列(七):导航栏实例的更多相关文章
- jquery侧边折叠导航栏制作,两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
- jquery版滑块导航栏
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
- 【1-4】jQuery代码风格-导航栏
实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- Jquery实现动态导航栏和轮播导航栏
动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
- jQuery实现侧边导航栏效果
效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...
- 导航菜单:jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
- 基于Bootstrap、Jquery的自适应导航栏
css代码: .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;backgr ...
随机推荐
- PHP学习之PHP编码习惯
命名的注意事项: 命名要有实际含义 命名风格保持一致 不用拼音命名 不用语言关键字 适当的使用注释 好的代码应该是自描述的 难以理解的地方加上注释 函数的功能加上注释说明 类的功能和使用方法加注释 多 ...
- jupyter lab 安装
在windows下安装jupyter 特别简单 首先你需要有Anaconda or python的环境变量,这里我就不说怎么安装环境变量了,网上一大堆教程 启动黑窗口,下载jupyter pip in ...
- python学习-8 用户有三次机会登陆
用户登陆(三次机会) count = 0 while count < 3: user = input('请输入账号:') pwd = input('请输入密码:') ': print(" ...
- Oracle设置权限和还原数据库
Oracle还原数据库 ,在最高权限账户上,先将安装好的数据上创建一个账户 -- Create the user create user newsafe identified by newsafe d ...
- MVC全局过滤器
Asp.NET MVC4中的全局过滤器,可以对整个项目进行全局监控. 新建一个MVC4项目,可以在global.asax文件中看到如下代码: FilterConfig.RegisterGlobalF ...
- B树,B+树的原理及区别
如图所示,区别有以下两点: 1. B+树中只有叶子节点会带有指向记录的指针(ROWID),而B树则所有节点都带有,在内部节点出现的索引项不会再出现在叶子节点中. 2. B+树中所有叶子节点都是通过指针 ...
- 07 Redis存储Session
django-redis-sessions 官方文档:https://pypi.org/project/django-redis-sessions/ dango-redis 官方文档:http://n ...
- AJAX中所谓的异步
async javascript and xml 异步的js和xml 在AJAX中的异步不是我们所理解的同步异步编程,而泛指“局部刷新”,但是我们以后的AJAX请求尽可能异步请求数据(因为异步数据获取 ...
- Oracle笔记(十) 约束
表虽然建立完成了,但是表中的数据是否合法并不能有所检查,而如果要想针对于表中的数据做一些过滤的话,则可以通过约束完成,约束的主要功能是保证表中的数据合法性,按照约束的分类,一共有五种约束:非空约束.唯 ...
- Ubuntu系统---WeChat安装
Ubuntu安装微信教程 工具/原料 ubuntu 14.04 x86 方法/步骤 这次我用的系统是Ubuntu 14.04 x86,在网上先去下载electronic-wechat-linux ht ...