Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a menu for a website I am designing and there are parent and child elements...I was wondering if there was someway I could add an arrow to my navigation if the parent has a child element?

My navigation code looks like:

<div id="nav">
    <ul>
        <?php
            wp_list_pages("title_li=");
        ?>
    </ul>
</div>

My CSS code looks like:

http://pastebin.com/xBbHsyVM

I would prefer to use a text arrow, but an image arrow will work just as easily...a css solution over javascript or jquery is also a plus, but not a big deal if it isn't.

Thanks,
Josh

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

To add arrow for parent elements:

jQuery + CSS Solution:

JQUERY:

jQuery(function($){
  $(document).ready(function(){
    $('ul.sub-menu').parent().addClass('drop-down'); // Add Sub-Menu Class to insert personalized style
    $('li.drop-down > a:first-child').wrapInner('<span class="menu-bullet" />'); // Add .menu-bullet in span to insert your arrow image background 
  });
});

CSS:

div#nav ul li.drop-down a .menu-bullet {display:block; background:url(your_image_path.jpg) no-repeat; padding-left:15px; /* padding left value is based on arrow image width */}

To add arrow for child elements:

jQuery + CSS solution:

JQUERY:

jQuery(function($){
  $(document).ready(function(){ 
    $('div#nav ul li ul li a').wrapInner('<span class="arrow" />');
  });
});

CSS:

span.arrow {display:block; background:url(your_image_path.jpg) no-repeat; padding-left:15px; /* padding left value is based on arrow image width */}

or only CSS Solution:

div#nav ul li ul li a:before {content:"→ "}
share|improve this answer
add comment

Ok,

This what I ended up with:

<script type="text/javascript">
    jQuery(function($){
        $(document).ready(function(){
            $('ul.children').parent().addClass('drop-down'); // Add Sub-Menu Class to insert personalized style
            $('li.drop-down > a:first-child').wrapInner('<span class="menu-bullet" />'); // Add .menu-bullet in span to insert your arrow image background
        });
    });
</script>

and the css:

#nav ul.children li a span.menu-bullet:after {
    content: " »";
    font-size: 18px;
    position: absolute;
    right: 15px;
    top: 12px;
}

It's very close to Rafael's answer...I've only tweaked it a little. I know this rules out support for IE6, but I view the arrows as extra appeal, not necessarily a requirement - so that's ok with me.

Rafael's answer is basically what I used, so I'm going to award the answer to him. Thanks for pointing me in the right direction!

Thanks,
Josh

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.