js仿小米二級(jí)菜單顯示效果
本文實(shí)例為大家分享了js仿小米二級(jí)菜單顯示效果的具體代碼,供大家參考,具體內(nèi)容如下
提示:以下是本篇文章正文內(nèi)容,下面案例可供參考
一、效果展示
二、代碼
1.頁(yè)面樣式
代碼如下(示例):
<!-- 搜索欄 主導(dǎo)航 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:;">小米手機(jī)</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:;">服務(wù)</a></li> ? ? ? ? ? ? ? ? <li><a href="javascript:;">社區(qū)</a></li> ? ? ? ? ? ? </ul> ? ? ? ? ? ? <div class="ss"> ? ? ? ? ? ? ? ? <input type="text" placeholder="智能硬件"><button></button> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? </header> ? ? <!-- 二級(jí)菜單 --> ? ? <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樣式
采用了動(dòng)態(tài)生成元素節(jié)點(diǎn)。
第一步: 我們把html 和 css的架構(gòu)搭建完善。
第二步: 我們構(gòu)造一個(gè)函數(shù)來(lái)根據(jù)傳入的對(duì)象進(jìn)行節(jié)點(diǎn)的生成。
第三步: 給一級(jí)菜單設(shè)置自定義屬性,來(lái)判斷那個(gè)對(duì)象觸發(fā)了事件。
第四步: 根據(jù)自定義屬性判斷后,調(diào)用構(gòu)造函數(shù)生成節(jié)點(diǎn)(在生成新節(jié)點(diǎn)前要先刪除舊節(jié)點(diǎn),保證只顯示當(dāng)前對(duì)象內(nèi)容)。
// 二級(jí)菜單的顯示 ? ? 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ù)組對(duì)象來(lái)保存和調(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小愛(ài)觸屏音箱 8.webp', ? ? ? ? p1: 'Redmi小愛(ài)觸屏音箱 8', ? ? ? ? p2: '1999元起' ? ? }, ? ? { ? ? ? ? img: 'images/intelligent hardware/Redmi小愛(ài)觸屏音箱 8.webp', ? ? ? ? p1: 'Redmi小愛(ài)觸屏音箱 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元起' ? ? }, ];
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 通用的二級(jí)菜單代碼(css+javascript)
- 簡(jiǎn)單實(shí)現(xiàn)js點(diǎn)擊展開(kāi)二級(jí)菜單功能
- vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼
- 鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
- JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】
- javascript鼠標(biāo)滑過(guò)顯示二級(jí)菜單特效
- js實(shí)現(xiàn)向右橫向滑出的二級(jí)菜單效果
- vue.js實(shí)現(xiàn)二級(jí)菜單效果
- JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
- js實(shí)現(xiàn)二級(jí)菜單點(diǎn)擊顯示當(dāng)前內(nèi)容效果
相關(guān)文章
JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)
這篇文章主要介紹了JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12小程序測(cè)試后臺(tái)服務(wù)的方法(ngrok)
這篇文章主要介紹了小程序測(cè)試后臺(tái)服務(wù)的方法(ngrok),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03Bootstrap Tree View簡(jiǎn)單而優(yōu)雅的樹(shù)結(jié)構(gòu)組件實(shí)例解析
本文通過(guò)實(shí)例代碼給大家介紹了Bootstrap Tree View簡(jiǎn)單而優(yōu)雅的樹(shù)結(jié)構(gòu)組件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06JavaScript實(shí)現(xiàn)Tab欄切換特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Tab欄切換特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法(基于localStorage與userData)
這篇文章主要介紹了JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法,基于localStorage與userData實(shí)現(xiàn)本地存儲(chǔ)的功能,需要的朋友可以參考下2017-02-02