Question

我为我的网站创建了一个响应式菜单。（WordPress的）

<nav id="main-nav" roll="navigation" class="main-nav">
                <ul id="menu" class="menu">
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_id' => 'menu' , 'menu' => 'Main Navigation' ) ); ?>
                    <li class="back"><a href="#header">back</a></li>
                </ul>
            </nav>

当用户使用iPhone访问网站时，我想在菜单末尾添加另一个li！所以这就是我所做的：

<nav id="main-nav" roll="navigation" class="main-nav">
                    <ul id="menu" class="menu">
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_id' => 'menu' , 'menu' => 'Main Navigation' ) ); ?>
                        <li id="hidden" class="menu"><a href="#">test</a></li>
                        <li class="back"><a href="#header">back</a></li>
                    </ul>
                </nav>

但最终导航菜单停止了工作。有没有办法添加这个条件li？有什么想法吗？

Answer 1

您可以通过wp admin中的菜单正常添加它。然后使用属性选择器在CSS中显示/隐藏它。如果它始终是倒数第二个元素，则可以使用Select second last element with css

中借用的:nth-last-child(2)

Answer 2

将li更改为：

    <li id="hidden" class="menu" style="display: none;"><a href="#">test</a></li>

然后把它放在底部的javascript中

    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        $('#hidden').show();
    }

这将起作用，除非用户假装他们使用的设备，并且在那时他们应该有一个看起来很糟糕的网站imo。

这不是按压方式这样做的。

Answer 3

另一种选择是使用wp_is_mobile（）有条件地插入li对，例如，

<ul>
    <li>bing</li>
    <li>bam</li>
    <li>boom</li>
    <li>non-mobile last bullet</li>
    <?php if wp_is_mobile() { ?>
        <li id="mobile-bullet" >mobile-only last bullet</li>
    <?php } ?>
</ul>

然后如果您愿意，请设置移动子弹的样式，使其在CSS

中脱颖而出

li #mobile-bullet {
    color: red;
    background-color: gray;
}

然后可能会在使用媒体查询的纵向模式下更改样式

@media only screen and (orientation: portrait) {
    li #mobile-bullet {
        font-size: smaller;
    }
}

有条件的<li> appreance </li>

3 个答案: