前端小白--导航（一）

来源：互联网发布：盘古数据招聘编辑：程序博客网时间：2024/05/30 23:56

本文主要介绍下拉导航分别通过纯css和纯js实现

案例图片展示

这里写图片描述

Tips:纯css实现的兼容性比较好，纯js的代码兼容性不太友好，需要引用的朋友要自行优化。

（一）纯css代码

1.html代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="style/reset.css">    <link rel="stylesheet" href="style/downlist.css"></head><body>    <div class="downList li-f">        <ul>            <li>                <span>主页</span>            </li>            <li>                <span>菜单一</span>                <ul>                    <li ><span>子菜单A</span></li>                    <li ><span>子菜单B</span></li>                    <li ><span>子菜单C</span></li>                    <li ><span>子菜单D</span></li>                    <li ><span>子菜单E</span></li>                    <li><span>子菜单F</span></li>                    <li><span>子菜单G</span></li>                    <li><span>子菜单H</span></li>                </ul>            </li>            <li>                <span>菜单二</span>                <ul>                    <li><span>子菜单A</span></li>                    <li><span>子菜单B</span></li>                    <li><span>子菜单C</span></li>                    <li><span>子菜单D</span></li>                    <li><span>子菜单E</span></li>                    <li><span>子菜单F</span></li>                    <li><span>子菜单G</span></li>                    <li><span>子菜单H</span></li>                </ul>            </li>            <li>                <span>菜单三</span>                <ul>                    <li><span>子菜单A</span></li>                    <li><span>子菜单B</span></li>                    <li><span>子菜单C</span></li>                    <li><span>子菜单D</span></li>                    <li><span>子菜单E</span></li>                    <li><span>子菜单F</span></li>                    <li><span>子菜单G</span></li>                    <li><span>子菜单H</span></li>                </ul>            </li>            <li>                <span>菜单四</span>            </li>            <li>                <span>返回教程</span>            </li>        </ul>    </div></body></html>

2.css代码

.downList{    width: 610px;    margin: 100px auto;}.downList li{    width: 100px;    height: 50px;    float: left;    line-height: 50px;    text-align: center;    background-color: #292929;    color: #999395;    transition: .8s;}.downList li:hover{    color: red;    border-left: 2px solid red;    background-color: black;}.downList li ul li{    border:1px solid black;    opacity: 0;    transform: rotateY(180deg);}.downList li ul li:hover{    color: white;    border-left: black;}.downList li:hover ul li{    opacity: 1;    transform: rotateY(0deg);}.downList li:hover ul li:nth-child(1){    transition-delay: 100ms;}.downList li:hover ul li:nth-child(2){    transition-delay: 200ms;}.downList li:hover ul li:nth-child(3){    transition-delay: 300ms;}.downList li:hover ul li:nth-child(4){    transition-delay: 400ms;}.downList li:hover ul li:nth-child(5){    transition-delay: 500ms;}.downList li:hover ul li:nth-child(6){    transition-delay: 600ms;}.downList li:hover ul li:nth-child(7){    transition-delay: 700ms;}.downList li:hover ul li:nth-child(8){    transition-delay: 800ms;}/*@keyframes myList {*/    /*0%{ opacity: 0; transform: rotateY(90deg) rotateX(20deg);}*/    /*100%{ opacity: 1;transform: rotateY(0deg) rotateX(0deg);}*//*}*/.downList li ul li:nth-child(8){    transition-delay: 100ms;}.downList li ul li:nth-child(7){    transition-delay: 200ms;}.downList li ul li:nth-child(6){    transition-delay: 300ms;}.downList li ul li:nth-child(5){    transition-delay: 400ms;}.downList li ul li:nth-child(4){    transition-delay: 500ms;}.downList li ul li:nth-child(3){    transition-delay: 600ms;}.downList li ul li:nth-child(2){    transition-delay: 700ms;}.downList li ul li:nth-child(1){    transition-delay: 800ms;}

（二）纯js实现

1.html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="style/reset.css">    <link rel="stylesheet" href="style/downlist1.css">    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body><div class="downList" id="downList">    <ul>        <li>            <span>主页</span>        </li>        <li>            <span>菜单一</span>            <ul>                <li><span>子菜单A</span></li>                <li><span>子菜单B</span></li>                <li><span>子菜单C</span></li>                <li><span>子菜单D</span></li>                <li><span>子菜单E</span></li>                <li><span>子菜单F</span></li>                <li><span>子菜单G</span></li>                <li><span>子菜单H</span></li>            </ul>        </li>        <li>            <span>菜单二</span>            <ul>                <li><span>子菜单A</span></li>                <li><span>子菜单B</span></li>                <li><span>子菜单C</span></li>                <li><span>子菜单D</span></li>                <li><span>子菜单E</span></li>                <li><span>子菜单F</span></li>                <li><span>子菜单G</span></li>                <li><span>子菜单H</span></li>            </ul>        </li>        <li>            <span>菜单三</span>            <ul>                <li><span>子菜单A</span></li>                <li><span>子菜单B</span></li>                <li><span>子菜单C</span></li>                <li><span>子菜单D</span></li>                <li><span>子菜单E</span></li>                <li><span>子菜单F</span></li>                <li><span>子菜单G</span></li>                <li><span>子菜单H</span></li>            </ul>        </li>        <li>            <span>菜单四</span>        </li>        <li>            <span>返回教程</span>        </li>    </ul></div><script>    var dBCn = document.getElementById('downList');    var lBtn = dBCn.getElementsByTagName('li');    for(var i=0;i<lBtn.length;i++){        lBtn[i].index=i;        lBtn[i].onmousemove=move;        lBtn[i].onmouseout=out;    }    function move(){        for(var i=0;i<lBtn.length;i++){            lBtn[i].className="";        }        this.className="li-hover";        var lis=this.getElementsByTagName('li');        for(i=0;i<lis.length;i++){            lis[i].className="move";            lis[i].style.animationDelay=i*100+"ms";        }    }    function out(){        for(var i=0;i<lBtn.length;i++){            lBtn[i].className="";        }        this.className="li-hover";        var lis=this.getElementsByTagName('li');        for(i=0;i<lis.length;i++){            lis[i].className="out";            lis[i].style.animationDelay=(lis.length-i)*100+"ms";        }    }</script></body></html>

css样式

    .downList{    width: 610px;    margin: 100px auto;}.downList li{    width: 100px;    height: 50px;    float: left;    line-height: 50px;    text-align: center;    background-color: #292929;    color: #999395;    transition: .8s;}.li-hover{    color: red!important;    border-left: 2px solid red;    background-color: black!important;}.downList li ul li{    border:1px solid black;    transition-duration: 3s;    opacity: 0;}.out{    animation: myListA .8s  both;}.move{    opacity: 1;    animation: myList .8s  both;}.move-hover{    color: white;    border-left: black;}@keyframes myListA {    0%{opacity: 1;transform: rotateY(0deg) ;}    100%{opacity: 0; transform: rotateY(90deg) ;}}@keyframes myList {    0%{opacity: 0; transform: rotateY(90deg);}    100%{opacity: 1; transform: rotateY(0deg);}}

阅读全文

1 0