0

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

2

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:"→ "}
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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