Mit Beanmenu wird ein Hamburger-Menü realisiert. Symbol und Info-Text können mit dem jQuery Plugin sehr einfach angepasst werden. Das Hamburger-Icon wird ohne Images erzeugt und ist in Größe und Farbe veränderbar. Der Inhalt des Menüs kann, wie üblich, in jeder gewünschten Form eingefügt und mit HTML und CSS gestaltet werden.
Vorschau
Am folgenden Beispiel können die unten beschriebenen Optionen getestet werden. Eingegebene Änderungen werden sofort in der Vorschau angezeigt. Das vollständige Beispiel findet sich auch im Downloadbereich.
Installation
Der Hauptcontainer ist ein Block-Element mit einer beliebigen Klasse oder ID, z. B.:
<nav class="myMenu">
Im Script wird die Funktion "easyHamburgerNav" am Hauptcontainer aufgerufen:
$('.myMenu').easyHamburgerNav({
});
Optionen
symbolWidth: ['n'] ; default: '100%'Breite des Hauptcontainers. Es können alle üblichen CSS-Values verwendet werden.
symbolHeight: ['n'] ; default: '24px'Höhe des Hauptcontainers ohne sichtbaren Inhalt des Menüs. Es können alle üblichen CSS-Values verwendet werden.
symbolName: ['string'] ; default: 'Menu'Text neben dem Symbol.
symbolNameMargin: ['n'] ; default: '10px'Bestimmt den Abstand zwischen Symbol und Text. Es können alle üblichen CSS-Values verwendet werden.
symbolBackground: ['color' | 'image'] ; default: 'white'Hintergrund des Hauptcontainers. Alle CSS Color-Definitionen und die URL eines Images sind möglich.
symbolColor: ['color'] ; default: '#920508'Farbe des Symbols. Alle CSS Color-Definitionen sind möglich.
symbolFont: ['font'] ; default: 'inherit'Schriftfont des Textes neben dem Symbol.
symbolFontColor: ['color'] ; default: '#ccc'Farbe des Textes neben dem Symbol. Alle CSS Color-Definitionen sind möglich.
boxShadow: [true | false] ; default: trueSchaltet die Schattierung des sichtbaren Menüs am unteren Rand an oder aus.