javascript - Arrow in nav menus in CSSJS (e.g. playframework.org) - Stack Overflow

admin管理员组

文章数量:1345054

The navigation menu at the top of the 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? :)

The navigation menu at the top of the http://www.playframework 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? :)

• javascript
• html
• css
• navigation

Share Improve this question Follow edited Jun 9, 2011 at 21:00 kapa 78.7k2121 gold badges165165 silver badges178178 bronze badges asked Mar 12, 2011 at 16:04 manmalmanmal 3,93822 gold badges3232 silver badges4242 bronze badges 2

• Removing content: " ." removes the arrow. Also, border-right: 0.8em solid transparent is the right part of the arrow, border-left the left part. – pimvdb Commented Mar 12, 2011 at 16:08
• Sample reference implementation: jsfiddle/8DZZQ/13 found in related question stackoverflow./questions/15229757/sliding-nav-arrow?rq=1 – stormwild Commented Jul 3, 2013 at 14:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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).

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

Here's a link to see it in action

http://jsfiddle/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%;  
}

本文标签： javascriptArrow in nav menus in CSSJS (eg playframeworkorg)Stack Overflow