Modify white space of main menu
Add some accessiblility touches: change cursor to pointer on hover, change link color on active event.
This commit is contained in:
parent
6b2a324730
commit
ad89f1fb4f
GPG Key ID:
234AEF20B72D5769
@ -185,174 +185,54 @@ header > hr {
|
||||
}
|
||||
|
||||
/* The main navigation menu */
|
||||
.menu {
|
||||
background: #4D4D4D; /* HPR Grey */
|
||||
header > nav.menu {
|
||||
display: block;
|
||||
background-color: #4D4D4D; /* HPR Grey */
|
||||
text-align: Left;
|
||||
clear:both; /* Forces the menu to appear after the HPR Header block */
|
||||
padding: 0em 0em;
|
||||
margin: 0em 0em;
|
||||
}
|
||||
|
||||
.menu ul ul { /* Causes the sub menus not to be displayed, until hover shows them */
|
||||
display: none;
|
||||
}
|
||||
|
||||
#main_menu li a {display: block;}
|
||||
|
||||
.menu ul li { padding: .25em 0em;}
|
||||
|
||||
}
|
||||
|
||||
.menu ul { /* The menu bar background across screen */
|
||||
background: #4D4D4D; /* HPR Grey */
|
||||
color: white;
|
||||
padding: 0 10px; /* Keeps sub menus to the left */
|
||||
list-style: none;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
display: inline-table;
|
||||
}
|
||||
|
||||
.menu ul:after { /* Forces the dropdown to be a block with non float */
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu ul li {
|
||||
background: #4D4D4D; /* HPR Grey */
|
||||
color: white;
|
||||
float: left;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
.menu ul li a {
|
||||
background: #4D4D4D; /* HPR Grey */
|
||||
color: white;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu ul ul {
|
||||
background: #4D4D4D; /* HPR Grey */
|
||||
color: white;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu ul ul li {
|
||||
background: #4D4D4D; /* HPR Grey */
|
||||
header > nav.menu ul {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
background-color: inherit;
|
||||
color: white;
|
||||
float: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu ul ul ul {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top:0;
|
||||
header > nav.menu ul li {
|
||||
display: inline-block;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-right: clamp(0.5rem, -0.25rem + 3vw , 2.5rem);
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
background: #4D4D4D; /* HPR Grey */
|
||||
border: 0;
|
||||
height: 0.25em;
|
||||
}
|
||||
|
||||
/* The multi colum footer layout */
|
||||
|
||||
#footer_page {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.column {
|
||||
width:12%;
|
||||
background-color: white;
|
||||
color: #4D4D4D; /* HPR Grey */
|
||||
float:left;
|
||||
margin:0 10px;
|
||||
header > nav.menu ul li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.column li {
|
||||
list-style:none;
|
||||
padding: .25em 0em;
|
||||
font-size: 85%;
|
||||
header > nav.menu ul li a:hover {
|
||||
border-bottom: thin solid white;
|
||||
padding: 0.15rem 0;
|
||||
-webkit-transition: 0.3s ease-in-out color;
|
||||
-moz-transition: 0.3s ease-in-out color;
|
||||
transition: 0.3s ease-in-out color;
|
||||
}
|
||||
|
||||
.thick_bar {
|
||||
width:100%;
|
||||
background-color: #4D4D4D; /* HPR Grey */
|
||||
color: white;
|
||||
float:left;
|
||||
clear: both;
|
||||
height:1.5em;
|
||||
padding: .5em 0em .5em 0em;
|
||||
font-size: 1em;
|
||||
margin: 1em 0em 1em 0em;
|
||||
header > nav.menu ul li a:visited{
|
||||
color: #EDEDED;
|
||||
}
|
||||
|
||||
#more_info {margin: auto;}
|
||||
nav.column { display: block; padding: 0em 1em 0em 1em;}
|
||||
#copyright {
|
||||
font-size: small;
|
||||
width:100%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
article, #copyright p {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
audio {padding: .7em 0em .5em 0em; clear: both; position: relative; z-index:auto;}
|
||||
.audcredit { font-size: 75%;margin-bottom: 1em;}
|
||||
h1.showtitle { font-size: 125%;}
|
||||
|
||||
/* Full Index Page styling */
|
||||
#index_full h2.title {
|
||||
font-weight: lighter;
|
||||
margin-bottom: -.5em;
|
||||
padding: .5em 0em 0em 0em;
|
||||
font-size: 110%;}
|
||||
|
||||
#index_full p.meta {font-size: 85%;}
|
||||
|
||||
#small {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
p.author { font-size: 85%;}
|
||||
p.shownotes { padding: .5em;}
|
||||
#maincontent footer p { /* font-size: 75%; */ margin-bottom: 1em;}
|
||||
/* link styling */
|
||||
a:link {text-decoration: none;}
|
||||
|
||||
table {
|
||||
width:100%;
|
||||
}
|
||||
table, th, td {
|
||||
border-collapse: collapse;
|
||||
padding: 2px;
|
||||
text-align: left;
|
||||
}
|
||||
table#t01, table#t01 th, table#t01 td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
table#t01 th, table#t01 td {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
table#t01 tr:nth-child(even) {
|
||||
background-color: #eee;
|
||||
}
|
||||
table#t01 tr:nth-child(odd) {
|
||||
background-color:#fff;
|
||||
}
|
||||
table#t01 th {
|
||||
background-color: #4D4D4D;
|
||||
color: white;
|
||||
a:active,
|
||||
header > nav.menu ul li a:active {
|
||||
color: red;
|
||||
}
|
||||
|
||||
pre { /* Add background, border and scrollbar to <pre> */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user