Support » Fixing WordPress » Child Category Drop Down Menu Problem

  • chrisanimelo444

    (@chrisanimelo444)


    I’ve been trying to make a subcategory (or child category) drop down menu for a while now. I tried many plugins, but some of them just display a pre-made bar on the top of my blog page. I wanted my main categories to be displayed in a certain area of my header file and then I wanted the categories to form a drop down of subcategories when you hover over them with a mouse. The other plugins I looked into I couldn’t really understand, even when doing research about them.

    So finally, I’ve decided to ask for help here hoping that someone has a solution to the problem. I found a JQuery code that somewhat works, but, when the subcategories drop down into a menu after you hover over the main categories, it’s all disorganized and my post section lowers itself down the page (instead of the drop down menu going over the post section, everything lowers – if that makes sense). So, I don’t think I’m doing it right. Also, when you hover over the subcategories, some of them are discolored.

    What I was trying to achieve was a green drop down menu box with a list of my child categories (once you hover over the main categories). Instead, the end result is completely different.

    Here’s the code I put into the header file of WordPress:

    <?php wp_enqueue_script('jquery'); ?>
    <script type='text/javascript'>
    jQuery(document).ready(function() {
    jQuery("#nav ul").css({display: "none"}); // Opera Fix
    jQuery("#nav li>ul").css({top: "auto", left: "auto"});
    jQuery("#nav li ul li>ul").css({margin: "0", top: "0", left: "200px"});
    jQuery("#nav li li").hover(function() {
        jQuery(this).css({backgroundColor: "#eee"});
        },function() {
        jQuery(this).css({backgroundColor: "#eee"});
    });
    jQuery("#nav li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible", display: "none"}).show(268);
        },function(){
        jQuery(this).find('ul:first').css({visibility: "hidden"});
        });
    });
    </script>
    
    <div id="wrapper">
    		<div id="container" class="container">
                <div class="span-24">
    <div id="navcontainer">
    					<ul id="nav">
    
                            <li <?php if(is_home()) { echo ' class="current-cat" '; } ?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
    						<?php wp_list_categories('depth=3&exclude=1&hide_empty=0&orderby=name&show_count=0&use_desc_for_title=1&title_li='); ?>
    					</ul>
    				</div>
    			</div>

    And here’s my website if you wanted to preview: http://www.cashcampfire.com

    Thanks in advance to anyone willing to help.

    Christina

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter chrisanimelo444

    (@chrisanimelo444)

    Never mind, I decided to change my theme, which already has the kind of drop down menus that I want.

    maki123

    (@maki123)

    How did you get your drop downs to work?
    I tried your code but it only displays the categories in my header, and when i hover over them nothing happens. Also the subcategories are displayed next to the categories.
    I don’t really know JQuery, so do I have to have some kind of software to get it to work or something?

    alfieb

    (@alfieb)

    I am using WordPress 2.9.1 and the Atahaulpa theme and it already has this menu dropdown capability on bar2 below the header. My problem is that one dropdown category with two sub-categories works and then I stated an additional category with one sub-category doesn’t show the sub-category. Not sure where the code is associated with the bar menu to analyze. I double checked every setting on the Admin Panel and don’t see anything wrong ? Any comments anyone.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Child Category Drop Down Menu Problem’ is closed to new replies.