小米首页二级菜单栏实现原理

小米二级菜单介绍

小米这个菜单栏跟别的二级还有所不同，她二级菜单是通栏的如果按照普通的写法肯定是写不出来的需要再此之上延申一个，就是需要控制二级菜单里通栏的哪个大盒子擦可以实现跟小米官网同样的效果我们先看效果图
效果就是这样子的具体原理最后将我把代码也发上来这个代码需要jQuery 需要你们自己引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;  }/* 父元素 */.parent{}/* 导航栏部分 */.top{width: 1226px;height: 80px;background-color: #ff6700;margin: 0 auto;}/* 下面内容区域 通栏*/.bom{background-color: #c48;width: 100%;display: none;height: 80px;}/* 下面内容区域*/.content{background-color: #999999;height: 100%;width: 1226px;margin: 0 auto;}/* ul导航内容 */ul{}li{text-align: center;padding: 0 5px;display: inline-block;line-height: 80px;height: 100%;}</style>
</head>
<body><div class="parent"><div class="top"><ul class="ul"><li>手机</li><li>飞机</li><li>乐色</li><span>456</span></ul></div><div class="bom"><div class="content"><ul class="ss"  style="display: none"><li>手机</li><li>飞机</li><li>乐色</li></ul><ul class="uls"><li>第二个</li><li>第二个</li><li>第二个</li></ul></div></div></div>
</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){$('.ul>li').mouseover(function(){$('.uls').css("display", "block")$('.bom').css("display", "block")})$('.content').mouseover(function () {$('.uls').css("display", "block")$('.bom').css("display", "block")})$('.ul>li').mouseout(function () {$('.bom').css("display", "none")})// bom 这个是背景颜色粉色的哪个最大盒子$('.bom').mouseleave(function () {$('.bom').css("display", "none")})//   $('.parent').mouseover
})</script>
</html>

小米首页二级菜单栏实现原理相关推荐

小米首页产品调研分析和设计方案介绍(详细的倒计时代码介绍)
小米首页产品调研分析和设计方案介绍记录一下我的日常练习,有写的不好的部分,帮我提出来,我们互相取长补短,欢迎交流. 1.分析首先调研和了解小米官网及登录页面的整体布局,首页大的方面分为概览.产品介 ...
小米首页实践开发中遇到的问题及解决方法
小米首页实践开发中遇到的问题及解决方法 1.菜单栏的指向小三角问题解决方法:使用矩形边框绘制三角形,用CSS设置矩形内容为空.边框设置一定的宽度(三角形的高),并且设置一个方向的边框颜色,其他方向颜 ...
3.1.9 OS之二级页表的原理和地址结构
文章目录 0.思维导图 1.为什么引入二级页表? 2.二级页表的原理和地址结构 3.如何实现二级页表的地址变换? 4.几个小细节 0.思维导图 1.为什么引入二级页表? 因为单级页表存在一些问题,所以 ...
如何实现二级菜单 html,javascript,html5_如何用vue实现二级菜单栏，javascript,html5,html,vue.js - phpStudy...
如何用vue实现二级菜单栏这是我的代码 import Menu from '../../libs/menu'; export default { data () { return { msg: '登 ...
HTML+CSS制作二级菜单栏
今天我们来练习一下二级菜单栏,说实话比较简单,但是自己一个人写的时候错误百出,逻辑混乱,于是乎网上找了几个案例,借鉴了一下思路,才整明白,鄙人确实不才,哈哈! 效果图附上: 首先:我已链接了外部样式重 ...
使用html+css+js制作小米首页
文章目录使用html+css+js制作小米首页 1.html制作小米官网页面结构(`index.html`) 2.使用css设置公共样式(`base.css`) 3.使用css设置页面元素样式(`i ...
HTML5|吭哧吭哧制作小米首页一小部分内容
制作小米首页部分(基础中的基础) 最近学校里来了一个培训机构做宣传,我就跟着偷摸地学了一丢丢东西,主要是讲如何用HTML5制作网页. 首先,可以了解一下HTML5与HTML4的区别: 字太多了,还是自 ...
使用js实现二级菜单栏切换
js实现二级菜单栏切换一.一级菜单栏和二级菜单在同一个盒子内. 当鼠标经过水果盒子时,让下面的内容显示. <!DOCTYPE html> <html lang="en&q ...
使用CSS模仿小米首页导航栏
仿小米首页左侧导航栏(纯css) 两大部分左侧灰色部分先上代码快捷键小技巧 CSS 右侧部分 CSS 页面元素隐藏总结两大部分首先我们先看看小米首页左侧导航栏的样子首先是左侧灰色部分,不 ...

小米首页二级菜单栏实现原理

小米二级菜单介绍

小米首页二级菜单栏实现原理相关推荐

最新文章

热门文章