Perfektní Strom pro b2bv2025

by Petr Haluza

HTML

<figure class="mainLogo"><img src="https://haluzovic.cz/b2b-2025/100Mega.svg"></figure>

<ul id="tree-1" class="tree">

	<li class="tree-lvl-1">
		<a href="#">
			<figure><img src="https://image.alza.cz/Foto/ImgGalery/Ikony/main-navigation/pocitace.svg" alt=""></figure>
			<span>Kategorie 1</span>
			<button class="tree-controll"></button>
		</a>
		<div><span>
			<ul class="tree-sub">
				<li class="tree-lvl-2">
					<a href="#">
						<span>Kategorie 1-1</span>
					</a>
					<button class="tree-controll"></button>
					<div><span>
						<ul class="tree-sub">
							<li class="tree-lvl-3">
								<a href="#">
									<span>Kategorie 1-1-1</span>
								</a>
								<button class="tree-controll"></button>
								<div><span>
									<ul class="tree-sub">
										<li class="tree-lvl-4">
											<a href="#">
												<span>Kategorie 1-1-1-1</span>
											</a>
										</li>
										<li class="tree-lvl-4">
											<a href="#">
												<span>Kategorie 1-1-1-2</span>
											</a>
										</li>
										<li class="tree-lvl-4">
											<a href="#">
												<span>Kategorie 1-1-1-3</span>
											</a>
										</li>
									</ul>
								</span></div>
							</li>
						</ul>
					</span></div>
				</li>
			</ul>
		</span></div>
  </li><!-- /lvl1 -->

	<li class="tree-lvl-1">
		<a href="#">
			<figure><img src="https://image.alza.cz/Foto/ImgGalery/Ikony/main-navigation/telefony.svg" alt=""></figure>
			<span>Outdoor, sport a styl</span>
			<button class="tree-controll"></button>
		</a>
		<div><span>
			<ul class="tree-sub">
				<li class="tree-lvl-2">
					<a href="#">
						<span>Outdoor věci</span>
					</a>
					<button class="tree-controll"></button>
					<div><span>
						<ul class="tree-sub">
							<li class="tree-lvl-3 active">
								<a href="#">
									<span>Přenosný outdoor věci</span>
								</a>
								<button class="tree-controll"></button>
								<div><span>
									<ul class="tree-sub">
<li...

CSS

/* jen demo*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

#tree-1 {width:230px; margin: 10px; /*background: #f1f5fa*/}
#tree-1 a {text-decoration:none; color: #1c232b}
body { font-family: "roboto", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size:13px; padding: 20px; background: #f4f4f5}
/**/

figure.mainLogo {margin:0}
figure.mainLogo img {width:200px}

:root {
	--tree-btn-w: 22px; /* šířka buttonu ve stromu */
	--tree-caret: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOTkgOTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzYzNzQ5ZTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEwcHg7Ij48cGF0aCBkPSJNNzUsOS41bC0yNSwyNWwtMjUsLTI1IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjEyLjVweDsiLz48cGF0aCBkPSJNNzUsNjkuNWwtNTAsMCIvPjxwYXRoIGQ9Ik03NSw4Ni41bC01MCwwIi8+PC9zdmc+DQoNCg==");
}

.tree li {position: relative}
.tree li a {display:flex; align-items: center; gap: 5px; padding: 5px 0px 5px 5px; padding-right: var(--tree-btn-w); font-size:13px;}
.tree li figure {margin:0}
.tree li figure img {height: 20px}
/* obslužné tlačítko otevřít/zavřít */
.tree li button.tree-controll {position: absolute; right: 2px ; top:0; border:none; padding: 6px; cursor: pointer; border-radius:3px; background: transparent; opacity: .5}
.tree li button.tree-controll:hover {background: #aaccff22; opacity: 1}
.tree li.tree-lvl-1 > a > button {top:3px;}
.tree li button.tree-controll:before {content: ""; display:block; width: 10px; height: 10px; transition: background-position .3s; background: var(--tree-caret) no-repeat -1px 4px; background-size: 12px;  }
.tree li button.tree-controll:hover:before {background-position: -1px -1px; }
.tree li:has( > div.isOpen) > button.tree-controll:before {transform: rotate(180deg)}/* otevřená větev */
.tree li:has( > div.isOpen) >...

JavaScript

// HAP strom -> otvírák větví
$('.tree-controll').click(function(event) { 
	$(this).next('div').toggleClass('isOpen'); // pak odebrat, jde o 1. uroven
	var $div = $(this).closest('a').next('div'); 
	$div.toggleClass('isOpen');
	if (!$div.hasClass('isOpen')) { $div.find('div').removeClass('isOpen'); }
	event.preventDefault(); // Zamezí funkci tlačítka jako form elementu
}); 


// HAP strom -> otevřít strom k aktuální větvi
function openActiveCategories() {
	var $activeElement = $('li[class^="tree"].active'); // aktuální větev
  $activeElement.parents('li').addClass('active');
  $activeElement.parents('div').addClass('isOpen');
  $activeElement.find('div').first().addClass('isOpen');
}
		

$(document).ready(function() {
	// Zavolání funkce po načtení dokumentu
  openActiveCategories();
});