CODEWITHSUNDEEP
phpwordpress
user4491046
user4491046

Reputation:

Display All Parents categories in a drop down in WORDPRESS

So I have this code to 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>

The code is perfectly working and will be put in my navigation bar.

The problem with this is if the time comes that there are too many Parent Categories, it will look like a mess.

Is there a custom php code that will handle this task:

  1. Display only 1 text for example "ARTICLE"
  2. when i hovered the word article then, the drop down button will activete Image below will illustrate what I'm trying to achieve. Hope someone can assist me on this. Thank you!

enter image description here

Upvotes: 2

Views: 2907

Answers (1)

Ben Daggers
Ben Daggers

Reputation: 992

you could try this:

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;}​

Upvotes: 2

Related Questions