07- 小米导航案例

代码如下：

<!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;/**/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=" ">小米手机</a ><div class="show"><div class="container">
张三</div></div></li><li><a href="#">小米手机</a ><div class="show"><div class="container">
李四</div></div></li><li><a href="#">小米手机</a ><div class="show"><div class="container">
王五</div></div></li><li><a href="#">小米手机</a ><div class="show"><div class="container">
赵六</div></div></li><li><a href="#">小米手机</a ><div class="show"><div class="container">
武七</div></div></li><li><a href="#">小米手机</a ><div class="show"><div class="container">
哈哈哈哈</div></div></li>
</div><script type="text/javascript" src='jquery-3.3.1.js'></script><script type="text/javascript">$(function(){// 控制当鼠标第一次呼入的动画效果var animated = false;$('.box>ul>li>a').mouseenter(function(ev){// 下面代码时鼠标第一次滑入a标签的动画效果if(!animated){animated = true;var jQa = $(this);            jQa.css('color','#F52809')// next()表示当前标签的紧挨着的兄弟标签$(this).next("div").stop().slideDown(600);}else{var 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>

转载于:https://www.cnblogs.com/bai-max/p/9135766.html

07- 小米导航案例相关推荐

前端 ---小米导航案例
小米导航案例代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
CSS中浮动布局float（小米布局案例、导航栏案例、overflow）
1. CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...
Spring-学习笔记07【银行转账案例】
Java后端学习路线笔记汇总表[黑马程序员] Spring-学习笔记01[Spring框架简介][day01] Spring-学习笔记02[程序间耦合] Spring-学习笔记03[Spring的 ...
仿小米导航栏html+css
仿小米导航栏 <!DOCTYPE html> <html> <head><meta charset="utf-8"><titl ...
14.用定位的方式仿小米导航
效果图: 注:主要是利用死图片实现定位的方式素材: 代码: <!DOCTYPE html> <html lang="zh"> <head>&l ...
HTMLCSS设计小米导航栏
小米导航栏: 准备工作: 把需要实现的设计图放到ps中,量取需要的宽度高度间距值: 话不多说:直接上代码: <div class="box"> // 一个大盒子可以用n ...
3.【CSS复合选择器、元素显示模式display、背景background所有】简洁版小米侧边栏案例
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! b站视频链接:https://www.bilibili.com/video/BV14J4114768. 笔记参考大佬:https:/ ...
新浪导航案例-padding影响盒子好处
新浪导航案例-padding影响盒子好处效果如下: 代码如下: <!DOCTYPE html> <html lang="zh-CN"><head&g ...
小米5设置位置服务器,小米导航及所在地最佳GPS配置[教程]
本文适应任何带有GPS功能的手机.智能移动定位设备. ( U! t8 s( _: y 关于导航购买了小米,等于多了一台GPS导航仪.小米的GPS导航非常了得,也非常实用.无论何时何地,以何方式外出, ...
前端制作动态导航案例3
动态导航案例3 导航效果: 代码示例: <!DOCTYPE html> <html lang="en"><head><meta chars ...

07- 小米导航案例

07- 小米导航案例相关推荐

最新文章

热门文章