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

Topmenu

Faneblade kan benyttes både i selvbetjeningsløsninger og integrationer på eksempelvis Min Side.

Klassen active benyttes til at angive det aktive menupunkt.

Basiseksempel

<div class="navbar">
	<div class="navbar-inner">
		<ul class="nav">
			<li class="active"><a href="#">Menupunkt</a></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>
	</div>
</div>

Udvidet responsivt eksempel

CSS:

.toggle-navbar label, .toggle-navbar input {display: none}
@media (max-width: 767px) {
	.toggle-navbar label {display: block; cursor: pointer; margin: 10px 0 4px 10px;}
	.toggle-navbar input {display: none}
	.toggle-navbar input ~ ul {max-height: 0; overflow: hidden; -webkit-transition: max-height 1s ease; }
	.toggle-navbar input:checked ~ ul {max-height: 1200px; } 
}

HTML:

					
<div class="navbar">
	<div class="navbar-inner">
		<div class="toggle-navbar">
			<label for="toggle">
				<i class="icon-reorder" style="font-size: 27px;"></i>							
			</label>
			<input type="checkbox" id="toggle">
			<ul class="nav">
				<li class="active"><a href="#">Menupunkt</a></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>
		</div>
	</div>
</div>