CODEWITHSUNDEEP
javascripthtmlcssnavigation
manmal
manmal

Reputation: 3928

Arrow in nav menus in CSS/JS (e.g. playframework.org)

The navigation menu at the top of the http://www.playframework.org site features a small arrow pointing upward for the currently selected section (Home, Learn, Download,...). I tried to get behind the implementation they used, but I can't wrap my head around it - the resource does not show up in Chrome's Resources window, and an inspection of the elements did not show any signs of a background image, nor a JS interceptor (although I might have missed that). What in hellhound's name is going on there? :)

Screenshot

Upvotes: 4

Views: 4314

Answers (3)

montrealmike
montrealmike

Reputation: 11631

Here's a link to see it in action

http://jsfiddle.net/zC5cp/

.box{
    background: red;
    color: #FFF;
    width: 100px;
    height: 100px;
    position:relative;
}

.arrow-up {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-bottom: 10px solid white;
    position: absolute;
    bottom: 0px;
    margin-left: -10px;
    left:50%;  
}

Upvotes: 0

kapa
kapa

Reputation: 78671

This is the HTML:

<ul id="menu"> 
<li class="selected"> 
<a href="/">Home</a><span>&gt;</span> 
</li> 
...

And the magic happens in this piece of CSS:

#menu .selected a:after {
    content: " .";
    display: block;
    text-indent: -99em;
    border-bottom: 0.8em solid #8adc92;
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid transparent;
    border-top: none;
    height: 0px;
    margin-left: -.8em;
    margin-right: auto;
    margin-top: 14px;
    position: absolute;
    left: 50%;
    width: 1px;
}

The technique is called CSS arrows, you can find a lot of articles and examples on the net

(EDIT: @jeroen posted a very good one).

Upvotes: 8

jeroen
jeroen

Reputation: 91734

It looks like they used a css arrow, see more information here.

Upvotes: 3

Related Questions