/* Styles for mixed menu (drop-down + social) */
.nav-mixed {
display: flex;
background: hsl(0, 0%, 15%);
flex-wrap: wrap;
justify-content: space-between;
}
@media screen and (max-width: 30em){
.multi-level-nav ul ul li a {
padding-left: 2em;
}
.dropdown-toggle {
display: none;
}
}
@media screen and (min-width: 30em){
.multi-level-nav ul {
display: flex;
flex-wrap: wrap;
}
.multi-level-nav li {
flex: 1 0 auto;
position: relative;
}
li.has-children > a {
padding-right: 0;
}
.multi-level-nav ul ul {
display: none;
position: absolute;
z-index:100;
}
.multi-level-nav ul ul li {
flex: 1 1 auto;
}
.multi-level-nav ul .toggled-on {
display: flex;
}
.dropdown-toggle {
margin: 0;
padding: 0 .5em;
border: 0;
font-family: 'FontAwesome';
content: "";
text-transform: lowercase; /* Stop screen readers to read the text as capital letters */
background-color: transparent;
}
.dropdown-toggle:after {
position: relative;
top: 0;
left: 0;
width: 42px;
color: white;
content: "\f107";
line-height: 1em;
}
.dropdown-toggle:hover,
.dropdown-toggle:focus {
background: hsl(0, 0%, 25%);
}
.dropdown-toggle.toggle-on:after {
content: "\f106";
}
}
.social-menu li a:before {
font-family: 'Fontawesome';
-webkit-font-smoothing: antialiased;
content: '\f08e';
}
.social-menu li a[href*="dribbble.com"]::before { content: '\f17d'; }
.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
.social-menu li a[href*="foursquare.com"]::before { content: '\f180'; }
.social-menu li a[href*="github.com"]::before { content: '\f09b'; }
.social-menu li a[href*="plus.google.com"]::before { content: '\f0d5'; }
.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }
.social-menu li a[href*="jsfiddle.com"]::before { content: '\f1cc'; }
.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }
.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }
.social-menu li a[href*="reddit.com"]::before { content: '\f1a1'; }
.social-menu li a[href*="soundcloud.com"]::before { content: '\f1be'; }
.social-menu li a[href*="stackoverflow.com"]::before { content: '\f16c'; }
.social-menu li a[href*="tumblr.com"]::before { content: '\f173'; }
.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }
.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }
.social-menu li a[href*="vine.co"]::before { content: '\f1ca'; }
.social-menu li a[href*="yelp.com"]::before { content: '\f1e9'; }
.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }
.social-menu li a[href*="wordpress.com"]::before { content: '\f19a'; }
/* Flexbox stuff */
.social-menu ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Base styles that apply to all menus */
.menu-section {
padding-bottom: 2em;
margin-bottom: 2em;
border-bottom: 1px solid hsl(0, 0%, );
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
background: hsl(0, 0%, 15%);
}
.menu li a {
display: block;
text-decoration: none;
color: white;
padding: .6em 1em;
}
.menu li a:hover {
background: hsl(0, 0%, 25%);
}
new Vue({
el:'#app',
data: {
toggleOnOff: false,
selected: 'food'
},
computed:{
onToggle(){
return {'on-toggle':this.toggleOnOff}
},
subMenu(){
return this.toggleOnOff === true ? 'toggled-on' : false
},
ariaExpanded(){
return !this.toggleOnOff ? 'true' : 'false'
}
},
methods:{
toggleOn(selected){
this.selected = selected
this.toggleOnOff = !this.toggleOnOff
}
}
})
No comments:
Post a Comment