自适应菜单导航栏

css3+js 具备自适应

css3, menu

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1598
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var contradiction = document.getElementById("contradiction");
    var som = document.getElementsByClassName("som");
    var on_off = true;
    contradiction.onclick = function() {

if (window.screen.width > 700) {
            if (on_off) {
                on_off = false;
                var i = 13;
                iCount = setInterval(function() {
                    if (!i) {
                        clearInterval(iCount);
                        som[3].style.visibility = "hidden";
                        i = 13
                        iCount = setInterval(function() {
                            if (!i) {
                                clearInterval(iCount);
                                som[2].style.visibility = "hidden";
                                i = 13
                                iCount = setInterval(function() {
                                    if (!i) {
                                        clearInterval(iCount);
                                        som[1].style.visibility = "hidden";
                                        i = 13
                                        iCount = setInterval(function() {
                                            if (!i) {
                                                clearInterval(iCount);
                                                som[0].style.visibility = "hidden";
                                            }
                                            som[0].style.left = som[0].offsetLeft - 10 + "px";
                                            i--;

}, 10);
                                    }
                                    som[1].style.left = som[1].offsetLeft - 10 + "px";
                                    i--;
                                }, 10);
                            }
                            som[2].style.left = som[2].offsetLeft - 10 + "px";
                            i--;
                        }, 10);
                    }
                    som[3].style.left = som[3].offsetLeft - 10 + "px";
                    i--;
                }, 10);

} else {
                on_off = true;
                var i = 12;
                som[0].style.visibility = "visible";
                iCount = setInterval(function() {
                    if (!i) {
                        clearInterval(iCount);
                        som[1].style.visibility = "visible";
                        i = 13
                        iCount = setInterval(function() {
                            if (!i) {
                                clearInterval(iCount);
                                som[2].style.visibility = "visible";
                                i = 13
                                iCount = setInterval(function() {
                                    if (!i) {
                                        clearInterval(iCount);
                                        som[3].style.visibility = "visible";
                                        i = 14
                                        iCount = setInterval(function() {
                                            if (!i) {
                                                clearInterval(iCount);

}
                                            som[3].style.left = som[3].offsetLeft + 10 + "px";
                                            i--;
                                        }, 10);
                                    }
                                    som[2].style.left = som[2].offsetLeft + 10 + "px";
                                    i--;
                                }, 10);
                            }
                            som[1].style.left = som[1].offsetLeft + 10 + "px";
                            i--;
                        }, 10);
                    }
                    som[0].style.left = som[0].offsetLeft + 10 + "px";
                    i--;
                }, 10);

}
        } else {
            if (on_off) {
                on_off = false;
                var i = 5
                iCount = setInterval(function() {
                    if (!i) {
                        clearInterval(iCount);
                        som[0].style.visibility = "hidden";
                        i = 5
                        iCount = setInterval(function() {
                            if (!i) {
                                clearInterval(iCount);
                                som[1].style.visibility = "hidden";
                                i = 5
                                iCount = setInterval(function() {
                                    if (!i) {
                                        clearInterval(iCount);
                                        som[2].style.visibility = "hidden";
                                        i = 5
                                        iCount = setInterval(function() {
                                            if (!i) {
                                                clearInterval(iCount);
                                                som[3].style.visibility = "hidden";
                                            }
                                            som[3].style.top = som[3].offsetTop - 10 + "px";
                                            i--;
                                        }, 10);
                                    }
                                    som[2].style.top = som[2].offsetTop - 10 + "px";
                                    i--;
                                }, 10);
                            }
                            som[1].style.top = som[1].offsetTop - 10 + "px";
                            i--;
                        }, 10);
                    }
                    som[0].style.top = som[0].offsetTop - 10 + "px";
                    i--;
                }, 10);

} else {
                on_off = true;
                var i = 4
                som[3].style.visibility = "visible";
                iCount = setInterval(function() {
                    if (!i) {
                        clearInterval(iCount);
                        i = 5
                        som[2].style.visibility = "visible";
                        iCount = setInterval(function() {
                            if (!i) {
                                clearInterval(iCount);
                                i = 5
                                som[1].style.visibility = "visible";
                                iCount = setInterval(function() {
                                    if (!i) {
                                        clearInterval(iCount);
                                        i = 6
                                        som[0].style.visibility = "visible";
                                        iCount = setInterval(function() {
                                            if (!i) {
                                                clearInterval(iCount);

}
                                            som[0].style.top = som[0].offsetTop + 10 + "px";
                                            i--;
                                        }, 10);
                                    }
                                    som[1].style.top = som[1].offsetTop + 10 + "px";
                                    i--;
                                }, 10);
                            }
                            som[2].style.top = som[2].offsetTop + 10 + "px";
                            i--;
                        }, 10);
                    }
                    som[3].style.top = som[3].offsetTop + 10 + "px";
                    i--;
                }, 10);

}
        }

};

编译

CSS

body {
    margin: 0;
}
@media(min-width:700px) {
    .cun {
        width: 100%;
        height: 60px;
        /* border: 1px solid red; */
        
        position: fixed;
    }
    .box1 {
        width: 34%;
        height: 100%;
        border: 1px solid rgb(73, 213, 248);
        position: absolute;
        left: 0.4%;
    }
    .box2 {
        width: 65%;
        height: 100%;
        border: 0px solid rgb(109, 239, 243);
        position: absolute;
        right: 0px;
        visibility: hidden;
    }
}
@media(max-width:700px) {
    .cun {
        width: 100%;
        height: 120px;
        position: absolute;
    }
    .box1 {
        width: 100%;
        height: 50%;
        border: 1px solid rgb(73, 213, 248);
        position: absolute;
        top: 0px;
    }
    .box2 {
        width: 100%;
        height: 50%;
        border: 0px solid rgb(109, 239, 243);
        position: absolute;
        margin-top: 80px;
        visibility: hidden;
    }
}
.box1 div {
    width: 94%;
    height: 80%;
    border: 1px solid rgb(109, 239, 243);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 3.8ex;
    color: rgba(30, 236, 243, 0.67);
}
.somllbox {
    width: 100%;
    height: 100%;
    /* background: rgb(109, 239, 243); */
    
    background: rgba(205, 247, 248, 0.863);
    display: flex;
    visibility: hidden;
}
.somll {
    width: 25%;
    height: 100%;
    background: rgb(233, 169, 86);
    position: relative;
    visibility: hidden;
}
.som {
    width: 100%;
    height: 63px;
    /* background: rgb(119, 232, 247); */
    
    background: rgba(205, 247, 248, 0.863);
    text-align: center;
    line-height: 350%;
    position: absolute;
    visibility: visible;
}
.som>div {
    width: 100%;
    height: 60px;
    /* background: rgb(126, 214, 236); */
    
    background: rgba(142, 158, 158, 0.863);
    text-align: center;
    line-height: 350%;
    position: relative;
    visibility: hidden;
}
.dao1 {
    transform: translateY(-100%);
    z-index: -1;
    margin-top: 7px;
}
.dao2 {
    transform: translateY(-200%);
    z-index: -2;
}
.dao3 {
    transform: translateY(-300%);
    z-index: -3;
}
.dao4 {
    transform: translateY(-400%);
    z-index: -4;
}
.som:hover {
    /* background: rgb(57, 130, 148); */
    
    background: rgba(166, 185, 185, 0.863);
}
.som:hover>.dao1 {
    animation: daoo1 1s 1;
    animation-fill-mode: forwards;
}
.som:hover>.dao2 {
    animation: daoo1 1.1s 1;
    animation-fill-mode: forwards;
}
.som:hover>.dao3 {
    animation: daoo1 1.2s 1;
    animation-fill-mode: forwards;
}
.som:hover>.dao4 {
    animation: daoo1 1.3s 1;
    animation-fill-mode: forwards;
}
@keyframes daoo1 {
    to {
        transform: translateY(0%);
        visibility: visible;
    }
}
.som>div:hover {
    background: rgba(17, 66, 78, 0.1);
    color: rgba(0, 0, 0, 0.01);
}
#jiange {
    height: 1px;
    width: 50px;
    background: red;
    visibility: hidden;
}
.sondao {
    width: 100%;
    height: 100%;
    /* background: rgb(17, 66, 78); */
    
    background: rgba(87, 90, 90, 0.863);
    position: absolute;
    top: 0;
    visibility: hidden;
    color: black;
}
.sondao1 {
    width: 100%;
    height: 100%;
    background: rgba(87, 90, 90, 0.863);
    position: absolute;
    top: 0;
    left: -100%;
    visibility: hidden;
}
.sondao2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    visibility: hidden;
    color: black;
}
.som>div:hover>.sondao1 {
    animation: sundao1 0.3s 1;
}
.som>div:hover>.sondao2 {
    animation: sundao2 0.3s 1;
}
.som>div:hover>.sondao {
    -webkit-animation: sundao 0.3s infinite;
    -webkit-animation-delay: 0.3s;
}
@keyframes sundao {
    to {
        visibility: visible;
    }
}
@keyframes sundao1 {
    to {
        visibility: visible;
        transform: translateX(100%);
    }
}
@keyframes sundao2 {
    to {
        visibility: visible;
        transform: translateX(-100%);
    }
}

HTML

css3+js 具备自适应

css3, menu

编辑器支持Emmet

快捷键

css3+js 具备自适应

css3, menu

5个简单实用的画布外边栏导航菜单

HTML5 竖向导航菜单栏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：