CODEWITHSUNDEEP
htmlcss
Tony
Tony

Reputation: 10208

Add an arrow under the active menu item in HTML+CSS

I am trying to generate a menu like the following:

enter image description here

There are several items in the menu and the active one has an arrow after it. The menu items are tags like the following code:

<div class="menuCenter">
     <div class="linksWrapper">
      <a href="#">Home</a>
      <a class="menuCenterLinkLeft" href="#">Plans & Pricing</a>
      <a class="menuCenterLinkLeft" href="#">Sign In</a>
      <a class="menuCenterLinkLeft active" href="#">Sign Up</a>
      <a class="menuCenterLinkLeft" href="#">Contact</a>
     </div>
</div>

I tryied two options: 1- Absolutely positioning the arrow image with javascript. I have problems when resizing the page. 2- Using the :after pseudo element, like this:

.linksWrapper a.active:after
{
    content: url("images/arrowImg.png");
    position: relative;
    left: -40px;
    top: 30px; 
}

The problem with this approach was the horizontal alignment of the arrow. It should be below the center of the link and I could not achive that. I can use HTML5 or CSS 3.

Any help?

Upvotes: 4

Views: 27348

Answers (3)

Christoph
Christoph

Reputation: 51201

Try this:

.linksWrapper a.active:after {
    content: url("images/arrowImg.png");
    position: absolute;
    left: 50%;
    top: 30px;
    margin-left: - <width-of-your-image> / 2; /* negative number!*/
}

sidenote: I avoid putting { on a newline, since it may have nasty effects in javascript.

The trick is left:50%; combined with correcting the position by setting it back half width via margin-left.

See example.

Upvotes: 9

jake
jake

Reputation: 317

I put this together really quick..

http://jsfiddle.net/8Sqwq/1/

Because I wasn't too sure how flexible your code could be, this is the best I could come up with.

Which ever href has the classname of .active will inherit the arrow

// I updated the fiddle to show it in action.

Upvotes: -1

Karl Keefer
Karl Keefer

Reputation: 645

The absolute positioning approach should work, you need to put the arrow inside of another div that has position:relative defined, so that the absolute coordinates are relative to this parent div, instead of being relative to the body element.

However, I would go with this approach instead:

Make the arrow a part of the background image of the actual a.active items - this way it will center with background-position and you don't need any scripting!

Upvotes: 2

Related Questions