استایل زیبا برای منو - Responsive Navigation Ideas (نمونه 5) : باز شدن از گوشه بالا

body {

background: #1BBC9B;

font-family: 'Montserrat', sans-serif;

}

.container {

text-align: center;

}

h1 {

color: #117964;

font-weight: 400;

font-size: 2em;

margin: 1em 0;

}

/**

* iPhone

* Credits: Flat, Scaleable CSS iPhone Illustration by Tom Hergenreter

* http://codepen.io/TomHergenreter/details/qDywF/

*/

.iphone {

width: 16.06em;

height: 30.6em;

border-radius: 1.875em;

margin: 2em;

position: relative;

display: inline-block;

background: #fff;

}

.iphone__item {

width: 16.06em;

height: 1em;

position: absolute;

bottom: -2em;

color: #158f76;

text-align: center;

}

.iphone__power-btn {

width: 2.188em;

height: .188em;

background: #e0e0e0;

position: absolute;

right: 2.5em;

top: -0.188em;

}

.iphone__left-btn {

width: .188em;

height: 1.250em;

top: 3.250em;

left: -0.188em;

position: absolute;

background: #e0e0e0;

}

.iphone__left-btn:before {

content: '';

width: .188em;

height: .875em;

position: absolute;

top: 3em;

background: #e0e0e0;

}

.iphone__left-btn:after {

content: '';

width: .188em;

height: .875em;

position: absolute;

top: 5.5em;

background: #e0e0e0;

}

.iphone__details {

width: .438em;

height: .438em;

border-radius: 100%;

position: relative;

top: 1.313em;

left: 8em;

background: #7c7c7c;

}

.iphone__details:before {

content: '';

width: 2.5em;

height: .25em;

border-radius: .25em;

position: absolute;

top: 1em;

left: -1em;

background: #7c7c7c;

}

.iphone__home-btn {

width: 2.25em;

height: 2.25em;

border-radius: 100%;

position: absolute;

bottom: 1em;

right: 6.75em;

background: #f7f7f7;

}

.iphone__home-btn:before {

content: '';

width: .813em;

height: .813em;

border: .15em solid #a8a8a8;

border-radius: .2em;

position: absolute;

top: .6em;

left: .57em;

}

.iphone__screen {

width: 14.5em;

height: 22.938em;

position: absolute;

top: 3.75em;

left: .750em;

overflow: hidden;

}

.iphone__content {

position: relative;

background-color: #D2527F;

width: 100%;

height: 100%;

}

/**

* Navigation Defaults

*/

.nav {

position: absolute;

z-index: 100;

opacity: 0;

-webkit-transition-property: all;

transition-property: all;

-webkit-transition-duration: 300ms;

transition-duration: 300ms;

}

.nav--active .nav {

opacity: 1;

background-color: #333;

}

.nav__list {

margin: 0;

padding: 10px;

}

.nav__item {

list-style-type: none;

text-align: left;

}

.nav__link {

font-size: 1.3em;

text-transform: uppercase;

text-decoration: none;

color: #FFFFFF;

opacity: 1;

-webkit-transition: opacity 300ms ease-in-out;

transition: opacity 300ms ease-in-out;

}

/* Default navigation icon */

.nav__trigger {

display: block;

position: absolute;

width: 30px;

height: 25px;

right: 10px;

top: 10px;

z-index: 200;

}

.nav--active .nav__trigger {

opacity: 0.5;

}

.nav__icon {

display: inline-block;

position: relative;

width: 30px;

height: 5px;

background-color: #FFFFFF;

-webkit-transition-property: background-color, -webkit-transform;

transition-property: background-color, -webkit-transform;

transition-property: background-color, transform;

transition-property: background-color, transform, -webkit-transform;

-webkit-transition-duration: 300ms;

transition-duration: 300ms;

}

.nav__icon:before,

.nav__icon:after {

content: '';

display: block;

width: 30px;

height: 5px;

position: absolute;

background: #FFFFFF;

-webkit-transition-property: margin, -webkit-transform;

transition-property: margin, -webkit-transform;

transition-property: margin, transform;

transition-property: margin, transform, -webkit-transform;

-webkit-transition-duration: 300ms;

transition-duration: 300ms;

}

.nav__icon:before {

margin-top: -10px;

}

.nav__icon:after {

margin-top: 10px;

}

/* Don't nest if you don't have to. */

/**

* Style #5

*/

.style-5 .nav {

-webkit-transform: translate(100%, -100%) scale(0.5);

transform: translate(100%, -100%) scale(0.5);

border-radius: 100%;

}

.style-5 .nav--active .nav {

-webkit-transform: translateY(0) scale(1);

transform: translateY(0) scale(1);

border-radius: 0;

width: 100%;

height: 100%;

}

.style-5 .nav__link {

opacity: 0;

-webkit-transition-delay: 500ms;

transition-delay: 500ms;

}

.style-5 .nav--active .nav__link {

opacity: 1;

}

.style-5 .nav--active .nav__icon {

background: rgba(0, 0, 0, 0);

}

.style-5 .nav--active .nav__icon:before {

margin-top: 0;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

.style-5 .nav--active .nav__icon:after {

margin-top: 0;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

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