• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 411
  • Last Modified:

How to add a nav caret above a button?

I was wondering how to add the image, which I have attached, to each one of the buttons when each one of the buttons is active. For example when I hit the about button i want that image to show up above the button. The image is just a caret. I want it to blend into the main content area.
I have also attached the source code and css. I just want to know how to add this to the css for this to work. Now to set the state to active I do use jquery if you need that file just let me know.

Thanks,
Tony
index.html
heronav-caret-20090608.png
main.css
0
askurat1
Asked:
askurat1
  • 2
  • 2
1 Solution
 
frankkyCommented:
Do you have a demo site online we could see?
or
Do you have a printscreen of what you have vs. what you want?
0
 
Tony O'ByrneCommented:
This one's going to be a little involved...

From your previous post you've got your buttons working - when the list-item is cilcked its style is changed.  That style has a background image set to it, so we can't have another one.

You start with two options...

Either style the anchor tag inside of the list item or, <li...><a ... class="caret">...</a></li>
create another div inside the list item, but outside the anchor  <li...><div...><a...>...</a></div></li>

You're using jQuery, so whatever route you take will be just as easy to do as the other.

If you choose to style the anchor tag you need to be aware that the menu title texts aren't the same width, so the caret may appear in different places - maybe to the left, maybe to the right.

So whatever route you take, you should use a block element (something that takes up the entire width of its container) like <div>...  Or you could add the display:block; to an anchor class.

It really makes no difference either way - they'll both achieve the desired affect.  Using the <div> will mean you don't have to mess around with that particular anchor only for the menu.

You also need some CSS to represent the caret background image...
.caret{
    background: url( 'heronav-caret-20090608.png' );
    position: absolute;
    top: 0px;
    left: 0px; /*play with this some.*/
}

The jQuery is below.

Hopefully this helps at least by giving you a grasp of the concept behind what you should be doing.  I haven't tested this code (I should be working) ;) but it should give an idea as to how to achieve what you're looking for.  Feel free to get back in touch :)
/* Event on list item... */
$(document).ready( function(){
    $("#mainNav li").click( function(){
        $("a", this).siblings().removeClass("active");  //  Unset all other buttons
        $("a", this).addClass("active");

        $("div", this).siblings().removeClass("caret");
        $("div", this).addClass("caret");
    });
});

Open in new window

0
 
askurat1Author Commented:
Thanks for the reply again. It doesn't seem to quit work I've attached the files again with what you told me to do.

Thanks,
Tony
index.html
main.css
main.js
heronav-caret-20090608.png
0
 
askurat1Author Commented:
I figured it out. Thanks.
0
 
Tony O'ByrneCommented:
Nice work :)
Out of curiosity, what was the difference between my suggestion and what you did?
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now