Mega Menu

Fully Responsiv

HTML Code

Erläuterung:

Die .template_nav Class bildet die Basis des Menüs und passt sich komplett an die Auflösung an (width : 100%); und ist fixed positioniert (position : fixed), dadurch bleibt die Navigation immer im sichtbarem Bereich.

Die .navigation Class benötigen wir um die Navigation für mobile Endgeräte einzufassen, Inhalte die in der Desktop Version nicht verwendet werden durch die Klasse .mobile ausgeblendet.

Für den Hover-Effekt nutzt das Menu einen Button (.mega_menu_button), sowie der Button berührt wird der Mega Menu Content (.mega_menu_content) eingeblendet. Die Inhalte werden innerhalb der .mega_menu_table in Blöcke unterteilt (.mega_menu_td).

Alle verbleibenden Klassen werden benötigt um das Menu jeweils für Desktops und Endgeräte anpassen zu können.

CSS Code Allgemein

CSS Code Desktop
CSS Code Mobil
Demo & Download

Demo

Download - Downloads: 28

Last modified: May 07 2019 23:12:19.

Diese Website verwendet Cookies. Datenschutzrichtlinien