Menu: Add html5 nav element to menu

refs #7933
This commit is contained in:
Marius Hein 2015-02-12 13:13:00 +01:00
parent 53818f50c6
commit b6daf2237d
3 changed files with 19 additions and 18 deletions

View File

@ -10,6 +10,7 @@ use Icinga\Web\Widget\SearchDashboard;
/> />
</form> </form>
<? endif; ?> <? endif; ?>
<nav>
<h1 id="navigation" class="sr-only"><?= t('Navigation'); ?></h1> <h1 id="navigation" class="sr-only"><?= t('Navigation'); ?></h1>
<?= $menuRenderer; ?> <?= $menuRenderer; ?>
</nav>

View File

@ -61,7 +61,7 @@ class MenuRenderer extends RecursiveIteratorIterator
*/ */
public function beginIteration() public function beginIteration()
{ {
$this->tags[] = '<ul role="navigation">'; $this->tags[] = '<ul>';
} }
/** /**

View File

@ -27,55 +27,55 @@
margin-left: 0.0em; margin-left: 0.0em;
} }
#menu > ul > li > ul { #menu > nav > ul > li > ul {
display: none; display: none;
padding-left: 6px; padding-left: 6px;
} }
.no-js #menu > ul > li > ul { .no-js #menu > nav > ul > li > ul {
display: block; display: block;
} }
#menu > ul > li.active > ul { #menu > nav > ul > li.active > ul {
display: block; display: block;
} }
#menu > ul > li.active { #menu > nav > ul > li.active {
background-color: white; background-color: white;
padding-left: 0.0em; padding-left: 0.0em;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
#menu > ul > li > a { #menu > nav > ul > li > a {
font-size: 0.9em; font-size: 0.9em;
text-shadow: none; text-shadow: none;
} }
#menu > ul > li.active > a { #menu > nav > ul > li.active > a {
color: @colorTextDefault; color: @colorTextDefault;
text-shadow: none; text-shadow: none;
} }
#menu > ul > li.active li.active a { #menu > nav > ul > li.active li.active a {
color: @colorPetrol; color: @colorPetrol;
} }
#menu > ul > li.active li a:hover { #menu > nav > ul > li.active li a:hover {
text-decoration: underline; text-decoration: underline;
} }
#menu > ul > li { #menu > nav > ul > li {
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;
} }
#menu > ul > li li { #menu > nav > ul > li li {
font-size: 0.8em; font-size: 0.8em;
padding-left: 1.6em; padding-left: 1.6em;
} }
/* Collapsed menu item color */ /* Collapsed menu item color */
#menu > ul > li > a { #menu > nav > ul > li > a {
color: @colorTextDefault; color: @colorTextDefault;
} }
@ -110,11 +110,11 @@
padding-bottom: 1em; padding-bottom: 1em;
} }
#menu > ul > li { #menu > nav > ul > li {
margin-left: 5px; margin-left: 5px;
} }
#menu > ul > li.active { #menu > nav > ul > li.active {
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -262,7 +262,7 @@ a:focus {
/* Displaying the outline in the navigation is not possible because of the messed up link borders, /* Displaying the outline in the navigation is not possible because of the messed up link borders,
color those links instead. */ color those links instead. */
#menu a:focus, #menu a:focus,
#menu > ul > li > a:focus, #menu > nav > ul > li > a:focus,
#menu .active ul li a:focus { #menu .active ul li a:focus {
color: #21b5ad; color: #21b5ad;
outline: none; outline: none;