Blogger Renkli 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>
/* Ana Konteynır */
#color-menu-wrap {
width: 100%;
background: #222;
font-family: 'Segoe UI', Arial, sans-serif;
border-radius: 8px;
overflow: hidden;
}

/* Masaüstü: Yan yana dizilim */
#color-nav {
display: flex;
flex-wrap: wrap; /* Yazıların sığmadığı yerde taşmasını önler */
list-style: none;
margin: 0;
padding: 0;
}

#color-nav li {
flex: 1; /* Tüm elemanlar eşit genişlikte yayılır */
min-width: 100px; /* Çok küçülüp dikey olmalarını engeller */
text-align: center;
}

#color-nav li a {
display: block;
padding: 15px 5px;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
transition: 0.3s;
}

/* Gökkuşağı Renkleri - Her item için farklı renk */
#color-nav li:nth-child(1) a { border-bottom: 4px solid #ff4757; }
#color-nav li:nth-child(2) a { border-bottom: 4px solid #2ed573; }
#color-nav li:nth-child(3) a { border-bottom: 4px solid #1e90ff; }
#color-nav li:nth-child(4) a { border-bottom: 4px solid #ffa502; }
#color-nav li:nth-child(5) a { border-bottom: 4px solid #eccc68; }
#color-nav li:nth-child(6) a { border-bottom: 4px solid #70a1ff; }
#color-nav li:nth-child(7) a { border-bottom: 4px solid #ff6b81; }
#color-nav li:nth-child(8) a { border-bottom: 4px solid #7bed9f; }
#color-nav li:nth-child(9) a { border-bottom: 4px solid #5352ed; }
#color-nav li:nth-child(10) a { border-bottom: 4px solid #ff6348; }

/* Hover Efekti: Arka plan renklenir */
#color-nav li:nth-child(1) a:hover { background: #ff4757; }
#color-nav li:nth-child(2) a:hover { background: #2ed573; }
#color-nav li:nth-child(3) a:hover { background: #1e90ff; }
#color-nav li:nth-child(4) a:hover { background: #ffa502; }
#color-nav li:nth-child(5) a:hover { background: #eccc68; }
#color-nav li:nth-child(6) a:hover { background: #70a1ff; }
#color-nav li:nth-child(7) a:hover { background: #ff6b81; }
#color-nav li:nth-child(8) a:hover { background: #7bed9f; }
#color-nav li:nth-child(9) a:hover { background: #5352ed; }
#color-nav li:nth-child(10) a:hover { background: #ff6348; }

/* Mobil Ayarlar */
@media screen and (max-width: 768px) {
#color-nav {
display: none; /* Mobilde gizle */
flex-direction: column;
}

#color-nav.open {
display: flex; /* Menü açılınca göster */
}

.menu-btn {
display: block;
background: #444;
color: #fff;
padding: 15px;
text-align: center;
cursor: pointer;
font-weight: bold;
}
}

@media screen and (min-width: 769px) {
.menu-btn { display: none; } /* Masaüstünde butonu gizle */
}
</style>

<div id="color-menu-wrap">
<div class="menu-btn" onclick="toggleMenu()">☰ MENU</div>
<ul id="color-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
</div>

<script>
function toggleMenu() {
document.getElementById("color-nav").classList.toggle("open");
}
</script>