|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Two-Level Split Navigation Test</title> |
|
<style> |
|
html { |
|
font-size: 13px; |
|
font-family: Helvetica, Arial, sans-serif; |
|
} |
|
.MainNav { |
|
display: block; |
|
position: relative; |
|
border: 0.077em solid rgba(255,255,255,0.5); |
|
box-shadow: 0 0 0.231em rgba(0,0,0,0.5); |
|
border-radius: 0.231em; |
|
/* Moved gradient to .MainNav instead of .TopNav */ |
|
background: rgba(0,0,0,0.1); |
|
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0)); |
|
} |
|
.MainNav ul { |
|
clear: both; |
|
padding: 0; |
|
list-style: none; |
|
display: block; |
|
margin: 0; |
|
} |
|
.MainNav li { |
|
list-style: none; |
|
display: block; |
|
float: left; |
|
margin: 0; |
|
} |
|
.MainNav a { |
|
display: block; |
|
padding: 0.615em 0.769em; |
|
} |
|
.TopNav a { |
|
border-right: 0.077em solid rgba(0,0,0,0.125); |
|
} |
|
.MainNav li:first-of-type a { |
|
padding-left: 1.538em; |
|
|
|
} |
|
.SubNav a { |
|
padding-top: 0.461em; |
|
padding-bottom: 0.461em; |
|
} |
|
.MainNav ul:after { /* This will need a little more robust IE clearfixing */ |
|
display: block; |
|
content: ""; |
|
clear: both; |
|
line-height: 0; |
|
height: 0; |
|
visibility: hidden; |
|
} |
|
.MainNav a { |
|
text-decoration: none; |
|
} |
|
.TopNav a { |
|
font-weight: bold; |
|
color: rgba(0,0,0,0.5); |
|
text-shadow: 0 -0.077em #fff; |
|
} |
|
.TopNav .Selected a, |
|
.SubNav { |
|
/* Dark Gradient */ |
|
background: rgba(0,0,0,0.5); |
|
} |
|
.TopNav .Selected a { |
|
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0.125)); |
|
} |
|
.SubNav { |
|
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.125), rgba(0,0,0,0)); |
|
border-bottom-left-radius: 0.231em; |
|
border-bottom-right-radius: 0.231em; |
|
} |
|
.TopNav .Selected a { |
|
text-align: -0.077em; |
|
} |
|
.TopNav .Selected a, |
|
.SubNav a { |
|
color: #fff; |
|
text-shadow: 0 0.077em rgba(0,0,0,0.5); |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<h1>Nav Test</h1> |
|
<nav class="MainNav"> |
|
<ul class="TopNav"> |
|
<li><a href="#">Section</a></li> |
|
<li><a href="#">Section</a></li> |
|
<li class="Selected"><a href="#">Selected Section</a></li> |
|
<li><a href="#">Section</a></li> |
|
<li><a href="#">Section</a></li> |
|
<li><a href="#">Section</a></li> |
|
<li class="last"><a href="#">Section</a></li> |
|
</ul> |
|
<ul class="SubNav"> |
|
<li><a href="#">Sub Section</a></li> |
|
<li><a href="#">Sub Section</a></li> |
|
<li><a href="#">Sub Section</a></li> |
|
<li><a href="#">Sub Section</a></li> |
|
<li class="last"><a href="#">Sub Section</a></li> |
|
</ul> |
|
</nav> |
|
</body> |
|
</html> |
Quick change to take the main gradient into the
navelement as opposed to just.TopNav.