扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js仿小米二级菜单显示效果
  • 563

0
分享到

js仿小米二级菜单显示效果

2024-04-02 19:04:59 563人浏览 独家记忆
摘要

本文实例为大家分享了js仿小米二级菜单显示效果的具体代码，供大家参考，具体内容如下 提示：以下是本篇文章正文内容，下面案例可供参考 一、效果展示 二、代码 1.页面样式 代码如下（

本文实例为大家分享了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;
    
    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元起'
    },
];

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: js仿小米二级菜单显示效果

本文链接: https://lsjlt.com/news/143888.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • js仿小米二级菜单显示效果
    本文实例为大家分享了js仿小米二级菜单显示效果的具体代码，供大家参考，具体内容如下 提示：以下是本篇文章正文内容，下面案例可供参考 一、效果展示 二、代码 1.页面样式 代码如下（...
    99+
    2024-04-02
  • 用纯JS实现二级菜单效果
    本文实例为大家分享了JS实现二级菜单效果的具体代码，供大家参考，具体内容如下 js点击出现二级菜单，点击二级菜单主菜单换成二级菜单 点击出现二级菜单 <style> ...
    99+
    2024-04-02
  • 怎么用CSS实现鼠标滑过显示子菜单的二级菜单效果
    本篇内容介绍了“怎么用CSS实现鼠标滑过显示子菜单的二级菜单效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所...
    99+
    2024-04-02
  • JS如何实现五级联动菜单效果
    这篇文章主要为大家展示了“JS如何实现五级联动菜单效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现五级联动菜单效果”这篇文章吧。js实现多级联动的...
    99+
    2024-04-02
  • bootstrap如何实现二级下拉菜单效果
    这篇文章将为大家详细讲解有关bootstrap如何实现二级下拉菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE htm...
    99+
    2024-04-02
  • CSS中怎么实现二级弹出菜单效果
    这篇文章将为大家详细讲解有关CSS中怎么实现二级弹出菜单效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。具体代码如下：<!DOCTYPE ...
    99+
    2024-04-02
  • Jquery实现带动画效果的经典二级导航菜单
    以下是一个使用jQuery实现带动画效果的经典二级导航菜单的示例代码：HTML代码：```htmlAnimated SubmenuH...
    99+
    2023-08-14
    JQuery
  • Jquery怎么实现带动画效果的二级导航菜单
    要实现带动画效果的二级导航菜单，可以使用jQuery的`slideDown()`和`slideUp()`方法来实现菜单的展开和收起动...
    99+
    2023-08-15
    Jquery
  • DIV+CSS实现仿DreamWeaver界面图形菜单效果的示例分析
    这篇文章给大家分享的是有关DIV+CSS实现仿DreamWeaver界面图形菜单效果的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。这是一款DIV+CSS实现的图形菜单仿DreamWeaver效果，做了兼...
    99+
    2023-06-09
  • JS如何实现模仿QQ头像资料卡显示与隐藏效果
    这篇文章主要介绍JS如何实现模仿QQ头像资料卡显示与隐藏效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果。分享给大家供大家参...
    99+
    2024-04-02
  • Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】
    本文实例讲述了Android编程实现仿美团或淘宝的多级分类菜单效果。分享给大家供大家参考，具体如下： 这里要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果。当分类数量非常多...
    99+
    2022-06-06
    菜单 淘宝 示例 分类 demo Android
  • js如何模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前的效果
    这篇文章主要介绍js如何模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前的效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！效果图：代码如下：<!DOCTYPE&nbs...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作