Prototyp 14-9-2023

by Petr Haluza

HTML

<div class="__fw_container">
<div class="__menu">

<div class="__menu-group">
  <input name="menuLevel1" id="ml11" type="radio"><label for="ml11" class="title">Informace</label>
  <ul>
    <li><a href="#">Kontaktovat podporu<span class="__new">Nové</span></a></li>
    <li><a href="#">Často kladené dotazy</a></li>
    <li><a href="#">Lorem ipsum</a></li>
  </ul>
</div>

<div class="__menu-group">
  <input name="menuLevel1" id="ml12" type="radio"><label for="ml12" class="title">Reklamace</label>
  <ul>
    <li>
      <div class="__menu-sub-group">
        <input name="menuLevel2" id="ml21" type="radio"><label for="ml21" class="title">Technická podpora</label>
        <ul>
          <li><a href="#">Kontaktovat podporu<span class="__new">Nové</span></a></li>
          <li><a href="#">Často kladené dotazy</a></li>
          <li><a href="#">Lorem ipsum</a></li>
        </ul>
      </div><!-- /menu-sub-group -->
    </li>
    
    <li>
      <div class="__menu-sub-group">
        <input name="menuLevel2" id="ml22" type="radio"><label for="ml22" class="title">Reklamace</label>
        <ul>
          <li><a href="#">Online reklamace<span class="__new">Nové</span></a></li>
          <li><a href="#">Často kladené dotazy</a></li>
          <li><a href="#">Lorem ipsum</a></li>
        </ul>
      </div><!-- /menu-sub-group -->
    </li>
  </ul><!-- /menu-sub-group -->

</div>

</div><!-- /.__menu -->
</div><!-- /.__fw_container -->

CSS

* {box-sizing: border-box}
body:after {content: ""; width:200%; height:200%; display:block; position: absolute; top:-50%; left:-50%; transform: rotate(45deg);background-color: white; z-index:0; opacity:.5;
background-image:  linear-gradient(#e5e5f7 2px, transparent 2px), linear-gradient(90deg, #e5e5f7 2px, transparent 2px), linear-gradient(#e5e5f7 1px, transparent 1px), linear-gradient(90deg, #fff 1px, #fff 1px);background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;}
/**/

.__fw_container {width:100%; position: relative; z-index:1}

.__menu { display:flex}
.__menu-sub-group { position: relative}
.__menu-sub-group > ul {display:none; position: absolute}
.__menu-sub-group > input:checked ~ ul {display:block;}

JavaScript

$(function(){
	$('input[name="menuLevel1"]').click(function(){
		var $radio = $(this);
    if ($radio.data('waschecked') == true){
			$radio.prop('checked', false);
      $radio.data('waschecked', false);
    }
    else
    	$('input[name="menuLevel1"]').data('waschecked', false);
      $radio.data('waschecked', true);
  });
});