Gecko - layout v2 - aside test

by Petr Haluza

HTML

<div id="base">


<header id=header>
<div id="flash">flash</div>
	<div class="container">
	Header
	</div><!-- .cont -->
</header>

<div class="container">
<div id="core">
	
		<aside>
			<div id="mainTree">
			<span class="maniTreeToggle">***</span>
				<ul>
					<li><a href="#"><i>P</i><span>Počitače</span></a></li>
					<li><a href="#"><i>S</i><span>Servery</span></a></li>
					<li><a href="#"><i>F</i><span>Fotovoltaika</span></a></li>
					<li><a href="#"><i>D</i><span>PC doplňky a kancelář</span></a></li>
				</ul>
			</div>
			<div id="subTree">
			<ul>
			<li>Herni</li>
			<li>Pracovni</li>
			<li>Mini</li>
			</ul>
			</div>
		</aside>

		<main>
		<div style="background:white; padding: 1em">?Main</div>
		</main>

</div><!-- #core -->
</div><!-- .cont -->



<footer>
  <div class="container">
	Footer
	</div><!-- .cont -->
</footer>
</div><!-- #base -->

CSS

:root { --block-bg: #f5f7fb; --block-radius: 6px}
body { --headerHeight: 50px;--flashHeight: 20px}
body.hasFlash { --headerHeight2: calc( var( --headerHeight ) + var( --flashHeight ) )}



* { box-sizing: border-box}

.container {
max-width:800px; margin: 0 auto}

#base { /*padding-top: calc( var(--headerHeight) + 10px)*/; background:#dDe1e8 }

header { position: sticky; z-index:11; top: 0; left:0; right:0; margin-bottom: 10px; backdrop-filter: blur(5px);
height: var(--headerHeight);  
border: 1px dashed red}
/* výška headeru bez flash / s flash */
body.hasFlash header { height: var(--headerHeight2); top: calc(var(--flashHeight) * -1) /* negativni vzska flashe */}
header #flash {background:red}


#core { display: flex; gap: 10px}

aside {flex: 0 0 200px; position: sticky; top: calc( var(--headerHeight) + 10px); display: flex; gap: 10px; z-index:10}
aside > div { background: var(--block-bg); border-radius: var(--block-radius)}

main {background: var(--block-bg); padding: 1em; flex: 1 1 100%; z-index:9; border-radius: var(--block-radius)}


footer {background: lightblue; margin-top: 10px; padding: 1em}

@media (max-width: 768px) {
}






#mainTree { width: 3em; z-index:5}
#mainTree ul li {position: relative}
#mainTree ul li span { display:none; position: absolute; white-space: nowrap; top: 0; padding-left: 1em;}
#mainTree.expand ul li span { display:block}
#mainTree.expand:after { content:""; position: absolute; z-index:-1; background: red; left:0; right: 2em; top:0; bottom:0}
#mainTree ul li a { padding:.5em}
#mainTree ul li a i {position: relative; z-index:2}
#mainTree ul li a:hover span { display: block; background: white; z-index:1}
#subTree { flex: 1 0 auto; z-index:4}



/*#base:before {content:""; position: absolute; left:0; right:0; top:0; height:200px;
background-image: linear-gradient(to top, darkblue, darkcyan)}


/* demo */
main { height: 1400px; }
aside { height: 800px; }
footer { height: 300px}

JavaScript

// ověření, jesli má header flashMesage, v čistým JS, spustit hned po headeru
document.addEventListener('DOMContentLoaded', function() {
    var headerElement = document.getElementById('header');
    var flashElement = document.getElementById('flash');
    if (headerElement && flashElement && headerElement.contains(flashElement)) {
        // přidat body třídu
        document.body.classList.add('hasFlash');
    }
});



$(document).ready(function() {

    // Přidání třídy .hover při kliku na .item
    $('.maniTreeToggle').click(function() {
        $('#mainTree').toggleClass('expand');
        event.stopPropagation();
    });

    // Odebrání třídy .hover při kliku mimo .item
    $(document).click(function() {
        $('#mainTree').removeClass('expand');
    });
});