Question

我想将导航（内部标题）附加到div .menu_bar的底部，这样当导航切换时，它将从正下方向下滑动。导航不在div中，div不在导航内部，它们在html中是分开的。目前我不能让导航从div向下滑动，当我这样做时，它只适用于该屏幕尺寸，并在我改变屏幕宽度时再次中断。

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li class="submenu" >
                <a href="#">Nielsen Products<span class="icon-arrow-down2"></span><span class="caret"></span></a>
                <ul class="children">
                    <li><a href="#">Exterior Cleaning<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Interior Cleaning<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Odour Control & Air Fresheners<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Exterior Finishes<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Dressings<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Glass Cleaning<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Workshop Maintenance<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Janitorial<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">TDS & SDS INFO<span class="icon-dot-single"></span></a></li>
                </ul>
            </li>
            <li><a href="#">Nielsen Catalogue</a></li>
            <li class="submenu1">
                <a href="#">Equipment/Tools/Consumables<span class="icon-arrow-down2"></span><span class="caret"></span></a>
                <ul class="children1">
                    <li><a href="#">Valeting, Brushes and Equipment<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Tools & Equipment<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Workshop Consumables<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">AdBlue<span class="icon-dot-single"></span></a></li>
                </ul>
            </li>   
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Photo Gallery</a></li>
        </ul>
    </nav>

</header>

<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-menu"></span>Menu</a>
</div>

顺便说一句，底部的div不在身体标签之外的任何东西里面（我不知道它是否表现得更清晰）

    .bt-menu {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.menu_bar {
    display: block;
    width: 100%;
    height: 10%;
    padding-top: 35px;
    position: relative;
    background: #FF0000;
    z-index: 999;
    font-size: 15px;
    margin: 0;
}
.menu_bar .bt-menu {
    display: block;
    color: #FFF;
    padding-left: 25px;
    padding-right: 25px;
    overflow: hidden;
    font-size: 25px;
    font-weight: bold;
    text-decoration: none;
}
.menu_bar span {
    float: right;
    font-size: 20px;
}
header nav {
    width: 80%;
    height: 100%;
    top: 0;
    position: fixed;
    margin: 0;
    overflow-y: scroll;
    z-index:9999;
}

Answer 1

根据小提琴做一些改变

header nav {
    width: 80%;
    height: 100%;
    top: 0;
    margin: 0;
    overflow-y: hidden;
    z-index:9999;
}

检查这个小提琴 - ＆gt; http://jsfiddle.net/1hpo3w46/3/

如何从div下方进行<nav>切换？

1 个答案: