HTML-guide til udvikling af integrationsløsninger til Borger.dk

Sidemenu

Sidemenuer kan benyttes i visuelt integrede løsninger, men må kun benyttes i link- eller iframeintegrationer, der aktiveres i et seperat vindue. Sidemenu må ikke benyttes på Min side. Menuen i denne guide er lavet som sidemenu.

Klassen nav-header benyttes benyttes til at opdele menunen.

<ul class="nav nav-list">
	<li class="nav-header">Kategori</li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li class="nav-header">Kategori</li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
	<li><a href="#">Menupunkt</a></li>
</ul>

Responsiv sidemenu

Sidemenuer er automatisk responsive, men det kan være hensigtsmæssigt, at menuen folder sig sammen på små skærme.

CSS:

	
.toggle-menu label, .toggle-menu input {display: none}
@media (max-width: 767px) {
	.toggle-menu label {display: block; cursor: pointer; border-bottom: 1px solid #333; }
	.toggle-menu input {display: none}
	.toggle-menu input ~ ul {max-height: 0; overflow: hidden; transition: max-height 1s ease ;-webkit-transition: max-height 1s ease; }
	.toggle-menu input:checked ~ ul {max-height: 1200px; } 
}

HTML:

	
<div class="toggle-menu">
	<label for="tryk" style="font-size:27px"><i class="icon-reorder"></i></label>
	<input id="tryk" type="checkbox">
	<ul class="nav nav-list">
		....
	</ul>	
</div>