Question

所以我将此代码发送到display all the PARENT categories。

<div class="catslist">
        <ul class="catlistul">
        <?php 
        $args = array(
        'orderby' => 'name',
        'hierarchical' => 1,
        'taxonomy' => 'category',
        'hide_empty' => 0,
        'parent' => 0,
        );
        $categories = get_categories($args);
        foreach($categories as $category) {
        echo '<li><a href="' . get_category_link($category->cat_ID) . '" title="' . $category->name . '">' . $category->name . '</a></li>';
        } 
        ?>
        </ul>
    </div>

代码完美无缺，将放在我的导航栏中。

问题在于，如果有太多的父类别，它会显得一团糟。

是否有自定义的PHP代码可以处理此任务：

仅显示1个文本，例如“ARTICLE”
当我徘徊文章然后，下拉按钮将激活下面的图片将说明我正在努力实现的目标。希望有人可以帮助我。谢谢！

enter image description here

Answer 1

你可以试试这个：

<强> HTML / PHP

    <nav>
        <ul class="cf">
            <li><a class="dropdown">Articles</a>
                <ul>
                    <?php 
                    $args = array(
                    'orderby' => 'name',
                    'hierarchical' => 1,
                    'taxonomy' => 'category',
                    'hide_empty' => 0,
                    'parent' => 0,
                    );
                    $categories = get_categories($args);
                    foreach($categories as $category) {
                    echo '<li><a href="' . get_category_link($category->cat_ID) . '" title="' . $category->name . '">' . $category->name . '</a></li>';
                    } 
                    ?>
                </ul>
            </li>
            <li><a href="#">Submit An Article </a></li>
            <li><a href="#">About Us</a></li>
        </ul>
</nav>

<强> CSS

nav { max-width:1200px; width:100%; display:block; z-index:3; margin:0px auto; background:#131313;}
nav ul {-webkit-font-smoothing:antialiased; list-style: none; margin: 0; padding: 0; width: 100%; text-transform: uppercase; display: inline-block; width:auto;}
nav li { float: left; margin: 0; padding: 0; position: relative; }
nav a { color: #FFF; display: block; font: bold 12px/28px sans-serif; padding: 10px 25px; text-align: center; text-decoration: none; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; font-family:'Museo Sans 500', san-serif; font-weight:500px !important; letter-spacing:.02em; }
.cf li ul { z-index:3; text-align:left !important;}
.cf li ul li {width:200px; display:block;}
.cf li ul li a{text-align:left !important; cursor:pointer;}
.cf li a { cursor:pointer;}
.cf li:hover a { background: #000;}
nav li ul {float: left; left: 0; opacity: 0; position: absolute; top: 40px; visibility: hidden; z-index: 1; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
nav li ul li a{padding:5px 10px;}
nav li:hover ul { opacity: 1; top: 48px; visibility: visible;}
nav li ul li { float: none; width: 100%;}
nav li ul a:hover { background: #131313; padding-left:20px !important; border-left:5px solid #f52100;}
.cf:after, .cf:before { content:""; display:table;}
.cf:after { clear:both;}
.cf { zoom:1;}

在WORDPRESS的下拉列表中显示所有父母类别

1 个答案: