js仿小米二級菜單顯示效果
更新時間：2022年03月25日 11:04:25 作者：小梅正在努力中ing
這篇文章主要為大家詳細介紹了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:;">社區(qū)</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樣式
采用了動態(tài)生成元素節(jié)點。
第一步： 我們把html 和 css的架構搭建完善。
第二步： 我們構造一個函數來根據傳入的對象進行節(jié)點的生成。
第三步： 給一級菜單設置自定義屬性，來判斷那個對象觸發(fā)了事件。
第四步： 根據自定義屬性判斷后，調用構造函數生成節(jié)點（在生成新節(jié)點前要先刪除舊節(jié)點，保證只顯示當前對象內容）。
// 二級菜單的顯示
? ? 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);
? ? ? ? }
? ? }創(chuàng)建數組對象來保存和調用數據。
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元起'
? ? },
];以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS如何獲取指定范圍內的隨機數含小數問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
FireFox中textNode分片的問題...2007-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)詳情頁放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了小程序測試后臺服務的方法(ngrok)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了如何利用微信小程序制作一個打卡時鐘，分為工作和休息兩種狀態(tài)，用戶可以設置相應的時間，所有的時鐘記錄都會被保存下來，感興趣的可以了解一下2022-04-04
這篇文章主要介紹了微信小程序indexOf的替換方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
HTML DOM Viewer...2006-09-09
Bootstrap Tree View簡單而優(yōu)雅的樹結構組件實例解析
本文通過實例代碼給大家介紹了Bootstrap Tree View簡單而優(yōu)雅的樹結構組件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)Tab欄切換特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
JS實現(xiàn)本地存儲信息的方法(基于localStorage與userData)
這篇文章主要介紹了JS實現(xiàn)本地存儲信息的方法,基于localStorage與userData實現(xiàn)本地存儲的功能,需要的朋友可以參考下2017-02-02