Blogger Animasyonlu CSS dikey menu

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

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. blogger, widget, menu


<style>
/* Menü Konteynırı */
.vertical-menu-box {
  width: 100%;
  max-width: 300px; /* Genişliği blog yan sütununa göre ayarlar */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
}

/* Menü Listesi */
.vertical-menu-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vertical-menu-box ul li {
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
}

/* Link Yapısı */
.vertical-menu-box ul li a {
  display: block;
  padding: 15px 20px;
  color: #555;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
  border-left: 5px solid transparent; /* Renk şeridi için */
}

/* Her Eleman İçin Farklı Sol Renk Şeridi ve Hover Efekti */
.vertical-menu-box ul li:nth-child(1) a:hover { border-left-color: #FF5722; color: #FF5722; background: #FFF5F2; padding-left: 30px; }
.vertical-menu-box ul li:nth-child(2) a:hover { border-left-color: #E91E63; color: #E91E63; background: #FDF2F5; padding-left: 30px; }
.vertical-menu-box ul li:nth-child(3) a:hover { border-left-color: #9C27B0; color: #9C27B0; background: #F9F2FA; padding-left: 30px; }
.vertical-menu-box ul li:nth-child(4) a:hover { border-left-color: #673AB7; color: #673AB7; background: #F6F2FB; padding-left: 30px; }
.vertical-menu-box ul li:nth-child(5) a:hover { border-left-color: #3F51B5; color: #3F51B5; background: #F2F4FB; padding-left: 30px; }
.vertical-menu-box ul li:nth-child(6) a:hover { border-left-color: #2196F3; color: #2196F3; background: #F2F9FF; padding-left: 30px; }
.vertical-menu-box ul li:nth-child(7) a:hover { border-left-color: #00BCD4; color: #00BCD4; background: #F0FDFF; padding-left: 30px; }
.vertical-menu-box ul li:nth-child(8) a:hover { border-left-color: #009688; color: #009688; background: #F0FAF9; padding-left: 30px; }
.vertical-menu-box ul li:nth-child(9) a:hover { border-left-color: #4CAF50; color: #4CAF50; background: #F2FAF2; padding-left: 30px; }
.vertical-menu-box ul li:nth-child(10) a:hover { border-left-color: #FFC107; color: #FFC107; background: #FFFBF0; padding-left: 30px; }

/* Son elemanın çizgisini kaldır */
.vertical-menu-box ul li:last-child {
  border-bottom: none;
}

/* Mobil için tam genişlik */
@media screen and (max-width: 480px) {
  .vertical-menu-box {
    max-width: 100%;
  }
}
</style>

<div class="vertical-menu-box">
  <ul>
    <li><a href="#">Kategori 1</a></li>
    <li><a href="#">Kategori 2</a></li>
    <li><a href="#">Kategori 3</a></li>
    <li><a href="#">Kategori 4</a></li>
    <li><a href="#">Kategori 5</a></li>
    <li><a href="#">Kategori 6</a></li>
    <li><a href="#">Kategori 7</a></li>
    <li><a href="#">Kategori 8</a></li>
    <li><a href="#">Kategori 9</a></li>
    <li><a href="#">Kategori 10</a></li>
  </ul>
</div>
Animasyonlu Geçiş: Mouse ile üzerine geldiğinde yazı hafifçe sağa kayar (padding-left: 30px), bu da kullanıcıya etkileşim hissi verir.

Renk Kodlaması: Her menü öğesi kendine has bir renge sahip. Bu, sitene hem canlılık katar hem de kategorilerin ayrışmasını sağlar.

Temiz Görünüm: Arka plan beyaz, gölgelendirme (shadow) ise derinlik katıyor. Blogger'ın genellikle kalabalık olan yan sütununda sade ve şık duracaktır.

Responsive: Mobilde ekranı tam kaplayacak şekilde (max-width: 100%) esner.
Diğer Başlıklar
Etiket: , ,

0 Yorum:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)