استایل زیبا برای منو - Responsive Navigation Ideas (نمونه 1) : از چپ به راست

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 #1

*/

.style-1 .nav {

  -webkit-transform: translateX(-100%);

          transform: translateX(-100%);

  width: 100%;

  height: 100%;

}

.style-1 .nav__link {

  opacity: 0;

  -webkit-transition-delay: 500ms;

          transition-delay: 500ms;

}

.style-1 .nav--active .nav__link {

  opacity: 1;

}

.style-1 .nav--active .nav {

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

  transition: all 300ms ease-in-out;

  -webkit-transform: translateX(0);

          transform: translateX(0);

}

.style-1 .nav--active .nav__icon {

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

}

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

  margin-top: 0;

  -webkit-transform: rotate(45deg);

          transform: rotate(45deg);

}

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

  margin-top: 0;

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

          transform: rotate(-45deg);

}