استایل زیبا برای منوی خطی - Line Menu ( نمونه 20)

*,

*: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: 700px;

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 */

/* Titania (by @rileyjshaw) */

.menu--titania .menu__item {

margin: 0;

}

.menu--titania .menu__link {

width: 120px;

height: 3em;

text-align: center;

color: #b5b5b5;

-webkit-transition: color 0.3s 0.2s;

transition: color 0.3s 0.2s;

}

.menu--titania .menu__link:hover,

.menu--titania .menu__link:focus {

color: #929292;

}

.menu--titania .menu__item--current .menu__link {

color: #d94f5c;

-webkit-transition: color 0.7s 0.2s;

transition: color 0.7s 0.2s;

}

.menu--titania .menu__lines {

position: absolute;

top: 0;

left: 0;

width: 120px;

height: 100%;

pointer-events: none;

border: 2px solid #d94f5c;

border-width: 2px 0;

-webkit-transition: -webkit-transform 0.5s 0.2s;

transition: transform 0.5s 0.2s;

-webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);

-webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);

transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);

}

/* vertical lines */

.menu--titania .menu__lines::before,

.menu--titania .menu__lines::after {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border: 2px solid #d94f5c;

border-width: 0 2px;

-webkit-transform-origin: 0% 50%;

transform-origin: 0% 50%;

}

/* animates out at transition start */

.menu--titania .menu__lines::before {

-webkit-transform: scale3d(1, 0, 1);

transform: scale3d(1, 0, 1);

-webkit-transition: -webkit-transform 0.2s ease;

transition: transform 0.2s ease;

}

/* animates back in at transition end */

.menu--titania .menu__lines::after {

-webkit-transform: scale3d(1, 1, 1);

transform: scale3d(1, 1, 1);

-webkit-transition: -webkit-transform 0.2s ease 0.7s;

transition: transform 0.2s ease 0.7s;

}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::before,

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::after {

-webkit-transition: -webkit-transform 0s;

transition: transform 0s;

}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::before {

-webkit-transform: scale3d(1, 1, 1);

transform: scale3d(1, 1, 1);

}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::after {

-webkit-transform: scale3d(1, 0, 1);

transform: scale3d(1, 0, 1);

}

.menu--titania .menu__item:nth-child(1).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.menu--titania .menu__item:nth-child(2).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(100%, 0, 0);

transform: translate3d(100%, 0, 0);

}

.menu--titania .menu__item:nth-child(3).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(200%, 0, 0);

transform: translate3d(200%, 0, 0);

}

.menu--titania .menu__item:nth-child(4).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(300%, 0, 0);

transform: translate3d(300%, 0, 0);

}

.menu--titania .menu__item:nth-child(5).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(400%, 0, 0);

transform: translate3d(400%, 0, 0);

}

@media screen and (max-width:55em) {

.menu--titania .menu__lines {

height: 20%;

border-width: 0 2px;

}

/* horizontal lines */

.menu--titania .menu__lines::before,

.menu--titania .menu__lines::after {

border-width: 2px 0;

-webkit-transform-origin: 50% 0%;

transform-origin: 50% 0%;

}

.menu--titania .menu__lines::before {

-webkit-transform: scale3d(0, 1, 1);

transform: scale3d(0, 1, 1);

}

.menu--titania .menu__item:active:not(.menu__item--current) ~ .menu__lines::after {

-webkit-transform: scale3d(0, 1, 1);

transform: scale3d(0, 1, 1);

}

.menu--titania .menu__item:nth-child(1).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.menu--titania .menu__item:nth-child(2).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(0, 100%, 0);

transform: translate3d(0, 100%, 0);

}

.menu--titania .menu__item:nth-child(3).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(0, 200%, 0);

transform: translate3d(0, 200%, 0);

}

.menu--titania .menu__item:nth-child(4).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(0, 300%, 0);

transform: translate3d(0, 300%, 0);

}

.menu--titania .menu__item:nth-child(5).menu__item--current ~ .menu__lines {

-webkit-transform: translate3d(0, 400%, 0);

transform: translate3d(0, 400%, 0);

}

}

سون لرن • آموزش...