How To: Mit nur 13 Zeilen Code ein Slide-Menü erstellen

Advertisement:

Mittlerweile habe ich ja schon einige Landingpages für diverse Projekte erstellt. Immer wieder treibt mich dabei um, das Design der ursprünglichen Webseite ein wenig anzupassen. Ich bin ein Freund davon, ein schönes, breites Layout zu haben, in dem auf die 90er-Jahre linke Navigationsleiste verzichtet wird. Diese zu “entfernen” bzw. auszublenden ist mit CSS ja eigentlich gar kein Problem. Nun wollte ich aber einen Teil der Navigation trotzdem auf der Seite haben und musste mir etwas ausdenken, um diese Navigation aus dem Standard-Template zu nutzen und im Layout heraus zu lösen.

Mir fiel dann auf, dass mittlerweile viel Webseite in einem Blog-Layout gestaltet sind und zusätzliche Navigationselemente im nicht sichtbaren Bereich des Screens “verstecken”. Mit einem Klick auf einen kleinen Button werden diese dann in den sichtbaren Bereich verschoben, so dass man dann Zugriff auf die Menüinhalte hat. Das habe ich adaptieren wollen und dabei festgestellt, dass dies mit ein wenig jQuery und CSS eigentlich gar nicht so schwierig ist. Mit jQuery kann man dies mit insgesamt 13 Zeilen Code ganz einfach realisieren. Voraussetzung ist natürlich, dass zumindest der Inhalt des Menüs bereits vom CMS ausgeliefert wird, sprich: existiert.

Das Menü, das ich manipuliert habe, wird vom CMS in folgender Struktur ausgeliefert:

1
2
3
4
5
6
7
8
<nav id="menu" role="navigation">
  <h3>Menüüberschrift</h3>
  <ul class="menu">
    <li>Menuinhalt 1</li>
    <li>Menuinhalt 2</li>
    <li>Menuinhalt 3</li>
  </ul>
</nav>

Vorbereitung im CSS

Um das Verhalten des Menüs sinnvoll steuern zu können, muss zuvor das CSS ein wenig angepasst werden. Ich habe mich dazu entschieden, dass Menü am rechten Bildschirmrand zu positionieren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#menu {
  position: fixed; /* Menü fest positionieren */
  top: 25%; /* Abstand vom oberen Bildschirmrand */
  width: 23em; /* Die Breite des Menüs sollte ebenfalls fest sein, muss aber nicht. 
                  Macht das Script jedoch einfacher. */
  right: -20em; /* Damit wird das Menü ausserhalb des Screens bzw. 
                   Viewport, eingeblendet */
  z-index: 9999; /* Sicher stellen, dass das Menü immer die oberste Ebene hat
                    und damit überall sichtbar ist. */
}
 
ul.menu {
  width: 20em;
  float: left;
  display: block;
}

Ausserdem benötigen wir noch einen Button, der das Menü anzeigen soll. Dazu habe ich einfach die Menüüberschrift genommen.

1
2
3
4
5
6
7
#menu > h3 {
  float: left; /* Um das Menü rechts neben dem Button anzuzeigen */
  width: 3em;
  height: 3em;
  display: block; /* Nur um auf Nummer sicher zu gehen, damit das Floating und
                     die Breiten- und Höhenangaben korrekt funktionieren */
}

Der jQuery-Code

Die Animation in jQuery herzustellen ist eigentlich total simpel. Mit Hilfe der animate()-Funktion wird einfach der rechte Abstand verändert. Und das sieht dann so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
jQuery(document).ready(function(){
	jQuery('#menu > h3').click(function(){
		if ( !jQuery('#menu').hasClass('show') ) {
			jQuery('#menu').animate({
				'right': '0'
			},400).toggleClass('show');
		} else {
		jQuery('#menu').animate({
				'right': '-20em'
		},400).toggleClass('show');
		}
	});
});

Damit jQuery bzw. der Browser prüfen kann, ob er das Manü nun ein- oder ausblenden soll, habe ich einfach die CSS-Klasse "show" eingebaut. Die darf im Stylesheet natürlich nicht irgendwie mit Eigenschaften behandelt werden.

Eine Übersicht mit weiteren Slide-Menüs mit entsprechenden Code-Schnipseln und Demos ist auf codrops. Hier sind Beispiele für Slide-Menüs für alle vier Bildschirmkanten (oben, rechts, unten, links). Außerdem werden auch Push-Menüs gezeigt – diese “überlagern” nicht den Inhalt der Seite, sondern schieben ihn mit.

Like this post? Share it!
Advertisement:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>