<style>
/* vars */
/* hide show mixin */
/* globalstyles */
.menu {
background: #035e8d;
border-radius: 5px;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu,
.menu a {
color: #e2e2e2;
text-decoration: none;
}
.menu a {
display: block;
white-space: nowrap;
}
.menu-dropdown,
.menu input[type=checkbox] {
display: none;
}
.menu label:hover {
cursor: pointer;
}
/* narrow styles */
@media screen and (max-width: 1024px) {
.menu > ul,
.menu-righticon {
display: none;
}
input[type=checkbox]:checked + ul {
display: block;
-webkit-animation: grow 0.5s ease-in-out;
animation: grow 0.5s ease-in-out;
}
}
/* large styles */
@media screen and (min-width: 1025px) {
.menu > label,
input[type=checkbox] {
display: none;
}
.menu a {
padding: 5px 15px;
}
.menu > ul > li {
display: inline-block;
}
.menu-hasdropdown {
position: relative;
}
.menu-hasdropdown:hover > ul {
display: block;
-webkit-animation: grow 0.5s ease-in-out;
animation: grow 0.5s ease-in-out;
}
.menu-hasdropdown > ul {
position: absolute;
top: 100%;
left: 0;
background: #035e8d;
}
.menu-hasflyout > ul {
left: 100%;
top: 0;
}
.menu-hasflyout .menu-downicon {
display: none;
}
}
/* look and feel only, not needed for core menu*/
@-webkit-keyframes grow {
0% {
display: none;
opacity: 0;
}
50% {
display: block;
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes grow {
0% {
display: none;
opacity: 0;
}
50% {
display: block;
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.menu-dropdown a {
padding: 5px 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* narrow*/
@media screen and (max-width: 1024px) {
.menu > label {
background: e2e2e2;
display: block;
padding: 5px 15px;
text-align: centre;
}
.menu a {
padding: 5px 15px;
}
.menu > ul i {
float: right;
padding: 5px 5px;
background: #012c42;
}
.menu-dropdown a {
background: #024d74;
}
.menu-hasflyout > ul a {
background: #023d5b;
}
}
@media screen and (min-width: 1025px) {
.menu {
max-width: 1024px;
margin: 0 auto;
}
}
</style>