*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
color: #444;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: #4e3c3e;
outline: none;
}
a:hover,
a:focus {
color: #f48b95;
}
#container {
width: 600px;
margin: 100px auto;
}
/* Common styles for all menus */
.menu {
line-height: 1;
margin: 0 auto 3em;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu__link:hover,
.menu__link:focus {
outline: none;
}
/* Individual styles */
/* Juliet Styles */
.menu--juliet .menu__item {
position: relative;
-webkit-transition: color .25s;
transition: color .25s;
}
.menu--juliet .menu__item::before,
.menu--juliet .menu__item::after,
.menu--juliet .menu__item--current::before,
.menu--juliet .menu__item--current::after {
position: absolute;
left: 50%;
width: 0;
height: 0;
border: solid transparent;
content: '';
pointer-events: none;
}
.menu--juliet .menu__item::before,
.menu--juliet .menu__item::after {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: left left;
transform-origin: left left;
-webkit-transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu--juliet .menu__item--current::before,
.menu--juliet .menu__item--current::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu--juliet .menu__item:hover::before,
.menu--juliet .menu__item:hover::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu--juliet .menu__item::before {
top: 95%;
margin-left: -9px;
border-width: 10px;
border-top-color: #b5b5b5;
}
.menu--juliet .menu__item--current::before {
margin-left: -9px;
border-width: 10px;
border-top-color: #d94f5c;
}
.menu--juliet .menu__item::after,
.menu--juliet .menu__item--current::after {
top: 94%;
margin-left: -5px;
border-width: 6px;
border-top-color: #2a282b;
}
.menu--juliet .menu__link {
position: relative;
margin: 0 1em;
padding-right: 0;
padding-left: 0;
color: #b5b5b5;
-webkit-transition: color 0.4s;
transition: color 0.4s;
}
.menu--juliet .menu__item--current .menu__link,
.menu--juliet .menu__item--current .menu__link:hover,
.menu--juliet .menu__item--current .menu__link:focus {
color: #d94f5c;
}
.menu--juliet .menu__item--current .menu__link::after,
.menu--juliet .menu__item--current .menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.menu--juliet .menu__item--current .menu__link::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.menu--juliet .menu__link:hover,
.menu--juliet .menu__link:focus {
color: #b5b5b5;
}
.menu--juliet .menu__item:hover .menu__link::before,
.menu--juliet .menu__item:focus .menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.menu--juliet .menu__link::before,
.menu--juliet .menu__link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: center left;
transform-origin: center left;
-webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu--juliet .menu__link::before {
background: #b5b5b5;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.menu--juliet .menu__link::after {
background: #d94f5c;
}
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 220