Material Design NavMenu

Uzun süredir ilk defa bir günde üç tane yazı yayınlayabildim. Artık uzun uzun konuşmak yerine örneğe  ait görseli, kodları ve linkleri vermek daha mantıklı geldi. Zaten uzun uzun konuşup kafa yormak da sadece size rahatsızlık verir. Az çok arama motorları içinde lafı uzatıyorduk ama bu tarz örnekler için arama motorları olmasa da olur. Siteye giren görür zaten.

Bu gördüğünüz jQuery.easing sayesinde tanıdığımız ve ease animasyonları ile oluşturulmuş bir tasarım örneği. Yalnız burada kullanılan ease sadece Css ile hazırlanmış.

Css

    <style>
        @import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500);
        body {
          font: 100% Roboto;
          margin: 50px;
        }
        
        nav {
          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);
          transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
        }
        nav: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);
        }
        
        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;
        }
        a:hover {
          background: #ffe082;
        }
        a:active {
          background: #ffca28;
        }
        
        .navicon {
          padding: 23px 20px;
          cursor: pointer;
          -webkit-transform-origin: 32px 24px;
                  transform-origin: 32px 24px;
        }
        .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;
        }
    </style>

Html:

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

    </nav>