Mobile Navigation ohne Javascript

Wenn es darum geht eine mobile Navigation zu erstellen, die erst beim Tippen auf ein Icon in die Seite reinfährt, denken viele, dass dies nur mit dem Einsatz von Javascript und / oder jQuery gelöst werden kann. Dabei gibt es eine sehr simple Alternative, die mit reinem HTML & CSS-Code auskommt, ohne jegliche Art von Programmierung.

Ein großer Vorteil hiervon ist, dass die jQuery Bibliothek hierfür nicht extra geladen werden muss und somit die Ladezeit der Seiten klein gehalten werden kann. Das ist besonders auf mobilen Endgeräten, für die diese Navigation gebaut wird, wichtig.

Im Nachfolgenden zeigen wir Ihnen, wie Sie allein mit dem Einsatz von HTML & CSS eine mobile Navigation erstellen können.

Dazu bauen wir zunächst einmal das Grundgerüst in HTML & CSS auf:

HTML

<div class="inside">
	<input type="checkbox" id="activate-nav">
	<label for="activate-nav" id="menu-icon">
		<span>Navigationspan>
	label>
	<nav>
		<ul>
	        <li>Homeli>
    	    <li>Unternehmenli>
        	<li>Teamli>
        	<li>Kontaktli>
	    ul>
	nav>
div>

CSS

.inside{
    background: #bad532;
    padding: 20px 30px;
    margin: 20px auto;
	max-width: 1000px;
	font-family: 'Titillium Web';
}

Wie Sie sehen haben wir nun eine Checkbox die rein gar nichts bewirkt sowie eine ungestylte Navigation.

Dieser Checkbox wollen wir nun jedoch eine Funktion verpassen, nämlich das Ein- und Ausblenden der Navigation nach einem Klick / Tippen auf diese. Dazu müssen wir unseren CSS-Code wie folgt anpassen:

CSS

.inside{
    background: #bad532;
    padding: 20px 30px;
    margin: 20px auto;
	max-width: 1000px;
	font-family: 'Titillium Web';
}
 
.inside nav {
    display: none;
}
 
.inside #activate-nav:checked ~ nav {
    display: block;
}

Das sieht soweit schon mal ganz gut aus. Im finalen Schritt animieren wir nun noch die eigentliche Navigation, damit diese von oben in die Seite reinfährt anstatt plötzlich einfach da zu sein. Dazu müssen wir ein letztes Mal unsere CSS-Datei bearbeiten:

CSS

.inside{
    background: #bad532;
    border: 1px solid #bad532;
    padding: 20px 30px;
    margin: 20px auto;
	max-width: 1000px;
	font-family: 'Titillium Web';
}

/*Styling Burger-Icon*/

.inside #activate-nav{
	display: none;
}

.inside label {
    cursor: pointer;
}

.inside label .lines .line {
    width: 26px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    margin-bottom: 6px;
    transition: all .2s;
    opacity: 1;
}

.inside #menu-icon:hover .lines .line:last-child,
.inside #menu-icon:active .lines .line:last-child,
.inside #activate-nav:checked~label .lines .line:last-child{
    width: 26px;
}

.inside #menu-icon .lines .line:nth-child(2) {
    transition: all .0s;
}

.inside #menu-icon .lines .line:last-child {
    margin-bottom: 0;
    width: 20px;
}

.inside #menu-icon span,
.inside #menu-icon .lines {
    display: inline-block;
    vertical-align: middle;
}

.inside #menu-icon span {
    padding: 0 0 0 6px;
}

.inside #activate-nav:checked ~ label .lines .line:nth-child(1){
    transform: rotate(45deg);
}

.inside #activate-nav:checked ~ label .lines .line:nth-child(2){
    opacity: 0;
	margin-top: -10px;
}

.inside #activate-nav:checked ~ label .lines .line:nth-child(3){
    transform: rotate(-45deg);
    margin-top: -6px;
}


/*Styling animierte Navigation*/

.inside{
	position: relative;
	height: 162px;
	overflow: hidden;
}

.inside nav{
	position: absolute;
    left: 0;
    top: 66px;
    width: 100%;
    z-index: 11;
    overflow: hidden;
	display: block;
}

.inside nav ul{
	padding: 20px 30px;
    background: #fff;
    margin-top: -1000px;
    transition: all 0.3s;
}

.inside #activate-nav:checked ~ nav ul{
	margin-top: 0;
}

.inside ul{
	list-style-type: none;
	padding: 0;
}