Sıvı Efektli Modern Dikey Menü

Yazı Boyutu Ayarla büyüt (A+) (A-) küçült

Bu sefer çıtayı biraz daha yükseltip "Sıvı Kenarlık" (Liquid Border) ve "Yana Kayma" efektini birleştiren, oldukça estetik bir model karşımızda. Bu menüde, linklerin başında duran dikey renkli çubuklar, mouse ile üzerine geldiğinde tüm satırı kaplayacak şekilde sağa doğru genişliyor. Tasarım oldukça sade başlar ama etkileşim anında çok dinamik bir hale bürünür.

Blogger kontrol panelinizdeyken sırasıyla " Düzen >> Gadget ekle " tıklıyoruz. Açılan mini pencereden " HTML/JavaScript ekle " ye tıklıyoruz. Yine açılan pencereye aşağıdaki kodları ekliyoruz.

<style>
/* Ana Konteynır */
#liquid-menu-wrapper {
  width: 100%;
  max-width: 290px;
  background: #ffffff;
  padding: 10px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif; /* Eğer şablonda yoksa sans-serif'e döner */
}

#liquid-menu-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#liquid-menu-wrapper ul li {
  margin-bottom: 6px;
  position: relative;
}

/* Link Stili */
#liquid-menu-wrapper ul li a {
  display: block;
  padding: 14px 20px;
  color: #444;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
  overflow: hidden;
  border-radius: 6px;
  background: #fcfcfc;
}

/* Sıvı Arka Plan Efekti */
#liquid-menu-wrapper ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px; /* Başlangıçta ince bir çizgi */
  height: 100%;
  z-index: -1;
  transition: all 0.5s cubic-bezier(0.8, 0, 0.2, 1);
}

/* Hover Durumu */
#liquid-menu-wrapper ul li a:hover {
  color: #fff;
  padding-left: 30px; /* Yazıyı hafif sağa iter */
}

#liquid-menu-wrapper ul li a:hover::before {
  width: 100%; /* Çizgi tüm genişliği kaplar */
}

/* Renk Seçenekleri */
#liquid-menu-wrapper li:nth-child(1) a::before { background: #00b894; }
#liquid-menu-wrapper li:nth-child(2) a::before { background: #0984e3; }
#liquid-menu-wrapper li:nth-child(3) a::before { background: #6c5ce7; }
#liquid-menu-wrapper li:nth-child(4) a::before { background: #fd9644; }
#liquid-menu-wrapper li:nth-child(5) a::before { background: #eb4d4b; }
#liquid-menu-wrapper li:nth-child(6) a::before { background: #2f3542; }
#liquid-menu-wrapper li:nth-child(7) a::before { background: #f7b731; }
#liquid-menu-wrapper li:nth-child(8) a::before { background: #20bf6b; }
#liquid-menu-wrapper li:nth-child(9) a::before { background: #8854d0; }
#liquid-menu-wrapper li:nth-child(10) a::before { background: #45aaf2; }

@media screen and (max-width: 480px) {
  #liquid-menu-wrapper { max-width: 100%; }
}
</style>

<div id="liquid-menu-wrapper">
  <ul>
    <li><a href="#">Teknoloji</a></li>
    <li><a href="#">Yaşam</a></li>
    <li><a href="#">Kültür</a></li>
    <li><a href="#">Seyahat</a></li>
    <li><a href="#">Yemek</a></li>
    <li><a href="#">Sinema</a></li>
    <li><a href="#">Müzik</a></li>
    <li><a href="#">Spor</a></li>
    <li><a href="#">Eğitim</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</div>
 












modern, dikey, menu

Diğer Başlıklar
Etiket: , ,

0 Yorum:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)