Kruhové lišty

[{"selector":".w_tree_text.sub_text_empty_top .sub_text_top_in","position":"beforeend","code":"\u003C!--\r\nWEXBO 4.3 Externi plugin\r\nDoporucene vlozeni:\r\n- Identifikator prvku: .w_tree_text.sub_text_empty_top .sub_text_top_in\r\n- Umisteni: do zvoleneho prvku na konec\r\n- Omezeni: kategorie / levy panel menu\r\n- Tento soubor je urceny jako cely obsah pole \"Kod\" v External Plugins\r\n- Pokud WEXBO filtruje \u003Cstyle\u003E nebo \u003Cscript\u003E, rozdelte stejny obsah na HTML / CSS / JS pluginy\r\n--\u003E\r\n\u003Cdiv\r\n class=\"shop-left-mega-wrap\"\r\n data-shop-left-plugin=\"podlahove-listy\"\r\n aria-hidden=\"true\"\u003E\r\n \u003Csection\r\n class=\"shop-left-mega-panel\"\r\n data-mega-panel=\"podlahove-listy\"\r\n aria-label=\"Podlahove listy\"\u003E\r\n \u003Cdiv class=\"shop-left-mega-featured\"\u003E\r\n \u003Cp class=\"shop-left-mega-featured-kicker\"\u003EDoporucena volba\u003C/p\u003E\r\n \u003Carticle class=\"shop-left-mega-featured-card\"\u003E\r\n \u003Ch2 class=\"shop-left-mega-featured-title\"\u003EPodlahova lista P 2518\u003C/h2\u003E\r\n \u003Ca\r\n class=\"shop-left-mega-featured-media\"\r\n href=\"/cs/drevene-listy/podlahove-listy/\"\u003E\r\n \u003Cimg src=\"/files/images/obrazky-kategor/p2518.jpg\"\r\n alt=\"Podlahova lista P 2518\"\r\n /\u003E\r\n \u003C/a\u003E\r\n \u003Cp class=\"shop-left-mega-featured-text\"\u003E\r\n Nejoblibenejsi profil pro bezne pouziti v interieru.\r\n \u003C/p\u003E\r\n \u003Ca\r\n class=\"shop-left-mega-featured-cta\"\r\n href=\"/cs/drevene-listy/podlahove-listy/\"\u003EZobrazit varianty\u003C/a\u003E\r\n \u003C/article\u003E\r\n \u003C/div\u003E\r\n\r\n \u003Cdiv class=\"shop-left-mega-main\"\u003E\r\n \u003Cheader class=\"shop-left-mega-header\"\u003E\r\n \u003Cp class=\"shop-left-mega-title\"\u003EPODLAHOVE LISTY\u003C/p\u003E\r\n \u003Cp class=\"shop-left-mega-copy\"\u003E\r\n Vyberte profil podlahove listy podle tvaru. Po kliknuti zobrazime\r\n odpovidajici varianty daneho profilu.\r\n \u003C/p\u003E\r\n \u003C/header\u003E\r\n\r\n \u003Cdiv class=\"shop-left-mega-divider\" aria-hidden=\"true\"\u003E\u003C/div\u003E\r\n\r\n \u003Cdiv class=\"shop-left-mega-grid\"\u003E\r\n \u003Ca\r\n class=\"shop-left-mega-card\"\r\n href=\"/cs/drevene-listy/podlahove-listy/\"\u003E\r\n \u003Cspan class=\"shop-left-mega-card-label\"\u003EP 2518\u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-media\"\u003E\r\n \u003Cimg src=\"/files/images/obrazky-kategor/p_2518a.jpg\"\r\n alt=\"Profil P 2518\"\r\n /\u003E\r\n \u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-dims\"\u003E18 x 25 mm\u003C/span\u003E\r\n \u003C/a\u003E\r\n\r\n \u003Ca\r\n class=\"shop-left-mega-card\"\r\n href=\"/cs/drevene-listy/podlahove-listy/\"\u003E\r\n \u003Cspan class=\"shop-left-mega-card-label\"\u003EP 2626\u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-media\"\u003E\r\n \u003Cimg src=\"/files/images/obrazky-kategor/p_2626a.jpg\"\r\n alt=\"Profil P 2626\"\r\n /\u003E\r\n \u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-dims\"\u003E26 x 26 mm\u003C/span\u003E\r\n \u003C/a\u003E\r\n\r\n \u003Ca\r\n class=\"shop-left-mega-card\"\r\n href=\"/cs/drevene-listy/podlahove-listy/\"\u003E\r\n \u003Cspan class=\"shop-left-mega-card-label\"\u003EP 3030\u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-media\"\u003E\r\n \u003Cimg src=\"/files/images/obrazky-kategor/p_3030a.jpg\"\r\n alt=\"Profil P 3030\"\r\n /\u003E\r\n \u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-dims\"\u003E10 x 30 mm\u003C/span\u003E\r\n \u003C/a\u003E\r\n\r\n \u003Ca\r\n class=\"shop-left-mega-card\"\r\n href=\"/cs/drevene-listy/podlahove-listy/\"\u003E\r\n \u003Cspan class=\"shop-left-mega-card-label\"\u003EP 3819\u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-media\"\u003E\r\n \u003Cimg src=\"/files/images/obrazky-kategor/p_3819a.jpg\"\r\n alt=\"Profil P 3819\"\r\n /\u003E\r\n \u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-dims\"\u003E19 x 38 mm\u003C/span\u003E\r\n \u003C/a\u003E\r\n\r\n \u003Ca\r\n class=\"shop-left-mega-card\"\r\n href=\"/cs/drevene-listy/podlahove-listy/\"\u003E\r\n \u003Cspan class=\"shop-left-mega-card-label\"\u003EP 4014\u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-media\"\u003E\r\n \u003Cimg src=\"/files/images/obrazky-kategor/p_4014a.jpg\"\r\n alt=\"Profil P 4014\"\r\n /\u003E\r\n \u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-dims\"\u003E14 x 40 mm\u003C/span\u003E\r\n \u003C/a\u003E\r\n\r\n \u003Ca\r\n class=\"shop-left-mega-card\"\r\n href=\"/cs/drevene-listy/podlahove-listy/\"\u003E\r\n \u003Cspan class=\"shop-left-mega-card-label\"\u003EP 4020\u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-media\"\u003E\r\n \u003Cimg src=\"/files/images/obrazky-kategor/p_4020a.jpg\"\r\n alt=\"Profil P 4020\"\r\n /\u003E\r\n \u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-dims\"\u003E20 x 40 mm\u003C/span\u003E\r\n \u003C/a\u003E\r\n\r\n \u003Ca\r\n class=\"shop-left-mega-card\"\r\n href=\"/cs/drevene-listy/podlahove-listy/\"\r\n data-mega-placeholder=\"p5025\"\u003E\r\n \u003Cspan class=\"shop-left-mega-card-label\"\u003EP 5025\u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-media\"\u003E\r\n \u003Cimg src=\"/files/images/obrazky-kategor/p_5015a.jpg\"\r\n alt=\"Profil P 5025\"\r\n /\u003E\r\n \u003C/span\u003E\r\n \u003Cspan class=\"shop-left-mega-card-dims\"\u003E25 x 50 mm\u003C/span\u003E\r\n \u003C/a\u003E\r\n \u003C/div\u003E\r\n\r\n \u003Cnav class=\"shop-left-mega-links\" aria-label=\"Dalsi odkazy\"\u003E\r\n \u003Ca href=\"/cs/drevene-listy/podlahove-listy/\"\u003EVsechny podlahove listy\u003C/a\u003E\r\n \u003Ca href=\"/cs/drevene-listy/podlahove-listy/\"\u003EJak vybrat listu\u003C/a\u003E\r\n \u003Ca href=\"/cs/drevene-listy/podlahove-listy/\"\u003EPrehled vsech profilu\u003C/a\u003E\r\n \u003C/nav\u003E\r\n \u003C/div\u003E\r\n \u003C/section\u003E\r\n\u003C/div\u003E\r\n\r\n\u003Cstyle\u003E\r\n .shop-left-menu-layout {\r\n position: relative;\r\n }\r\n\r\n .shop-left-menu-item--has-mega {\r\n position: relative;\r\n }\r\n\r\n .shop-left-menu-item--has-mega \u003E a {\r\n position: relative;\r\n padding-right: 30px;\r\n transition:\r\n background-color 0.18s ease,\r\n color 0.18s ease,\r\n box-shadow 0.18s ease;\r\n }\r\n\r\n .shop-left-menu-item--has-mega \u003E a::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n right: 13px;\r\n width: 8px;\r\n height: 8px;\r\n border-top: 2px solid #2d5730;\r\n border-right: 2px solid #2d5730;\r\n transform: translateY(-50%) rotate(45deg);\r\n opacity: 0;\r\n transition: opacity 0.18s ease;\r\n }\r\n\r\n .shop-left-menu-item--active \u003E a,\r\n .shop-left-menu-item--has-mega:hover \u003E a {\r\n background: #edf5ea !important;\r\n color: #1f4725 !important;\r\n box-shadow: inset 4px 0 0 #2f6d35;\r\n }\r\n\r\n .shop-left-menu-item--active \u003E a::after,\r\n .shop-left-menu-item--has-mega:hover \u003E a::after {\r\n opacity: 1;\r\n }\r\n\r\n .shop-left-mega-wrap {\r\n position: absolute;\r\n top: 0;\r\n left: calc(100% + 18px);\r\n width: min(920px, calc(100vw - 360px));\r\n opacity: 0;\r\n visibility: hidden;\r\n pointer-events: none;\r\n transform: translateY(10px);\r\n transition:\r\n opacity 0.18s ease,\r\n transform 0.18s ease,\r\n visibility 0.18s ease;\r\n z-index: 30;\r\n }\r\n\r\n .shop-left-menu-layout--mega-open \u003E .shop-left-mega-wrap {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: auto;\r\n transform: translateY(0);\r\n }\r\n\r\n .shop-left-mega-panel {\r\n display: none;\r\n min-height: 100%;\r\n background: #fbfbfa;\r\n border: 1px solid #dfe5db;\r\n border-radius: 18px;\r\n box-shadow: 0 24px 48px rgba(22, 39, 26, 0.16);\r\n overflow: hidden;\r\n }\r\n\r\n .shop-left-mega-panel--active {\r\n display: flex;\r\n }\r\n\r\n .shop-left-mega-featured {\r\n width: 255px;\r\n padding: 28px 22px;\r\n background: #f3f7f0;\r\n border-right: 1px solid #dfe5db;\r\n }\r\n\r\n .shop-left-mega-featured-kicker {\r\n margin: 0 0 18px;\r\n color: #2e5f32;\r\n font-size: 17px;\r\n font-weight: 700;\r\n }\r\n\r\n .shop-left-mega-featured-card {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n height: 100%;\r\n padding: 18px;\r\n background: #fff;\r\n border: 1px solid #b9cfb6;\r\n border-radius: 16px;\r\n }\r\n\r\n .shop-left-mega-featured-title {\r\n margin: 0;\r\n color: #1f3f23;\r\n font-size: 21px;\r\n line-height: 1.2;\r\n }\r\n\r\n .shop-left-mega-featured-media {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 168px;\r\n text-decoration: none;\r\n }\r\n\r\n .shop-left-mega-featured-media img {\r\n max-width: 100%;\r\n max-height: 188px;\r\n object-fit: contain;\r\n }\r\n\r\n .shop-left-mega-featured-text {\r\n margin: 0;\r\n color: #474b47;\r\n font-size: 15px;\r\n line-height: 1.55;\r\n }\r\n\r\n .shop-left-mega-featured-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 46px;\r\n margin-top: auto;\r\n padding: 0 18px;\r\n background: #4e8739;\r\n color: #fff;\r\n border-radius: 12px;\r\n font-size: 17px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n }\r\n\r\n .shop-left-mega-main {\r\n flex: 1 1 auto;\r\n padding: 28px 28px 22px;\r\n }\r\n\r\n .shop-left-mega-header {\r\n max-width: 670px;\r\n }\r\n\r\n .shop-left-mega-title {\r\n margin: 0 0 12px;\r\n color: #254c2a;\r\n font-size: 20px;\r\n font-weight: 800;\r\n letter-spacing: 0.03em;\r\n }\r\n\r\n .shop-left-mega-copy {\r\n margin: 0;\r\n color: #2f302f;\r\n font-size: 16px;\r\n line-height: 1.6;\r\n }\r\n\r\n .shop-left-mega-divider {\r\n height: 1px;\r\n margin: 20px 0 18px;\r\n background: #e1e6de;\r\n }\r\n\r\n .shop-left-mega-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, minmax(0, 1fr));\r\n gap: 14px;\r\n }\r\n\r\n .shop-left-mega-card {\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 198px;\r\n background: #fff;\r\n border: 1px solid #d8ddd7;\r\n border-radius: 14px;\r\n overflow: hidden;\r\n text-decoration: none;\r\n box-shadow: 0 10px 20px rgba(24, 37, 27, 0.05);\r\n transition:\r\n transform 0.18s ease,\r\n box-shadow 0.18s ease,\r\n border-color 0.18s ease;\r\n }\r\n\r\n .shop-left-mega-card:hover {\r\n transform: translateY(-3px);\r\n border-color: #bfd0bc;\r\n box-shadow: 0 16px 28px rgba(24, 37, 27, 0.12);\r\n }\r\n\r\n .shop-left-mega-card-label {\r\n display: block;\r\n padding: 10px 14px;\r\n background: #3f6f3c;\r\n color: #fff;\r\n font-size: 17px;\r\n font-weight: 700;\r\n letter-spacing: 0.02em;\r\n }\r\n\r\n .shop-left-mega-card-media {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1 1 auto;\r\n min-height: 118px;\r\n padding: 14px 14px 10px;\r\n }\r\n\r\n .shop-left-mega-card-media img {\r\n max-width: 100%;\r\n max-height: 106px;\r\n object-fit: contain;\r\n }\r\n\r\n .shop-left-mega-card-dims {\r\n display: block;\r\n padding: 0 14px 14px;\r\n color: #616761;\r\n font-size: 13px;\r\n font-weight: 600;\r\n letter-spacing: 0.03em;\r\n }\r\n\r\n .shop-left-mega-links {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px 28px;\r\n margin-top: 20px;\r\n }\r\n\r\n .shop-left-mega-links a {\r\n position: relative;\r\n padding-left: 16px;\r\n color: #2d5730;\r\n font-size: 15px;\r\n font-weight: 600;\r\n text-decoration: none;\r\n }\r\n\r\n .shop-left-mega-links a::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n top: 50%;\r\n width: 7px;\r\n height: 7px;\r\n border-top: 2px solid #4e8739;\r\n border-right: 2px solid #4e8739;\r\n transform: translateY(-50%) rotate(45deg);\r\n }\r\n\r\n .shop-left-mega-links a:hover {\r\n color: #1f3f23;\r\n }\r\n\r\n @media (max-width: 1400px) {\r\n .shop-left-mega-wrap {\r\n width: min(860px, calc(100vw - 340px));\r\n }\r\n\r\n .shop-left-mega-grid {\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n }\r\n }\r\n\u003C/style\u003E\r\n\r\n\u003C/script\u003E\u003Cscript\u003E\r\n (function () {\r\n var pluginRoot = document.currentScript.previousElementSibling;\r\n\r\n if (pluginRoot && pluginRoot.tagName === \"STYLE\") {\r\n pluginRoot = pluginRoot.previousElementSibling;\r\n }\r\n\r\n if (!pluginRoot || !pluginRoot.classList.contains(\"shop-left-mega-wrap\")) {\r\n return;\r\n }\r\n\r\n var wrapper = pluginRoot.closest(\".sub_text_top_in\");\r\n var tree = wrapper ? wrapper.querySelector(\"#web_tree\") : null;\r\n\r\n if (!wrapper || !tree) {\r\n return;\r\n }\r\n\r\n // Sem lze pozdeji pridat dalsi kategorie se stejnym mega panelem.\r\n var config = [\r\n {\r\n key: \"podlahove-listy\",\r\n menuSelector: 'li.ctg_879, li[data-id=\"879\"]',\r\n panelSelector: '[data-mega-panel=\"podlahove-listy\"]',\r\n },\r\n ];\r\n\r\n wrapper.classList.add(\"shop-left-menu-layout\");\r\n\r\n var openDelay = 300;\r\n var closeDelay = 320;\r\n var openTimer = null;\r\n var closeTimer = null;\r\n var activeKey = null;\r\n var items = [];\r\n var panels = [];\r\n\r\n function clearTimer(timer) {\r\n if (timer) {\r\n window.clearTimeout(timer);\r\n }\r\n return null;\r\n }\r\n\r\n function setActive(key) {\r\n activeKey = key;\r\n wrapper.classList.toggle(\"shop-left-menu-layout--mega-open\", !!key);\r\n pluginRoot.setAttribute(\"aria-hidden\", key ? \"false\" : \"true\");\r\n\r\n items.forEach(function (item) {\r\n item.classList.toggle(\r\n \"shop-left-menu-item--active\",\r\n item.getAttribute(\"data-mega-target\") === key\r\n );\r\n });\r\n\r\n panels.forEach(function (panel) {\r\n panel.classList.toggle(\r\n \"shop-left-mega-panel--active\",\r\n panel.getAttribute(\"data-mega-panel\") === key\r\n );\r\n });\r\n }\r\n\r\n function scheduleOpen(key) {\r\n openTimer = clearTimer(openTimer);\r\n closeTimer = clearTimer(closeTimer);\r\n openTimer = window.setTimeout(function () {\r\n setActive(key);\r\n }, openDelay);\r\n }\r\n\r\n function scheduleClose() {\r\n openTimer = clearTimer(openTimer);\r\n closeTimer = clearTimer(closeTimer);\r\n closeTimer = window.setTimeout(function () {\r\n setActive(null);\r\n }, closeDelay);\r\n }\r\n\r\n config.forEach(function (entry) {\r\n var item = tree.querySelector(entry.menuSelector);\r\n var panel = pluginRoot.querySelector(entry.panelSelector);\r\n\r\n if (!item || !panel) {\r\n return;\r\n }\r\n\r\n item.classList.add(\"shop-left-menu-item\", \"shop-left-menu-item--has-mega\");\r\n item.setAttribute(\"data-mega-target\", entry.key);\r\n\r\n items.push(item);\r\n panels.push(panel);\r\n\r\n item.addEventListener(\"mouseenter\", function () {\r\n scheduleOpen(entry.key);\r\n });\r\n\r\n item.addEventListener(\"mouseleave\", function () {\r\n scheduleClose();\r\n });\r\n });\r\n\r\n if (!items.length) {\r\n return;\r\n }\r\n\r\n pluginRoot.addEventListener(\"mouseenter\", function () {\r\n openTimer = clearTimer(openTimer);\r\n closeTimer = clearTimer(closeTimer);\r\n if (activeKey) {\r\n setActive(activeKey);\r\n }\r\n });\r\n\r\n pluginRoot.addEventListener(\"mouseleave\", function () {\r\n scheduleClose();\r\n });\r\n\r\n wrapper.addEventListener(\"mouseleave\", function () {\r\n scheduleClose();\r\n });\r\n })();\r\n\u003C/script\u003E\r\n\u003C/style\u003E"}]