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.

Google Material Design’ın kullandığı yazıtipi Roboto. Bu tasarımda da Roboto yazı tipi kullanılmakta.

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?

Google Material Design Menu