The secondary nav
Secondary nav, as well as tertiary and so on..., use nested NAV elements to structure navigation. The outer NAV element will have an ID such as 'nav1', 'nav2', etc, which indicates how far down the page it should be represented. If a user website changes the height of these NAV elements they will also need to change the 'top' attribute.
As secondary navigation etc is often represented as appearing underneath the header, these NAV elements appear before the HEADER element within the BODY element. Like in the header, a DIV element is used to constrain the width where child NAV elements appear.
these NAV elements also contain styled SPAN elements that, in the case of breadcrumbs, appear as right-angled brackets, and in the case of menus, appear as middots ('·').
<nav id='nav1'>
<div class='nav_inner center responsive_page_width'>
<nav class='breadcrumbs'>
<a href='/' >Home</a>
<a href='/html_structure/' >HTML Structure</a>
<a href='/html_structure/nav/' >Nav</a>
</nav>
<nav>
<a href='/html_structure/header/' >Header</a>
<a href='/html_structure/nav/' >Nav</a>
<a href='/html_structure/main/' >Main</a>
<a href='/html_structure/footer/' >Footer</a>
</nav>
</div>
</nav>
As navigation can include many nested items, it is best if everything underneath a top-level NAV inherits the same line-height. While the following direction simply causes the line-height to be inherited from BODY, it also highlights this fact.
BODY NAV
{
line-height:inherit;
letter-spacing: 1px;
}
The following directive, like the similar one for the HEADER element, uses flex to appropriately position navigation sub elements. In the future, this will probably be simplified into a global 'nav_inner' class.
BODY > NAV > DIV
{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: flex-end;
flex-wrap: wrap;
}
BODY > NAV > DIV > NAV:only-child
{
display:flex;
justify-content: flex-end;
flex-basis:100%;
flex-grow:1;
text-align:right;
}
BODY > NAV > DIV > NAV:only-child A
{
float:none;
}
The following removes the default styles given to lists.
NAV > UL,
NAV > OL
{
margin:0;
padding:0;
}
NAV > UL > LI,
NAV > OL > LI
{
display:block;
list-style-type:none;
float:left;
}
The NAV element CSS
Styling of anchor and spans within the NAV
The following causes links to be displayed as blocks but floating to the left. This is purely to remove the gaps that are usually rendered for between links if they are rendered as inline. Line height and colour and is inherited from the enclosing elements, and text decoration is removed. A padding of 15 pixels is given to each side of each link.
BODY > HEADER NAV A,
BODY > NAV A
{
display:block;
float:left;
line-height:inherit;
color:inherit;
text-decoration:none;
padding:0 20px;
vertical-align:top;
position:relative;
}
I forget why theses are specified as inline block. It is probably a mistake...
BODY > HEADER NAV SPAN,
BODY > FOOTER NAV SPAN,
BODY > NAV SPAN
{
display:inline-block;
vertical-align:top;
line-height:inherit;
position:relative;
}
Breadcrumbs styling
The following only applies to breadcrumbs, which may either be reprsented in an ordered list, explicitly indicated using a 'breadcrumbs' class, or alternatively the first nav which is not an only child within a nav.
Not sure if they are needed really...
BODY > NAV OL LI SPAN,
.breadcrumbs SPAN,
.breadcrumbs A,
BODY > NAV NAV:not(:only-child):first-child A
{
display:block;
line-height:inherit;
float:left;
vertical-align:top;
}
This directive appends a chevron to all anchors.
BODY > NAV NAV:not(:only-child):first-child > A:not(:last-child):after,
BODY > NAV OL > LI:not(:last-child) A:after,
BODY > NAV NAV:not(:only-child):first-child > A:only-child:after,
BODY > NAV OL > LI:only-child A:after
{
font-family: 'awesome';
content: "\0f054";
position: absolute;
right: -6px;
top: 0px;
}
Menu styling
BODY > NAV UL LI SPAN,
.menu SPAN
{
display:block;
float:left;
font-size:28px;
line-height:15px;
vertical-align:top;
}
BODY > NAV UL LI SPAN:before,
.menu SPAN:before
{
content:"\00B7";
font-size:28px;
line-height:40px;
vertical-align:top;
}
BODY > NAV UL LI SPAN:before,
.menu SPAN:before
{
content:"\00B7";
xfont-size:28px;
xline-height:40px;
xvertical-align:top;
}
BODY > HEADER NAV A:hover,
BODY > FOOTER NAV A:hover,
BODY > NAV A:hover
{
opacity:0.8;
}
BODY > NAV
{
box-sizing:border-box;
position:fixed;
left:0;
right:0;
height:40px;
line-height:40px;
border-bottom:solid 1px #aaa;
background:white;
}
NAV#nav { top: 40px; }
NAV#nav1 { top: 40px; }
NAV#nav2 { top: 80px; }
NAV#nav3 { top:120px; }
NAV#nav4 { top:160px; }
NAV#nav5 { top:200px; }
NAV#nav6 { top:240px; }
NAV#nav7 { top:280px; }
Header styling
BODY > HEADER NAV LI
{
border-right:solid 1px rgba(255,255,255,0.3);
}
BODY > HEADER NAV LI:first-child
{
border-left:solid 1px rgba(255,255,255,0.3);
}
BODY > HEADER NAV > A
{
display:inline-block;
border-right:solid 1px rgba(255,255,255,0.3);
}
BODY > HEADER NAV > A:first-child
{
border-left:solid 1px rgba(255,255,255,0.3);
}
Tertiary nav
More nav is possible.
<nav id='nav2'>
<div class='center responsive_page_width'>
<nav class='breadcrumbs'>
<a href='/' >Home</a>
<span></span>
<a href='/html_structure/' >HTML Structure</a>
<span></span>
<a href='/html_structure/main/' >Main</a>
</nav>
<nav>
<a href='/html_structure/main/type_1' >T1</a>
<a href='/html_structure/main/type_2' >T2</a>
<a href='/html_structure/main/type_3' >T3</a>
<a href='/html_structure/main/type_4' >T4</a>
<a href='/html_structure/main/type_5' >T5</a>
<a href='/html_structure/main/type_6' >T6</a>
<a href='/html_structure/main/type_7' >T7</a>
<a href='/html_structure/main/search' >Search</a>
<a href='/html_structure/main/form' >Form</a>
</nav>
</div>
</nav>