Html ve Css İle Yatay Animasyonlu Menü-9

Bu menü örneğimizde şeffaf bir şerit üzerine menü elemanlarının yerleştirilmesi ile meydana gelmiş yatay bir menü tasarımı yapacağız. Menümüz şık ve sade bir tasarıma sahiptir. Aşağıda bulunan Css ve Html kodlarını kullanarak menüyü oluşturabilirsiniz. İsterseniz kodlar üzerinde değişiklikler yaparak kendi menünüzü oluşturabilirsiniz. Sayfanın altında bulunan indirme linkinden sayfanın çalışan dosyasını indirebilirsiniz.

Css Kodları:

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html {
  height:100%;
  background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
}

nav {
  max-width: 960px;
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  padding: 60px 0;
}

nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  padding: 18px;
  font-family: "Open Sans";
  text-transform:uppercase;
  color: rgba(0, 35, 122, 0.5);
  font-size: 18px;
  text-decoration: none;
  display: block;
}

nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 35, 122, 0.7);
}


</style>

Html Kodları:

<body>
<nav>
  <ul>
    <li>
      <a href="#">ANASAYFA</a>
    </li>
    <li>
      <a href="#">HAKKIMIZDA</a>
    </li>
    <li>
      <a href="#">SERVİSLER</a>
    </li>
    <li>
      <a href="#">İLETİŞİM</a>
    </li>
  </ul>
</nav>
</body>

Buradan İndirebilirsiniz.

Bu Yazıya Tepkin Nedir?