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 ...
随机推荐
- python 自动化测试
安装selenium 安装命令: pip install selenium 测试 打开一款Python编辑器,默认Python自带的IDLE也行.创建 baidu.py文件,输入以下内容: from ...
- MySQL 按照日期格式查询带有时间戳数据
按照日期格式查询带有时间戳数据一般在MSQL数据库中的时间都是以时间戳的格式来存储时间的,但是对于我们来说,时间戳格式具体表示的是什么时间,我们很难一眼看出来,所以当我们要具体查询某一个时间或时间段的 ...
- selenium模块基础用法详解
目录 selenium模块 官方文档 介绍 安装 有界面浏览器 无界浏览器 selenium+谷歌浏览器headless模式 基本使用 选择器 基本用法 xpath 获取标签属性 等待元素被加载 隐式 ...
- 牛客 216 C 小K的疑惑
大意: 给定树, 求多少个三元组(i,j,k), 满足dis(i,j)=dis(j,k)=dis(k,i). 刚开始想复杂了, 暴力统计了所有的情况. #include <iostream> ...
- 采样方法(二)MCMC相关算法介绍及代码实现
采样方法(二)MCMC相关算法介绍及代码实现 2017-12-30 15:32:14 Dark_Scope 阅读数 10509更多 分类专栏: 机器学习 版权声明:本文为博主原创文章,遵循CC 4 ...
- JavaScript02
一. 判断// 三元表达式// 循环// 判断: 用的最多的就是if判断// 1.// if(条件){// 当条件满足以后执行的语句// } // 2.// if(条件){// // }else{// ...
- 解决 vue 使用 element 时报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf
在 webpack.config.js 中加入这个依赖 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }
- 【Struts2】 国际化
一.概述 二.Struts2中国际化: 2.1 问题1 全局 局部 2.2 问题2 2.3 问题3 2.4 问题4 在Action中怎样使用 在JSP页面上怎样使用 一.概述 同一款软件 可以为不同用 ...
- str 文本函数的调用
方法 说明 S.isdigit() 判断字符串中的字符是否全为数字 S.isalpha() 判断字符串是否全为英文字母 S.islower() 判断字符串所有字符是否全为小写英文字母 S.isuppe ...
- 【2017-06-02】Linq高级查询,实现分页组合查询。
1.以XXX开头 2.以XXX结尾 3.模糊查询 4.求个数 5.求最大值 6.求最小值 7.求平均值 8.求和 9.升序 10.降序 11.分页 Skip()跳过多少条 Take()取多少条 12. ...