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:;">社区</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样式

采用了动态生成元素节点。
第一步: 我们把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元起'
    },
];

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 通用的二级菜单代码(css+javascript)

    ]但在<CSS二级菜单>中,如果一级菜单中的超链接是#,那么只要单击该一级菜单,那么与这个一级菜单对应的二级菜单就会一直显示在网页中,不能隐藏,是一个小小的bug.后来仔细的想了一想,其实,无论是什么样的二级菜单,原理都是一样的: 1.每一个一级菜单都会对应一个层,而这个层里放着的就是该一级菜单对应的二级菜单. 2.默认情况下,二级菜单这个层是隐藏的,在CSS中将层的display属性值设为none,可以达到这一目的. 3.当鼠标放在一级菜单上时,将对应的二级菜单层显示出来,在CSS中将层的d

  • 简单实现js点击展开二级菜单功能

    虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单.这里有两个点,实现展现和隐藏用display="block"和display="no

  • 鼠标经过显示二级菜单js特效

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JS二级菜单不同实现方法分析【4种方法】

    本文实例讲述了JS二级菜单不同实现方法.分享给大家供大家参考,具体如下: 之前面试的时候被问到过一次,后来,在笔试的时候又遇到了,为了长点记性,就决定把这个好好写写. 第一种: 第一种是采用css来控制的:主要采用float,和position,display,hover来完成的.具体看以参看后面的源代码. 第二种: 主要采用hover,和display来实现的. 第三种: 采用的是js来控制的,mouseover,mouseout来控制显示的.当然也利用了css. 第四种: 这种也是纯css的

  • js实现二级菜单点击显示当前内容效果

    最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级菜单是固定的,而且html布局并不是父子级关系,具体请看效果图如下 html结构入下 <div> <ul> <li>您好!日期</li> <li class="li_list checked grounder">滚球</li> <li class="li_list">今日赛事</li> <li class=&q

  • javascript鼠标滑过显示二级菜单特效

    本文实例为大家分享了javascript鼠标滑过显示二级菜单效果,供大家参考,具体内容如下 1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById

  • vue.js实现二级菜单效果

    本文实例为大家分享了vue.js实现二级菜单效果的具体代码,供大家参考,具体内容如下 主要是对二级菜单和当前点击的处理: 点击导航时,如果有二级菜单,就切换二级菜单显示状态(显示或者关闭),如果没有二级菜单,就变色,表示页面处于当前位置,并且导航中最多只能有一个菜单变色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

  • JS实现超精简响应鼠标显示二级菜单代码

    本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码.分享给大家供大家参考.具体如下: 这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式.喜欢的朋友拿去修改一下,再美化一番,就够用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/ 具体代码如下: <html> <head> <title>二级菜单,响应鼠标</

  • js实现向右横向滑出的二级菜单效果

    本文实例讲述了js实现向右横向滑出的二级菜单效果.分享给大家供大家参考.具体如下: 这是一个网页上的横向滑出二级菜单,菜单是竖向排列的,但二级子菜单项是向右横向滑出的,引入了一个JS封装库文件,这个菜单兼容性方面也做的挺好,只是觉得,菜单中有些代码不便于修改,有兴趣的自己看看吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-right-show-out-2l-menu-codes/ 具体代码如下: <!DOCTYPE HTML

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

随机推荐