下拉导航分别通过纯 CSS 和纯 js 实现教程
Tips: 纯 css 实现的兼容性比较好,纯 js 的代码兼容性不太友好,需要引用的朋友要自行优化。
- <!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>
- <p 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>
- </p>
- </body>
- </html>
- .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;
- }
- <!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>
- <p 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>
- </p>
- <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>
- .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);
- }
- }
来源: https://www.2cto.com/kf/201712/705117.html