Google Material Design Menu

Google‘ın ses getiren tasarım trendi Material Design üzerine konuşmaya devam ediyoruz. Bugün Bennett Feely tarafından CSS ile hazırlanan menü örneğini sizlerle paylaşacağız.

Bennett’in örneği Material Design’ın estetik ve animatif tarafını başarılı bir şekilde yansıtmakta.

Web öğelerinin sadece spesifik kısımlarını CSS ile göstermemizi sağlayan clip-path tanımı da bu tasarımda faydalı bir şekilde kullanılmakta.

Eğer hazırsanız başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

Material Design Menu

Hazırlayacağımız tasarım JavaScript içermiyor. Hatta ihtiyaç duyduğu CSS tanımları da çok fazla sayılmaz. Ancak clip-path ve transform-origin’in yanısıra :before ve :after tanımlarını içermekte. Bu yüzden dersin derecesini ‘zor’ olarak işaretlemeyi uygun gördük.

Web sayfanıza Türkçe karakter destekli Roboto yazıtipini eklemek istiyorsanız CSS kodlarınızın en üstüne aşağıdaki satırı eklemeniz yeterli.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext);

Daha sonra da aşağıdaki şekilde fontu kullanabilirsiniz.

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

Şimdi gelelim bu menü örneğinin nasıl hazırlandığına.

HTML Kodları

Bir nav öğesi içerisine menümüzü hazırlayalım.

<nav class="material">
  <div class="navicon">
  <div></div>
  </div>
  <a>Home</a>
  <a>Notifications</a>
  <a>Messages</a>
  <a>Profile</a>
  <a>Settings</a>
</nav>

CSS Kodları

Material Design’ın ruhunu taşayan bir arkaplan ve yazıtipi kullanmanızı önermiştik. Mesela şöyle bir body tanımı işinizi kolaylaştırabilir.

body {
  font: 100% 'Roboto';
  background: #303f9f;
}

Şimdi de nav öğemiz için kırpma işlemini yapıp genel önyüzü oluşturacak tanımları girelim.

nav.material {
  width: 300px;
  background: white;
  color: rgba(0, 0, 0, 0.87);
  -webkit-clip-path: circle(24px at 30px 24px);
  clip-path: circle(24px at 32px 24px);
  -webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
          transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
}

Nav öğesi hover edildiğinde ne olacak?

nav.material:hover {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-duration: 0.75s;
          transition-duration: 0.75s;
  -webkit-clip-path: circle(390px at 225px 24px);
  clip-path: circle(390px at 150px 24px);
}

Linklerimizi stilize edelim.

nav.material a {
  display: block;
  line-height: 50px;
  padding: 0 20px;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
nav.material a:hover {
  background: #ffe082;
}
nav.material a:active {
  background: #ffca28;
}

Aç/kapa düğmemiz.

.navicon {
  padding: 23px 20px;
  cursor: pointer;
  -webkit-transform-origin: 32px 24px;
      -ms-transform-origin: 32px 24px;
          transform-origin: 32px 24px;
}

Ve yine aç/kapa düğmesinin detayları :

.navicon div {
  position: relative;
  width: 20px;
  height: 2px;
  background: rgba(0, 0, 0, 0.87);
}
.navicon div:before, .navicon div:after {
  display: block;
  content: "";
  width: 20px;
  height: 2px;
  background: rgba(0, 0, 0, 0.87);
  position: absolute;
}
.navicon div:before {
  top: -7px;
}
.navicon div:after {
  top: 7px;
}

Bu kadar.

Yorumlarınız

Uzun bir süre minimalist yapıdaki tasarım öğelerini konuştuktan sonra bu yapıyı bol animasyonla süsleyen Material Design anakonumuz olur hale geldi.

Peki ya siz Material Design hakkında neler düşünüyorsunuz?