Material Design NavMenu

Material

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>

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-11-06 tarihinde yayınlandı,Toplam 1716 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...