Google Material Design Menu #2

Google‘ın tasarım devrimi üzerine konuşmaya devam ediyoruz. Material Design’ın günden güne web tarafına uyarlanan örnekleri bizim makalelerimizde de yerini buluyor. Daha önce buradaki makalemizde şık bir Material Design menü örneği hazırlamıştık.

Şimdi de ekranın büyük bir kısmını kaplayan, daha büyük yapıdaki bir başka menü tasarımı konu edeceğiz. HTML5, CSS3 ve jQuery desteğiyle hazırlayacağımız bu tasarım soğuk renklerden oluşuyor.

Bu makalemizde üzerine tıklandığında büyük ölçülerde açılan ve içeriği aksi yöne ittiren şık bir menü tasarımı hazırlayacağız. İkinci Material Design menü örneğiyle sizlerleyiz!

ÖRNEĞİ GÖRÜNTÜLE

Material Design Tam Ekran Menu

Tahmin edeceğiniz gibi tekniğimiz, öğeleri gizleyip, belirli aralıklarla gözükür hale getirmek üzerine kurulur. Burada işin perde kısmını CSS, fonksiyonelitesini de jQuery oluşturuyor. İskelet üzerine HTML üzerine kurulu. Arjan Jassal tarafından hazırlanmış bu örnek kolay ve hızlı navigasyonu sağlıyor. İlk olarak HTML tarafında yapımızı oluşturalım.

HTML Kodları

İlk olarak menüyü oluşturacak kodları hazırlayalım.

<div class="material-menu-wrapper">
  <div class="material-menu">
    <div class="material-btn">
      <div class="material-hamburger">
        <div class="material-patty"></div>
        <div class="material-patty"></div>
        <div class="material-patty"></div>
      </div>
    </div>
    <div class="material-content">
      <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Work</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Şimdi de main elemanı içerisine birkaç satır yazı ekleyelim.

<main>
  <span>The difference between a master and beginner is that the master has failed more times than the beginner has even tried. </span>
</main>

CSS Kodları

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.

İlk olarak box-sizing tanımlamamız ile başlıyoruz. Böylece ölçeklendirme ile ilgili her türden sorunu engelliyoruz.

* {
  box-sizing: border-box;
}

Şimdi de arkaplan için soğuk bir renk belirtelim. Overflow tanımı ile de scroll öğelerini gizliyoruz.

body {
  font-family: 'Roboto', 'Arial', sans-serif;
  height: 100vh;
  background: #03a9f4;
  overflow: hidden;
}

Geriye kalan menü tanımlamalarımız ile devam edelim.

.material-menu-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100vh;
  width: 40vw;
  overflow: hidden;
}

.material-menu {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
}

.material-btn {
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
  z-index: 1;
  bottom: 20px;
  right: 20px;
  width: 75px;
  height: 75px;
  background: transparent;
  cursor: pointer;
}
.material-btn.active:before {
  transform: scale(18);
}
@media (min-height: 800px) {
  .material-btn.active:before {
    transform: scale(25);
  }
}
.material-btn:active:before {
  opacity: 0.75;
}
.material-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 75px;
  height: 75px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
  cursor: pointer;
  transform-origin: center 70%;
  transform: scale(1);
  transition: all 0.35s ease-out;
}

.material-content {
  padding: 10% 15%;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
}

Icon tıklandığında açılacak navigasyonu stilize edelim.

nav ul {
  list-style-type: none;
  padding: 0;
  text-align: right;
}
nav li {
  will-change: transform, opacity;
  margin: 20px 0;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s ease-out;
}
nav li.active {
  transform: translateY(0);
  opacity: 1;
}
nav li:nth-child(1) {
  transition-delay: 0.1s;
}
nav li:nth-child(2) {
  transition-delay: 0.2s;
}
nav li:nth-child(3) {
  transition-delay: 0.3s;
}
nav li:nth-child(4) {
  transition-delay: 0.4s;
}
nav a {
  text-decoration: none;
  font-size: 5vw;
  color: #03a9f4;
  font-weight: 300;
}

Material Design’ın hamburger iconunu hazırlayalım.

.material-hamburger {
  transition: all .3s ease-out;
}
.material-hamburger .material-patty {
  will-change: transform, opacity;
  width: 32px;
  height: 3px;
  margin: 0 0 6px 0;
  background: #333333;
  opacity: 1;
  transform: translate(0) rotate(0deg);
  transition: all .2s ease-out;
}
.material-hamburger .material-patty:last-child {
  margin-bottom: 0;
}
.material-hamburger.material-close {
  transform: rotate(-180deg);
}
.material-hamburger.material-close .material-patty:nth-child(1) {
  transform: translate(-10px, 4px) rotate(-45deg) scale(0.5, 1);
}
.material-hamburger.material-close .material-patty:nth-child(3) {
  transform: translate(-10px, -4px) rotate(45deg) scale(0.5, 1);
}

Sol tarafa atadığımız içeriği şekillendirelim.

main {
  will-change: transform, opacity;
  width: 80vw;
  height: 100vw;
  padding: 10vw;
  overflow: hidden;
  transition: all .35s ease-out;
}
main.active {
  opacity: .2;
  transform: translate(-300px, 0px);
}
main span {
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  font-size: 4vw;
}

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Son olarak menüye jQuery tanımlarımızı ekleyelim. openMenu ve closeMenu fonksiyonlarıyla başlayalım.

var circle = $('.material-btn');
var link = $('.material-content').find('li');
var ham = $('.material-hamburger');
var main = $('main');
var win = $(window);

function openMenu() {
  circle.toggleClass('active');
  link.toggleClass('active');
  ham.toggleClass('material-close');
  main.toggleClass('active');
  
  return false;
}

function closeMenu() {
    circle.removeClass('active');
    link.removeClass('active');
    ham.removeClass('material-close');
    main.removeClass('active');
}

circle.on('click', openMenu);
win.on('click', closeMenu)

Bu kadar.

Yorumlarınız

Bu şık Material Design menü tasarımı hakkında ne düşünüyorsunuz?