欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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的架構(gòu)搭建完善。
第二步： 我們構(gòu)造一個函數(shù)來根據(jù)傳入的對象進行節(jié)點的生成。
第三步： 給一級菜單設置自定義屬性，來判斷那個對象觸發(fā)了事件。
第四步： 根據(jù)自定義屬性判斷后，調(diào)用構(gòu)造函數(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論