js仿小米二級菜單顯示效果
更新時間：2022年03月25日 11:04:25 作者：小梅正在努力中ing
這篇文章主要為大家詳細介紹了js仿小米二級菜單顯示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js仿小米二級菜單顯示效果的具體代碼，供大家參考，具體內(nèi)容如下
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、效果展示
二、代碼
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的架構搭建完善。
第二步： 我們構造一個函數(shù)來根據(jù)傳入的對象進行節(jié)點的生成。
第三步： 給一級菜單設置自定義屬性，來判斷那個對象觸發(fā)了事件。
第四步： 根據(jù)自定義屬性判斷后，調(diào)用構造函數(shù)生成節(jié)點（在生成新節(jié)點前要先刪除舊節(jié)點，保證只顯示當前對象內(nèi)容）。
// 二級菜單的顯示
? ? 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)建數(shù)組對象來保存和調(diào)用數(shù)據(jù)。
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元起'
? ? },
];以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript事件監(jiān)聽器addEventListener()方法和一些基本事件詳解
這篇文章主要介紹了JavaScript事件監(jiān)聽器addEventListener()方法和一些基本事件,這篇文章主要介紹了JavaScript事件監(jiān)聽器addEventListener()方法和一些基本事件的相關資料,需要的朋友可以參考下2024-10-10
實例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
關于javascript的運行機制大家都應該有所了解了吧，其實javascript是一個單線程的機制，但是因為隊列的關系它的表現(xiàn)會讓我們感覺是一個多線程的錯覺。下面這篇文章通過實例主要給大家介紹了關于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關資料，需要的朋友可以參考下。2017-07-07
我們需要引入幾個相關的概念：執(zhí)行環(huán)境棧、全局對象、執(zhí)行環(huán)境、變量對象、活動對象、作用域和作用域鏈等，這些概念正是JS引擎工作的核心組件。這篇文章的目的不是孤立的為你講解每一個概念需要的朋友可以參考下2016-11-11
面試中常考的JavaScript中簡單類型數(shù)據(jù)轉換盤點
我們都知道,JS是弱類型語言,變量的類型是可以改變的,本文我們只討論es6之前的簡單數(shù)據(jù)類型的顯示轉換String,Number,Boolean這3種,有需要的可以參考下2024-12-12
這篇文章主要為大家全面解析Bootstrap中tab（選項卡）的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了詳解如何在Javascript和Sass之間共享變量，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
本文主要對javascript中的（Event）事件進行介紹，文章篇尾舉了幾個案例：方塊隨著鼠標移動；輸入框文字提示；仿select控件；留言本；自定義右鍵菜單；鍵盤控制div運動。需要的朋友可以看下2016-12-12
這篇文章主要為大家詳細介紹了原生js實現(xiàn)商品篩選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細介紹了js中利用cookie實現(xiàn)記住密碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章給大家結束了通過js實現(xiàn)抖動效果，非常不錯，具有參考借鑒價值，感興趣的朋友參考下吧2017-06-06