Question

我想通过更改它的顶部位置来隐藏/显示菜单。

在我登录之前，菜单看起来像这样：

<div class="lc">
    <h1><a href="./"><img src="logo.png" /></a></h1>
    <a href="#" id="menuBtn"></a>
    <nav id="mainNav">
        <ul>
            <li><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
        </ul>
    </nav>
</div>

登录后，会添加一些项目：

<div class="lc">
    <h1><a href="./"><img src="logo.png" /></a></h1>
    <a href="#" id="menuBtn"></a>
    <nav id="mainNav">
        <ul>
            <li><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
        </ul>
        <div class="nav-admin">
            <strong>Administrator links:</strong><br />
            <a href="....php?users">...</a><br />
            <a href="....php?user_logs">...</a><br />
            <a href="....php?dealer_logs">...</a><br />
            <a href="....php?herd_logs">...</a><br />
            <a href="....php?php_logs">...</a>
        </div>
    </nav>
</div>

这个CSS属于它：

.lc, nav, h1 {
    background: #fdf6bf;
    background: #FDD;
}
.lc {
    position: fixed;
    z-index: 200;
    width: 14em;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: .5em;
    overflow: auto;
}
    h1 {
        width: 100%;
        font-size: 1em;
        margin-top: 0;
        margin-bottom: .5em;
    }
        h1 a {
            display: block;
            width: 100%;
            text-align: center;
        }
            h1 a img { max-width: 70%; }

    nav ul { list-style: none; }
    nav ul li { padding: .75em 0 .75em 4.25em; }
    nav ul li.is-active { background: #fdf9dc; }
    nav ul li.is-active a:after {
        content: "\232A";
        position: absolute;
        right: .25em;
        top: -.05em;
        font-size: 3em;
        height: 1em;
        line-height: 1em;
        vertical-align: middle;
        color: #c9c49d;
    }

    nav ul a,
    .btn-add {
        display: block;
        position: relative;
        height: 3em;
        padding-left: 1em;
        line-height: 3em;
        vertical-align: middle;
        font-family: 'Exo', sans-serif;
        text-decoration: none;
        color: #4f4e4c;
        font-size: 1em;
        font-weight: 600;
    }
        nav ul a:before,
        .btn-add:before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            margin-top: -1.75em;
            width: 3.5em;
            height: 3.5em;
            background: url(images/menu_home.png) center center no-repeat;
            background-size: cover;
        }

.nav-show { top: 0; }
.no-scroll { overflow: hidden; }

@media screen and (max-width: 550px) { 
    * { font-size: 1em; }
    nav {
        position: fixed;
        z-index: 180;
        top: -100%;
        left: 0;
        padding-top: 4.5em;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        background: #fffad5;
    }
    nav ul li.is-active { background: #fffcea; }

    .lc {
        position: fixed;
        width: 100%;
        height: 3.5em;
        overflow: hidden;
    }

要触发我使用的菜单

$(function() {
    $('#menuBtn').on('click', function(e) {
        $('body').toggleClass('no-scroll');
        $('#mainNav').toggleClass('nav-show');
        e.preventDefault();
    });
});

问题是菜单确实在登录前显示。但在那之后，我无法打开菜单。这个问题不在桌面PC上，而只在手机（Android）上出现。我尝试过各种手机和浏览器，但它们都有同样的问题。

有人有个主意吗？

Answer 1

您是否尝试在.nav-show { top: 0; }中添加@media？

由于此top:-100px在top: -100% ...之前声明 nav{停留。

如果找到this answer以确定它。
很好地解释了。

问题是，您的元素从@ top:0 .nav-show和NSDictionary NSDictionary获得Arrays。使用最后定义的 ;）

Answer 2

试试这个，偶数位置：固定工作，但你需要在顶部添加一些px（即大约70px），但这会隐藏你的附加链接。

   @media screen and (max-width: 550px) { 
            * { font-size: 1em; }
            nav {
               position:relative;
                padding-top: 4.5em;
                width: 100%;
                height: 100%;
               -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;
                background: #fffad5;
            }
            nav ul li.is-active { background: #fffcea; }

            .lc {
                position: fixed;
                width: 100%;
                height: 100%;

            }
}

Answer 3

似乎Android浏览器以不同的方式处理固定位置，即Firefox。

特别是固定div内的固定div 菜单没有显示，因为.lc只有3.5em高，并且有一个隐藏的溢出。因此，通过将额外的类切换到.lc以使其扩展，我解决了问题。

.lc-expand { max-height: 100%; }

$('#menuBtn').on('click', function(e) {
    $('body').toggleClass('no-scroll');
    $('.lc').toggleClass('lc-expand');
    $('#mainNav').toggleClass('nav-show');
    e.preventDefault();
});

移动菜单无法打开

3 个答案: