Twenty Fourteen: enhance main navigation usability by adding in visual indicators for existence of submenu items. Props binarymoon, iamtakashi. Fixes #26200.

Built from https://develop.svn.wordpress.org/trunk@26587


git-svn-id: http://core.svn.wordpress.org/trunk@26477 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2013-12-03 20:51:10 +00:00
parent c72bcbe38e
commit 3d89dbb71f
2 changed files with 85 additions and 3 deletions

View File

@ -533,7 +533,7 @@ td {
.primary-navigation { .primary-navigation {
float: left; float: left;
margin: 0 -10px 0 1px; margin: 0 -12px 0 1px;
} }
.primary-navigation ul ul { .primary-navigation ul ul {
@ -559,6 +559,32 @@ td {
right: 100%; right: 100%;
left: auto; left: auto;
} }
.primary-navigation .menu-item-has-children > a,
.primary-navigation .page_item_has_children > a {
padding-right: 12px;
padding-left: 26px;
}
.primary-navigation .menu-item-has-children > a:after,
.primary-navigation .page_item_has_children > a:after {
right: auto;
left: 12px;
}
.primary-navigation li .menu-item-has-children > a,
.primary-navigation li .page_item_has_children > a {
padding-right: 12px;
padding-left: 20px;
}
.primary-navigation .menu-item-has-children li > a:after,
.primary-navigation .page_item_has_children li > a:after {
border-right-color: #fff;
border-left-color: transparent;
right: auto;
left: 8px;
}
} }
@media screen and (min-width: 810px) { @media screen and (min-width: 810px) {
@ -660,6 +686,18 @@ td {
left: auto; left: auto;
} }
.secondary-navigation .menu-item-has-children > a {
padding-right: 30px;
padding-left: 38px;
}
.secondary-navigation .menu-item-has-children > a:after {
border-right-color: #fff;
border-left-color: transparent;
right: auto;
left: 26px;
}
.footer-sidebar .widget { .footer-sidebar .widget {
float: right; float: right;
} }

View File

@ -3316,7 +3316,7 @@ a.post-thumbnail:hover {
.primary-navigation { .primary-navigation {
float: right; float: right;
font-size: 11px; font-size: 11px;
margin: 0 1px 0 -10px; margin: 0 1px 0 -12px;
padding: 0; padding: 0;
text-transform: uppercase; text-transform: uppercase;
} }
@ -3347,7 +3347,7 @@ a.post-thumbnail:hover {
.primary-navigation a { .primary-navigation a {
display: inline-block; display: inline-block;
padding: 0 10px; padding: 0 12px;
white-space: nowrap; white-space: nowrap;
} }
@ -3399,6 +3399,36 @@ a.post-thumbnail:hover {
.primary-navigation ul ul li.focus > ul { .primary-navigation ul ul li.focus > ul {
left: 100%; left: 100%;
} }
.primary-navigation .menu-item-has-children > a,
.primary-navigation .page_item_has_children > a {
padding-right: 26px;
}
.primary-navigation .menu-item-has-children > a:after,
.primary-navigation .page_item_has_children > a:after {
border: 4px solid transparent;
border-top-color: #fff;
content: "";
margin-top: -2px;
position: absolute;
top: 50%;
right: 12px;
}
.primary-navigation li .menu-item-has-children > a,
.primary-navigation li .page_item_has_children > a {
padding-right: 20px;
width: 168px;
}
.primary-navigation .menu-item-has-children li > a:after,
.primary-navigation .page_item_has_children li > a:after {
border-top-color: transparent;
border-left-color: #fff;
margin-top: -4px;
right: 8px;
}
} }
@media screen and (min-width: 810px) { @media screen and (min-width: 810px) {
@ -3602,6 +3632,20 @@ a.post-thumbnail:hover {
left: 162px; left: 162px;
} }
.secondary-navigation .menu-item-has-children > a {
padding-right: 38px;
}
.secondary-navigation .menu-item-has-children > a:after {
border: 4px solid transparent;
border-left-color: #fff;
content: "";
margin-top: -4px;
position: absolute;
top: 50%;
right: 26px;
}
.footer-sidebar .widget, .footer-sidebar .widget,
.primary-sidebar .widget { .primary-sidebar .widget {
font-size: 12px; font-size: 12px;