wp_list_pages two columns

时间：2020-09-12 作者：Josh Rodgers

我有一段代码wp_list_pages 导航到两列：

<div id="head">
    <ul>
        <?php
            $page_s = explode("</li>",wp_list_pages(\'title_li=&echo=0&depth=1\'));
            $page_n = count($page_s) - 1;
            $page_col = round($page_n / 2);
            for ($i=0; $i < $page_n; $i++){
                if ($i < $page_col){
                    $left = $left.\'\'.$page_s[$i].\'</li>\';
                } else if ($i>=$page_col) {
                    $right = $right.\'\'.$page_s[$i].\'</li>\';
                }
            }
        ?>
        <div id="nav">
            <div>
                <?php echo $left; ?>
            </div>
            <div>
                <a href="<?php bloginfo(\'url\'); ?>"><img src="<?php bloginfo(\'template_directory\'); ?>/images/logo.png" alt="Logo" title="Logo" /></a>
            </div>
            <div>
                <?php echo $right; ?>
            </div>
        </div>
    </ul>
</div>
这个代码工作得很好！问题变成了深度参数，当我删除它以便菜单的子菜单显示时，结果看起来很糟糕，因为代码试图将所有内容拆分为wp_list_pages 不仅仅是父菜单项。

我想做的是，当有人将鼠标悬停在链接（下拉菜单）上时，让子菜单项显示出来，然后当页面变小时，我希望它们成为菜单项列表的一部分，这样人们仍然可以看到它们，他们就不会悬停，因为在较小的屏幕上不可能这样。

我的CSS看起来像：

#nav {
      display: flex;
      text-align: center;
      width: 100%;
}

#nav div {
      align-items: center;
      display: flex;
      flex: 1;
      justify-content: center;
}

#nav div li {
      flex: 1;
      font-family: \'Lato\', sans-serif;
      font-size: 15px;
      font-weight: 300;
      letter-spacing: 5px;
      text-transform: uppercase;
}

#nav div li.current_page_item a {
      font-weight: 400;
}

#nav div li.current_page_item a,
#nav div li a:hover {
      border-bottom: 1px solid #4a5f73;
}

#nav div a {
      border-bottom: 1px solid transparent;
      color: #4a5f73;
      padding: 0 5px 5px 10px;
      text-decoration: none;
}

#nav div img {
      height: auto;
      margin: 0 auto;
      max-width: 450px;
      width: 100%;
}

@media screen and (max-width: 1200px) {
    #nav {
           flex-direction: column;
    }
    #nav div li {
           padding: 20px 0;
    }
}

@media screen and (min-width: 1199px) {
    #nav div li {
           padding: 65px 0 30px;
    }
}
小提琴：https://jsfiddle.net/uodhenyL/

非常感谢您的帮助。

谢谢，乔希

1 个回复
最合适的回答,由SO网友:Josh Rodgers 整理而成

我让一切都运转起来了，但我不得不改变我的方法，让它按我想要的方式运转。

基本上，最简单的方法（至少对我来说）是创建两个菜单。。。一个用于小屏幕尺寸，一个用于大屏幕尺寸。

因此，代码如下所示：

<!-- Head -->
<div id="head">
    <!-- Nav -->
    <ul class="nav">
        <?php
            wp_list_pages("title_li=");
        ?>
    </ul>
    
    <!-- Small Nav -->
    <div class="sm-nav">
        <div class="overlay" id="overlay" role="navigation" aria-expanded="false">
            <button type="button" name="close" class="toggle close" id="close" aria-controls="overlay"><i class="ion-android-close"></i></button>
            <ul>
                <?php
                    wp_list_pages("title_li=");
                ?>
            </ul>
        </div>
        <button type="button" name="open" class="toggle open" id="open" aria-controls="overlay"><i class="ion-navicon"></i></button>
        <div class="logo">
            <a href="<?php bloginfo(\'url\'); ?>"><img src="<?php bloginfo(\'template_directory\'); ?>/images/logo.png" alt="Logo" title="Logo" /></a>
        </div>
    </div>
</div>
我不得不添加一小块jQuery，使徽标出现在较大菜单的列表中：

<script>
    $(function() {
        // Nav Logo
        $(\'.nav li:eq(2)\').after(\'<div class="logo"><a href="<?php bloginfo(\'url\'); ?>"><img src="<?php bloginfo(\'template_directory\'); ?>/images/logo.png" alt="Logo" title="Logo" /></a></div>\');
    });
</script>
然后，我不得不添加一些JavaScript来实现更小的导航：

/*
     Trap focus function for the overlay
     https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element
*/

 function trapFocus(element) {
     var focusableEls = element.querySelectorAll(\'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select\'),
     firstFocusableEl = focusableEls[0];
     lastFocusableEl = focusableEls[focusableEls.length - 1];
     KEYCODE_TAB = 9;

     element.addEventListener(\'keydown\', function(e) {
         var isTabPressed = (e.key === \'Tab\' || e.keyCode === KEYCODE_TAB);
         if (!isTabPressed) {
             return;
        }
         if ( e.shiftKey ) /* shift + tab */ {
             if (document.activeElement === firstFocusableEl) {
                 lastFocusableEl.focus();
                 e.preventDefault();
            }
        } else /* tab */ {
             if (document.activeElement === lastFocusableEl) {
                 firstFocusableEl.focus();
                 e.preventDefault();
            }
        }
    });
}

/* 
     onclick functions to launch the overlay and toggle the required classes
*/

 document.addEventListener(\'DOMContentLoaded\', function() {
     var overlay = document.getElementById(\'overlay\');
     var scrollPos = document.querySelector(\'body\').scrollTop; // [1]

     document.getElementById(\'open\').addEventListener(\'click\', function() {
         document.getElementById(\'overlay\').classList.toggle(\'menu\');
         document.querySelector(\'body\').classList.toggle(\'active\');
         document.getElementById(\'overlay\').setAttribute(\'aria-expanded\', \'true\');
         document.getElementById(\'close\').focus();
         trapFocus(overlay);
    });

     document.getElementById(\'close\').addEventListener(\'click\', function() {
         document.getElementById(\'overlay\').classList.toggle(\'menu\');
         document.querySelector(\'body\').classList.toggle(\'active\');
         document.getElementById(\'overlay\').setAttribute(\'aria-expanded\', \'false\');
         document.getElementById(\'open\').focus();
         document.querySelector(\'body\').scrollTop = scrollPos; // [1]
    });
});
最后。。。CSS：

/* Small Nav */
@media screen and (max-width: 850px) {
    body.active {
        overflow: hidden;
    }
    .sm-nav .overlay {
        background: rgba(95, 105, 117, 0.9);
        bottom: 0;
        color: #fff;
        left: 0;
        opacity: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity 0.2s, visibility 0.2s;
        visibility: hidden;
        z-index: 800;
        /* Scrolling */
        -webkit-overflow-scrolling: touch;
    }
    .sm-nav .menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    .sm-nav button {
        background: none;
        border: 0;
        font-size: 50px;
    }
    .sm-nav .ion-navicon:before {
        color: #5f6975;
    }
    .sm-nav #overlay {
        padding-top: 60px;
        text-align: center;
    }
    .sm-nav #overlay button {
        color: #fff;
    }
    .sm-nav #overlay button:hover {
        cursor: pointer;
    }
    .sm-nav #overlay li a {
        border-bottom: 1px solid transparent;
        color: #fff;
        display: inline-block;
        font-family: \'Lato\', sans-serif;
        font-size: 15px;
        font-weight: 300;
        letter-spacing: 5px;
        margin: 5px 0;
        padding: 15px 5px 5px 10px;
        text-decoration: none;
        text-transform: uppercase;
    }
    .sm-nav #overlay li.current_page_item a {
        border-bottom: 1px solid #fff;
        font-weight: 400;
    }
    .sm-nav #overlay li.current_page_item ul.children a {
        border-bottom: none;
        font-weight: 300;
    }
    .sm-nav #open,
    .sm-nav #close {
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 15px;
    }
    .sm-nav #open:hover,
    .sm-nav #close:hover {
        cursor: pointer;
    }
    body.active #open,
    .nav {
        display: none;
    }
    .sm-nav .logo {
        text-align: center;
    }
    .sm-nav .logo img {
        height: auto;
        max-width: 400px;
        transition: 0.5s;
        width: 100%;
    }
    .sm-nav .logo a:hover {
        opacity: 0.9;
    }
}

/* Nav */
@media screen and (min-width: 851px) {
    body {
        overflow-x: hidden;
    }
    .nav {
        display: flex;
        height: 80px;
        justify-content: space-around;
        margin: 0 auto 50px;
        position: relative;
    }
    .nav > * {
        align-items: center;
        flex: 1;
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .nav ul,
    .sm-nav {
        display: none;
    }
    .nav li:hover > ul {
        display: block;
    }
    .nav li a {
        border-bottom: 1px solid transparent;
        color: #5f6975;
        display: block;
        font-family: \'Lato\', sans-serif;
        font-size: 15px;
        font-weight: 300;
        letter-spacing: 5px;
        padding: 15px 5px 5px 10px;
        text-decoration: none;
        text-transform: uppercase;
    }
    .nav ul.children li a,
    .nav ul.children li:hover a {
        color: #fff;
        margin: 0 30px;
    }
    .nav ul.children li:hover {
        background: #4c545d;
    }
    .nav li a:hover,
    .nav li:hover > a {
        border-bottom: 1px solid #4a5f73;
    }
    .nav li.current_page_ancestor a {
        border-bottom: 1px solid #4a5f73;
        font-weight: 400;
    }
    .nav li:hover > ul.children a,
    .nav li.current_page_ancestor ul.children a {
        border-bottom: none;
        font-weight: 300;
    }
    .nav li.current_page_item a {
        border-bottom: 1px solid #4a5f73;
        font-weight: 400;
    }
    .nav ul {
        background: #5f6975;
        position: absolute;
        top: 100%;
    }
    .nav ul li {
        border-top: 1px solid #4c545d;
        position: relative;
    }
    .nav ul li a {
        padding: 15px 10px;
    }
    .nav ul ul {
        left: 100%;
        position: absolute;
        top: 0;
    }
    .nav .logo {
        flex: 0 0 20%;  
    }
    .nav .logo img {
        height: auto;
        max-width: 400px;
        transition: 0.5s;
        width: 100%;
    }
    .nav .logo a:hover {
        opacity: 0.9;
    }
}
我正在使用媒体查询一次显示一个导航栏。。。我隐藏较大的导航，同时显示较小的导航，反之亦然。这样，用户一次只能看到其中一个，但我可以适当地设置和使用它们。

此外，我还有围绕两个菜单的类：nav 和sm-nav, 这样，我可以在菜单中有两个相同的类，但我可以使用不同的样式和使用它们-一个不会影响另一个。

我知道我过去使用过更简单的代码来实现这一点，但我发现这是可行的。请随时提出建议。这段代码是从多个源代码中复制和粘贴的，我相信它的编写或实现会比我做的好得多。

希望这对别人有帮助。

谢谢，乔希

标签： css   wp-list-pages   children   小码农  

相关推荐

使用插件更改CSS

我正在尝试制作一个插件来更改CSS文件。我的客户希望每个季节都改变颜色，我们希望做到万无一失，这样他们就不会破坏任何东西。我已经创建了选项页面，但似乎无法使实际功能正常工作。<?php class SeizoensKleuren { private $seizoens_kleuren_options; public function __construct() { add_action( \'admin_menu\', arr