js仿小米二级菜单显示效果
本文实例为大家分享了js仿小米二级菜单显示效果的具体代码，供大家参考，具体内容如下
提示：以下是本篇文章正文内容，下面案例可供参考
一、效果展示
二、代码
1.页面样式
代码如下（示例）：
<!-- 搜索栏 主导航 logo --> <header class="clearfix"> <div class="w"> <div class="logo"> <div class="logo-img"> <img src="images/This_is_tow_Mi.png" alt=""> </div> </div> <ul class="main-nav"> <li><a href="javascript:;">小米手机</a></li> <li><a href="javascript:;">Redmi红米</a></li> <li><a href="javascript:;">电视</a></li> <li><a href="javascript:;">笔记本</a></li> <li><a href="javascript:;">家电</a></li> <li><a href="javascript:;">路由器</a></li> <li><a href="javascript:;">智能硬件</a></li> <li><a href="javascript:;">服务</a></li> <li><a href="javascript:;">社区</a></li> </ul> <div class="ss"> <input type="text" placeholder="智能硬件"><button></button> </div> </div> </header> <!-- 二级菜单 --> <div class="sec-nav"> <div class="w"> <ul id="sec"> <li><img src="images/Mi_images/Mi_10pro.jpg"> <p>小米10 Pro</p> <p>4699元起</p> </li> <li><img src="images/Mi_images/Mi_10pro.jpg"> <p>小米10 Pro</p> <p>4699元起</p> </li> <li><img src="images/Mi_images/Mi_10pro.jpg"> <p>小米10 Pro</p> <p>4699元起</p> </li> <li><img src="images/Mi_images/Mi_10pro.jpg"> <p>小米10 Pro</p> <p>4699元起</p> </li> <li><img src="images/Mi_images/Mi_10pro.jpg"> <p>小米10 Pro</p> <p>4699元起</p> </li> <li><img src="images/Mi_images/Mi_10pro.jpg"> <p>小米10 Pro</p> <p>4699元起</p> </li> </ul> </div> </div>
2.css样式
代码如下（示例）：
/* 头部 */
header {
height: 100px;
line-height: 100px;
}
header .logo {
float: left;
width: 180px;
height: 100%;
padding: 15px 0;
}
.logo-img {
width: 50px;
height: 50px;
margin: 10px 0;
background-color: #ff6900;
border-radius: 20px;
overflow: hidden;
}
.logo-img img {
position: relative;
top: -27px;
width: 100%;
vertical-align: middle;
}
.main-nav {
float: left;
/* margin-left: 20px; */
overflow: hidden;
}
.main-nav>li {
float: left;
padding-left: 20px;
}
.main-nav li a {
color: #000;
padding: 5px;
}
.main-nav>li a:hover {
color: #ff6900;
}
.ss {
float: right;
margin-left: 30px;
}
.ss input {
width: 220px;
height: 50px;
padding-left: 10px;
border: 1px solid #eee;
}
.ss button {
position: relative;
top: -4px;
width: 50px;
height: 50px;
background-color: #fff;
border: 1px solid #eee;
}
.ss button::after {
content: '\e914';
font-family: 'icomoon';
position: absolute;
top: 14px;
left: 14px;
font-size: 20px;
}
.sec-nav {
overflow: hidden;
position: absolute;
top: 140px;
left: 0;
width: 100%;
height: 0px;
background-color: #fff;
z-index: 15;
}
.sec_hover {
height: 200px;
box-shadow: 0px 2px 2px 0px #eee;
border: 1px solid #eee;
}
.sec-nav ul {
overflow: hidden;
}
.sec-nav ul li {
float: left;
width: 180px;
padding: 10px 10px;
}
.sec-nav ul li img {
width: 100%;
border-right: 2px solid #eee;
}
.sec-nav p {
text-align: center;
line-height: 20px;
}
.sec-nav ul li p:nth-child(2) {
font-size: 13px;
margin-top: 20px;
}
.sec-nav ul li p:nth-child(3) {
font-size: 12px;
color: #ff6900;
}
3.js样式
采用了动态生成元素节点。
第一步： 我们把html 和 css的架构搭建完善。
第二步： 我们构造一个函数来根据传入的对象进行节点的生成。
第三步： 给一级菜单设置自定义属性，来判断那个对象触发了事件。
第四步： 根据自定义属性判断后，调用构造函数生成节点（在生成新节点前要先删除旧节点，保证只显示当前对象内容）。
// 二级菜单的显示
var main_nav = document.querySelector('.main-nav');
var as = main_nav.querySelectorAll('a');
var sec_nav = document.querySelector('.sec-nav');
var ul = sec_nav.querySelector('#sec');
for (var i = 0; i < as.length; i++) {
main_nav.children[i].setAttribute('index', i);
as[i].addEventListener('mouseenter', function(e) {
switch (this.parentNode.getAttribute('index')) {
case '0':
ul.innerHTML = '';
Creatli(Mis);
break;
case '1':
ul.innerHTML = '';
Creatli(Hmis);
break;
case '2':
ul.innerHTML = '';
Creatli(Tvs);
break;
case '3':
ul.innerHTML = '';
Creatli(cumps);
break;
case '4':
ul.innerHTML = '';
Creatli(homes);
break;
case '5':
ul.innerHTML = '';
Creatli(routers);
break;
case '6':
ul.innerHTML = '';
Creatli(intes);
break;
default:
ul.innerHTML = '';
}
if (ul.children.length > 0) {
sec_nav.classList.add('sec_hover');
sec_nav.style.transition = 'all .3s';
}
});
as[i].addEventListener('mouseleave', function(e) {
sec_nav.classList.remove('sec_hover');
sec_nav.style.transition = 'all .3s';
});
}
function Creatli(obj) {
for (var i = 0; i < obj.length; i++) {
var li = document.createElement('li');
var img = document.createElement('img');
var p1 = document.createElement('p');
var p2 = document.createElement('p');
img.src = obj[i].img;
p1.innerHTML = obj[i].p1;
p2.innerHTML = obj[i].p2;
li.appendChild(img);
li.appendChild(p1);
li.appendChild(p2);
ul.appendChild(li);
}
}
创建数组对象来保存和调用数据。
var Mis = [{
img: 'images/Mi_images/Mi_10pro.jpg',
p1: '小米10 Pro',
p2: '4699元起'
},
{
img: 'images/Mi_images/Mi_10pro.jpg',
p1: '小米10 Pro',
p2: '4699元起'
},
{
img: 'images/Mi_images/Mi_10pro.jpg',
p1: '小米10 Pro',
p2: '4699元起'
},
{
img: 'images/Mi_images/Mi_10pro.jpg',
p1: '小米10 Pro',
p2: '4699元起'
},
{
img: 'images/Mi_images/Mi_10pro.jpg',
p1: '小米10 Pro',
p2: '4699元起'
},
{
img: 'images/Mi_images/Mi_10pro.jpg',
p1: '小米10 Pro',
p2: '4699元起'
},
];
var homes = [{
img: 'images/home appliances/小米净水器.jpg',
p1: '小米净水器',
p2: '2199元起'
},
{
img: 'images/home appliances/小米净水器.jpg',
p1: '小米净水器',
p2: '2199元起'
},
{
img: 'images/home appliances/小米净水器.jpg',
p1: '小米净水器',
p2: '2199元起'
},
{
img: 'images/home appliances/小米净水器.jpg',
p1: '小米净水器',
p2: '2199元起'
},
{
img: 'images/home appliances/小米净水器.jpg',
p1: '小米净水器',
p2: '2199元起'
},
];
var Hmis = [{
img: 'images/RedMi_红米/RedMi_K30.webp',
p1: 'RedMi_K30',
p2: '1799元起'
},
{
img: 'images/RedMi_红米/RedMi_K30.webp',
p1: 'RedMi_K30',
p2: '1799元起'
},
{
img: 'images/RedMi_红米/RedMi_K30.webp',
p1: 'RedMi_K30',
p2: '1799元起'
},
{
img: 'images/RedMi_红米/RedMi_K30.webp',
p1: 'RedMi_K30',
p2: '1799元起'
},
{
img: 'images/RedMi_红米/RedMi_K30.webp',
p1: 'RedMi_K30',
p2: '1799元起'
},
{
img: 'images/RedMi_红米/RedMi_K30.webp',
p1: 'RedMi_K30',
p2: '1799元起'
},
];
var Tvs = [{
img: 'images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp',
p1: 'Redmi 红米电视',
p2: '2999元起'
},
{
img: 'images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp',
p1: 'Redmi 红米电视',
p2: '2999元起'
},
{
img: 'images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp',
p1: 'Redmi 红米电视',
p2: '2999元起'
},
{
img: 'images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp',
p1: 'Redmi 红米电视',
p2: '2999元起'
},
{
img: 'images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp',
p1: 'Redmi 红米电视',
p2: '2999元起'
},
{
img: 'images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp',
p1: 'Redmi 红米电视',
p2: '2999元起'
},
];
var intes = [{
img: 'images/intelligent hardware/Redmi小爱触屏音箱 8.webp',
p1: 'Redmi小爱触屏音箱 8',
p2: '1999元起'
},
{
img: 'images/intelligent hardware/Redmi小爱触屏音箱 8.webp',
p1: 'Redmi小爱触屏音箱 8',
p2: '1999元起'
},
];
var routers = [{
img: 'images/Router/Redmi路由器AC2100.webp',
p1: 'Redmi路由器AC2100',
p2: '190元'
},
{
img: 'images/Router/Redmi路由器AC2100.webp',
p1: 'Redmi路由器AC2100',
p2: '190元'
},
{
img: 'images/Router/Redmi路由器AC2100.webp',
p1: 'Redmi路由器AC2100',
p2: '190元'
},
{
img: 'images/Router/Redmi路由器AC2100.webp',
p1: 'Redmi路由器AC2100',
p2: '190元'
},
{
img: 'images/Router/Redmi路由器AC2100.webp',
p1: 'Redmi路由器AC2100',
p2: '190元'
},
{
img: 'images/Router/Redmi路由器AC2100.webp',
p1: 'Redmi路由器AC2100',
p2: '190元'
},
];
var cumps = [{
img: 'images/computer/RedmiBook 13.webp',
p1: 'RedmiBook 13',
p2: '4399元起'
},
{
img: 'images/computer/RedmiBook 13.webp',
p1: 'RedmiBook 13',
p2: '4399元起'
},
{
img: 'images/computer/RedmiBook 13.webp',
p1: 'RedmiBook 13',
p2: '4399元起'
},
{
img: 'images/computer/RedmiBook 13.webp',
p1: 'RedmiBook 13',
p2: '4399元起'
},
{
img: 'images/computer/RedmiBook 13.webp',
p1: 'RedmiBook 13',
p2: '4399元起'
},
{
img: 'images/computer/RedmiBook 13.webp',
p1: 'RedmiBook 13',
p2: '4399元起'
},
];
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue.js实现二级菜单效果
本文实例为大家分享了vue.js实现二级菜单效果的具体代码,供大家参考,具体内容如下 主要是对二级菜单和当前点击的处理: 点击导航时,如果有二级菜单,就切换二级菜单显示状态(显示或者关闭),如果没有二级菜单,就变色,表示页面处于当前位置,并且导航中最多只能有一个菜单变色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g
-
javascript鼠标滑过显示二级菜单特效
本文实例为大家分享了javascript鼠标滑过显示二级菜单效果,供大家参考,具体内容如下 1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById
-
vue.js 左侧二级菜单显示与隐藏切换的实例代码
废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type
-
简单实现js点击展开二级菜单功能
虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单.这里有两个点,实现展现和隐藏用display="block"和display="no
-
js实现二级菜单点击显示当前内容效果
最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级菜单是固定的,而且html布局并不是父子级关系,具体请看效果图如下 html结构入下 <div> <ul> <li>您好!日期</li> <li class="li_list checked grounder">滚球</li> <li class="li_list">今日赛事</li> <li class=&q
-
js实现向右横向滑出的二级菜单效果
本文实例讲述了js实现向右横向滑出的二级菜单效果.分享给大家供大家参考.具体如下: 这是一个网页上的横向滑出二级菜单,菜单是竖向排列的,但二级子菜单项是向右横向滑出的,引入了一个JS封装库文件,这个菜单兼容性方面也做的挺好,只是觉得,菜单中有些代码不便于修改,有兴趣的自己看看吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-right-show-out-2l-menu-codes/ 具体代码如下: <!DOCTYPE HTML
-
JS实现超精简响应鼠标显示二级菜单代码
本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码.分享给大家供大家参考.具体如下: 这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式.喜欢的朋友拿去修改一下,再美化一番,就够用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/ 具体代码如下: <html> <head> <title>二级菜单,响应鼠标</
-
JS二级菜单不同实现方法分析【4种方法】
本文实例讲述了JS二级菜单不同实现方法.分享给大家供大家参考,具体如下: 之前面试的时候被问到过一次,后来,在笔试的时候又遇到了,为了长点记性,就决定把这个好好写写. 第一种: 第一种是采用css来控制的:主要采用float,和position,display,hover来完成的.具体看以参看后面的源代码. 第二种: 主要采用hover,和display来实现的. 第三种: 采用的是js来控制的,mouseover,mouseout来控制显示的.当然也利用了css. 第四种: 这种也是纯css的
-
鼠标经过显示二级菜单js特效
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
通用的二级菜单代码(css+javascript)
]但在<CSS二级菜单>中,如果一级菜单中的超链接是#,那么只要单击该一级菜单,那么与这个一级菜单对应的二级菜单就会一直显示在网页中,不能隐藏,是一个小小的bug.后来仔细的想了一想,其实,无论是什么样的二级菜单,原理都是一样的: 1.每一个一级菜单都会对应一个层,而这个层里放着的就是该一级菜单对应的二级菜单. 2.默认情况下,二级菜单这个层是隐藏的,在CSS中将层的display属性值设为none,可以达到这一目的. 3.当鼠标放在一级菜单上时,将对应的二级菜单层显示出来,在CSS中将层的d