Question

好的，所以我正在尝试使我的3D菜单响应适合引导导航菜单。现在它没有响应，所以当我在我的移动设备上看到它时，它覆盖了引导程序导航栏。我想要的是某种类型的CSS或html，使菜单上的每个按钮响应缩小到导航栏大小一旦在较小的设备上查看。

Heres My CSS

    .block-menu {
        display: block;
        background: transparent; 
    }

    .block-menu li {
        display: inline-block;
    }

    .block-menu li a {
        color: #666;
        display: block;
        text-decoration: none;
        font-family: 'Fjalla One', sans-serif !important;
        font-smoothing: antialiased;
        text-transform: uppercase;
        overflow: visible;
        line-height: 18px;
        font-size: 20px;
        padding: 15px 10px;
    }

    /* animation domination */
    .three-d {
        perspective: 200px;
        transition: all .07s linear;
        position: relative;
        cursor: pointer;
    }
        /* complete the animation! */
        .three-d:hover .three-d-box, 
        .three-d:focus .three-d-box {
            transform: translateZ(-25px) rotateX(90deg);
        }

    .three-d-box {
        transition: all .3s ease-out;
        transform: translatez(-25px);
        transform-style: preserve-3d;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    /* 
        put the "front" and "back" elements into place with CSS transforms, 
        specifically translation and translatez
    */
    .front {
        transform: rotatex(0deg) translatez(25px);
    }

    .back {
        transform: rotatex(-90deg) translatez(25px);
        color: #ffe7c4;
    }

    .front, .back {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: DarkGrey;
        padding: 17px 10px;
        color: white;
        pointer-events: none;
        box-sizing: border-box;
    }

Heres HTML

<ul class="block-menu" id="navmenu">
    <li><a href="/" class="three-d menu_nav" >
        Home
        <span aria-hidden="true" class="three-d-box img-responsive">
            <span class="front">Home</span>
            <span class="back">Home</span>
        </span>
    </a></li>
    <li><a href="pages/home.html" class="three-d menu_nav img-responsive">
        Artist
        <span aria-hidden="true" class="three-d-box">
            <span class="front">Roster</span>
            <span class="back">Roster</span>
        </span>
    </a></li>

    <li><a href="pages/order.html" class="three-d menu_nav">
        Labels
        <span aria-hidden="true" class="three-d-box">
            <span class="front">Labels</span>
            <span class="back">Labels</span>
        </span>
    </a></li>
    <li><a href="/" class="three-d menu_nav">
        Music
        <span aria-hidden="true" class="three-d-box">
            <span class="front">Music</span>
            <span class="back">Music</span>
        </span>
    </a></li>
    <li><a href="/" class="three-d menu_nav">
        Videos
        <span aria-hidden="true" class="three-d-box">
            <span class="front">Videos</span>
            <span class="back">Videos</span>
        </span>
    </a></li>
    <li><a href="/" class="three-d menu_nav">
        Store
        <span aria-hidden="true" class="three-d-box">
            <span class="front">Store</span>
            <span class="back">Store</span>
        </span>
    </a></li>
    <li><a href="/" class="three-d menu_nav">
        Services
        <span aria-hidden="true" class="three-d-box">
            <span class="front">Services</span>
            <span class="back">Services</span>
        </span>
    </a></li>
     <li><a href="/" class="three-d menu_nav">
        Artist Resources
        <span aria-hidden="true" class="three-d-box">
            <span class="front">Artist Resources</span>
            <span class="back">Artist Resources</span>
        </span>
    </a></li>
    <li><a href="/" class="three-d menu_nav">
        Contact Us
        <span aria-hidden="true" class="three-d-box">
            <span class="front">Contact Us</span>
            <span class="back">Contact Us</span>
        </span>
    </a></li>

</ul>

Answer 1

请检查这个小提琴。我已经添加了bootstrap所有外部库并改变了一点结构。 [https://jsfiddle.net/ap3x6swe/3/][1]

如何使我的菜单响应Bootstrap导航

1 个答案: