EverWeb Codebox

Navigation Down Arrow

Directory Down Arrow

These instructions were added following a request for info about adding a down arrow to directories in the navigation menu to indicate to visitors that the navigation item is in fact a directory with more content.

For those who are not familiar with CSS the terms may seem alien and confusing but the actual method is simple enough for those who can count and know left from right!

Navigation ID Number

The first step is to make sure you have the correct ID number for the navigation menu. If this is the first time the navigation widget has been used in the project the ID number will be zero. Otherwise it will be necessary to look at the source code of a page of the site to find the actual number.

Open a page of the site in Firefox and them do a Command U to open a window with the page source code. Look in the head of the HTML doc for the menu styles and find the ID.

Adding The Arrows

The code below will add the down arrow to all the menu <a> tags. Change the color by substituting a different hex color number.

Adjust the position of the arrow horizontally in relation to the link text by changing the value of "margin-left".

Adjust the arrow up or down by changing the value of "top". Note that negative values can be used to move it higher up.

<style type="text/css">

#navmenu_menu0 ul li a:after {content:"\25BC";color:#00FF00;position:relative;float:right;margin-left:5px;top:1px}

</style>

Removing The Arrows

This will add a down arrow not only to the directory page link but to all the links to the pages in the directory. These are removed by adding this...

<style type="text/css">

#navmenu_menu0 ul ul li a:after{content:''}

</style>

Non Directory Pages

This is where the advanced math comes in. The pages in the top level of the navigation that are not directories will, at this point, also have down arrows and these need to be removed too.

The CSS :nth-child(n) selector is used to achieve this using a line of code like this...

<style type="text/css">

#navmenu_menu0 ul li:first-child a:after {content:""}     /* first menu item */

#navmenu_menu0 ul li:nth-child(10) a:after {content:""}      /* Tenth menu item */

</style>

In the navigation menu for this site, the first item is the index page which is not a directory. This is the first child.

The next item is the Widgets link which is 10th from the left.

If the last item in the menu is a page rather than a directory the last-child is used like this...

<style type="text/css">

#navmenu_menu0 ul li:last-child a:after {content:""}     /*last menu item */

</style>

Head Code

The full code which has been added to the menu on this page looks like this...

<style type="text/css">

#navmenu_menu0 ul li a:after {content:"\25BC";color:#00FF00;position:relative;float:right;margin-left:5px}

#navmenu_menu0 ul ul li a:after{content:''}

#navmenu_menu0 ul li:first-child a:after {content:""}

#navmenu_menu0 ul li:nth-child(10) a:after {content:""}

</style>

This code is pasted into the Site Wide Head Code box in the Site Publishing Settings page of EverWeb.

Creating A CSS Triangle

Apparently the arrow symbol doesn't work on Android devices so the easiest workaround is to replace \25BC with the letter V - upper or lower case.


The triangle can be created using CSS...


#navmenu_menu0 ul li a:after {

position:relative;

top:8px;          /* position of triangle from the top of the nav tab */

right:0;

width: 0;

height: 0;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-top: 12px solid #CCCCCC;     /* Triangle Color*/

font-size: 0;

line-height: 0;}


To remove the arrows from the tabs where they are not required use this...


#navmenu_menu0 ul ul li a:after{border:none}

#navmenu_menu0 ul li:first-child a:after {border:none}

#navmenu_menu0 ul li:nth-child(10) a:after {border:none}