菜单推入推出效果-html代码-BFW代码库

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* General styles for all menus */
        .cbp-spmenu {
            background: #47a3da;
            position: fixed;
        }

        .cbp-spmenu h3 {
            color: #afdefa;
            font-size: 1.9em;
            padding: 20px;
            margin: 0;
            font-weight: 300;
            background: #0d77b6;
        }

        .cbp-spmenu a {
            display: block;
            color: #fff;
            font-size: 1.1em;
            font-weight: 300;
        }

        .cbp-spmenu a:hover {
            background: #258ecd;
        }

        .cbp-spmenu a:active {
            background: #afdefa;
            color: #47a3da;
        }

        /* Orientation-dependent styles for the content of the menu */

        .cbp-spmenu-vertical {
            width: 240px;
            height: 100%;
            top: 0;
            z-index: 1000;
        }

        .cbp-spmenu-vertical a {
            border-bottom: 1px solid #258ecd;
            padding: 1em;
        }

        .cbp-spmenu-horizontal {
            width: 100%;
            height: 150px;
            left: 0;
            z-index: 1000;
            overflow: hidden;
        }

        .cbp-spmenu-horizontal h3 {
            height: 100%;
            width: 20%;
            float: left;
        }

        .cbp-spmenu-horizontal a {
            float: left;
            width: 20%;
            padding: 0.8em;
            border-left: 1px solid #258ecd;
        }

        /* Vertical menu that slides from the left or right */

        .cbp-spmenu-left {
            left: -240px;
        }

        .cbp-spmenu-right {
            right: -240px;
        }

        .cbp-spmenu-left.cbp-spmenu-open {
            left: 0px;
        }

        .cbp-spmenu-right.cbp-spmenu-open {
            right: 0px;
        }

        /* Horizontal menu that slides from the top or bottom */

        .cbp-spmenu-top {
            top: -150px;
        }

        .cbp-spmenu-bottom {
            bottom: -150px;
        }

        .cbp-spmenu-top.cbp-spmenu-open {
            top: 0px;
        }

        .cbp-spmenu-bottom.cbp-spmenu-open {
            bottom: 0px;
        }

        /* Push classes applied to the body */

        .cbp-spmenu-push {
            overflow-x: hidden;
            position: relative;
            left: 0;
        }

        .cbp-spmenu-push-toright {
            left: 240px;
        }

        .cbp-spmenu-push-toleft {
            left: -240px;
        }

        /* Transitions */

        .cbp-spmenu,
        .cbp-spmenu-push {
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

        /* Example media queries */

@media screen and (max-width: 55.1875em) {

            .cbp-spmenu-horizontal {
                font-size: 75%;
                height: 110px;
            }

            .cbp-spmenu-top {
                top: -110px;
            }

            .cbp-spmenu-bottom {
                bottom: -110px;
            }

        }

@media screen and (max-height: 26.375em) {

            .cbp-spmenu-vertical {
                font-size: 90%;
                width: 190px;
            }

            .cbp-spmenu-left,
            .cbp-spmenu-push-toleft {
                left: -190px;
            }

            .cbp-spmenu-right {
                right: -190px;
            }

            .cbp-spmenu-push-toright {
                left: 190px;
            }
        }
    </style>

</head>
<body class="cbp-spmenu-push">
    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <h3>菜单</h3>
        <a href="#" target="_blank">Celery seakale</a>
        <a href="#" target="_blank">Dulse daikon</a>
        <a href="#" target="_blank">Zucchini garlic</a>
        <a href="#" target="_blank">Catsear azuki bean</a>
        <a href="#" target="_blank">Dandelion bunya</a>
        <a href="#" target="_blank">Rutabaga</a>
    </nav>
    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
        <h3>Menu</h3>
        <a href="#" target="_blank">Celery seakale</a>
        <a href="#" target="_blank">Dulse daikon</a>
        <a href="#" target="_blank">Zucchini garlic</a>
        <a href="#" target="_blank">Catsear azuki bean</a>
        <a href="#" target="_blank">Dandelion bunya</a>
        <a href="#" target="_blank">Rutabaga</a>
    </nav>
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
        <h3>Menu</h3>
        <a href="#" target="_blank">Celery seakale</a>
        <a href="#" target="_blank">Dulse daikon</a>
        <a href="#" target="_blank">Zucchini garlic</a>
        <a href="#" target="_blank">Catsear azuki bean</a>
        <a href="#" target="_blank">Dandelion bunya</a>
        <a href="#" target="_blank">Rutabaga</a>
        <a href="#" target="_blank">Celery seakale</a>
        <a href="#" target="_blank">Dulse daikon</a>
        <a href="#" target="_blank">Zucchini garlic</a>
        <a href="#" target="_blank">Catsear azuki bean</a>
        <a href="#" target="_blank">Dandelion bunya</a>
        <a href="#" target="_blank">Rutabaga</a>
    </nav>
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
        <h3>Menu</h3>
        <a href="#" target="_blank">Celery seakale</a>
        <a href="#" target="_blank">Dulse daikon</a>
        <a href="#" target="_blank">Zucchini garlic</a>
        <a href="#" target="_blank">Catsear azuki bean</a>
        <a href="#" target="_blank">Dan.........完整代码请登录后点击上方下载按钮下载查看

菜单推入推出效果

网友评论0

js+css实现左侧伸缩导航菜单栏效果代码

gsap+svg实现菜单点击切换炫酷动画效果代码

gsap+svg实现炫酷古典菜单悬停动画效果代码

CustomEase+gsap实现炫酷弹出式导航菜单效果代码

div+css实现漂亮的垂直侧边栏可伸缩菜单效果代码

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码

matter实现自由落体重力下落的导航菜单效果代码