Made on
Tilda
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* ASOSIY KONTEYNER */
.ios-split-menu {
position: fixed;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
display: flex;
align-items: center;
gap: 8px;
z-index: 999999;
pointer-events: none;
/* SEKIN VA SILLIQ HARAKAT (1.2 sekund) */
transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
/* OROLLAR */
.menu-island {
background: rgba(40, 40, 40, 0.65) !important;
backdrop-filter: blur(25px) saturate(180%) !important;
-webkit-backdrop-filter: blur(25px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
display: flex; align-items: center; justify-content: center;
height: 50px !important;
pointer-events: auto;
/* ELEMENTLAR HAM SEKINROQ YO'QOLADI */
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
opacity: 1;
transform: translateY(0);
}
/* YASHIRINISH ANIMATSIYASI */
.ios-split-menu.menu-hidden .menu-island {
transform: translateY(180px) !important;
opacity: 0;
}
/* KETMA-KETLIK (Biroz sekinlashtirildi) */
.ios-split-menu.menu-hidden .menu-island:nth-child(1) { transition-delay: 0.1s; }
.ios-split-menu.menu-hidden .menu-island:nth-child(2) { transition-delay: 0.2s; }
.ios-split-menu.menu-hidden .menu-island:nth-child(3) { transition-delay: 0.3s; }
.ios-split-menu.menu-hidden .menu-island:nth-child(4) { transition-delay: 0.4s; }
.ios-split-menu .menu-island:nth-child(1) { transition-delay: 0.3s; }
.ios-split-menu .menu-island:nth-child(2) { transition-delay: 0.2s; }
.ios-split-menu .menu-island:nth-child(3) { transition-delay: 0.1s; }
.ios-split-menu .menu-island:nth-child(4) { transition-delay: 0s; }
.menu-island.circle { width: 50px !important; border-radius: 50%; }
.menu-island.pill { padding: 0 4px; border-radius: 25px; gap: 4px; }
.menu-link {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-decoration: none; cursor: pointer; height: 100%; min-width: 45px;
position: relative;
}
.menu-island.pill .menu-link { padding: 0 12px; }
.menu-icon svg { width: 20px; height: 20px; fill: #b0b0b0; transition: all 0.3s; margin-bottom: 2px; }
.menu-text { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 500; color: #b0b0b0; transition: color 0.3s; }
/* PUSHTI RANG STYLE */
.menu-link.active .menu-icon svg {
fill: #FF4081;
transform: scale(1.1);
filter: drop-shadow(0 0 8px rgba(255, 64, 129, 0.6));
}
.menu-link.active .menu-text { color: #FF4081; text-shadow: 0 0 10px rgba(255, 64, 129, 0.4); }
.menu-link:hover .menu-icon svg { fill: #FF80AB; }
.menu-island:active { transform: scale(0.94) !important; transition: 0.1s; }
/* YANGI STATIK BADGE (O'ynamaydi) */
.cart-badge {
position: absolute;
/* Rasmga qarab pastki o'ng burchakka joyladim */
bottom: 12px;
left: 24px;
background-color: #FF4081; /* Pushti */
color: white;
font-size: 10px;
font-weight: 600;
min-width: 16px;
height: 16px;
border-radius: 50%; /* To'liq dumaloq */
display: flex;
align-items: center;
justify-content: center;
/* Oq hoshiya (ajralib turishi uchun) */
border: 2px solid #3d3d3d;
opacity: 0;
transition: opacity 0.3s ease; /* Faqat paydo bo'lish/yo'qolish */
pointer-events: none;
}
/* Agar tepa burchakda kerak bo'lsa, 'bottom' ni o'chirib 'top: -2px' va 'right: -5px' qilsa bo'ladi.
Lekin "yumaloqning burchagida" deganingiz va ikonka o'rtada turgani uchun,
ikonkaning o'ziga yopishtiramiz: */
.menu-icon { position: relative; } /* Badge ikonka ichida yurishi uchun */
.cart-badge {
bottom: -5px; /* Pastga */
right: -6px; /* O'ngga */
left: auto; /* Avtomatik */
border: 2px solid rgba(40,40,40,1); /* Orqa fon rangidagi hoshiya */
}
.cart-badge.visible { opacity: 1; }
.t-rec { overflow: visible !important; }
</style>
<div id="dynamic-menu-container"></div>
<script>
const MENU_CONFIG = {
btn1_Home: {
text: "Asosiy", link: "/",
icon: `<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>`
},
group2: [
{
text: "Profil", link: "#rec_profile",
icon: `<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>`
},
{
text: "Qidiruv", link: "#search",
icon: `<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>`
}
],
btn3_Cart: {
text: "Savat", link: "#opencart",
hasBadge: true,
icon: `<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>`
},
btn4_Menu: {
text: "Menu", link: "#menuopen",
icon: `<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>`
}
};
document.addEventListener("DOMContentLoaded", function() {
function vibratePhone() { if (navigator && navigator.vibrate) navigator.vibrate(10); }
function createButton(config, cssClass = "") {
const isActive = config.link === window.location.pathname;
const badgeHTML = config.hasBadge ? `<div class="cart-badge" id="custom-cart-badge">0</div>` : '';
return `
<a href="${config.link}" class="menu-link ${isActive ? 'active' : ''} ${cssClass}" onclick="vibratePhone()">
<div class="menu-icon">
<svg viewBox="0 0 24 24">${config.icon}</svg>
${badgeHTML}
</div>
<span class="menu-text">${config.text}</span>
</a>
`;
}
const menuHTML = `
<div class="ios-split-menu" id="myFloatingMenu">
<div class="menu-island circle">${createButton(MENU_CONFIG.btn1_Home)}</div>
<div class="menu-island pill">
${createButton(MENU_CONFIG.group2[0])}
${createButton(MENU_CONFIG.group2[1])}
</div>
<div class="menu-island circle">${createButton(MENU_CONFIG.btn3_Cart)}</div>
<div class="menu-island circle">${createButton(MENU_CONFIG.btn4_Menu)}</div>
</div>
`;
document.getElementById('dynamic-menu-container').innerHTML = menuHTML;
// SAVAT (Animatsiyasiz, faqat raqam ko'rsatish)
function updateCartBadge() {
let count = 0;
if (window.tcart && window.tcart.products) {
count = window.tcart.products.length;
} else {
const tildaBadge = document.querySelector('.t706__carticon-counter');
if (tildaBadge) count = parseInt(tildaBadge.innerText) || 0;
}
const myBadge = document.getElementById('custom-cart-badge');
if (myBadge) {
myBadge.innerText = count;
if (count > 0) {
myBadge.classList.add('visible');
// Bu yerda 'scale' animatsiyasi olib tashlandi
} else {
myBadge.classList.remove('visible');
}
}
}
setInterval(updateCartBadge, 1000);
updateCartBadge();
window.addEventListener('tildart:update', updateCartBadge);
// SEKIN ANIMATSIYA (Scroll)
let lastScrollTop = 0;
const menuElement = document.getElementById('myFloatingMenu');
window.addEventListener("scroll", function() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop <= 50) {
menuElement.classList.remove("menu-hidden");
lastScrollTop = scrollTop;
return;
}
if (scrollTop > lastScrollTop) {
menuElement.classList.add("menu-hidden");
} else {
menuElement.classList.remove("menu-hidden");
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}, { passive: true });
// Link Logic
const links = document.querySelectorAll('.menu-link');
links.forEach(link => {
link.addEventListener('click', function(e) {
const href = this.getAttribute('href');
if (href.startsWith('#')) {
e.preventDefault();
links.forEach(l => l.classList.remove('active'));
this.classList.add('active');
const element = document.querySelector(href) || document.querySelector(`a[name="${href.substring(1)}"]`);
if (element) {
const offset = element.getBoundingClientRect().top + window.pageYOffset - 50;
window.scrollTo({ top: offset, behavior: 'smooth' });
}
}
});
});
});
</script>