{foreach from=$menu item=menu_item} {$n=$n+1} {if $n<7} {if $menu_item.type == 'link_internal_textpage'} {elseif $menu_item.type == 'submenu'} {/if} {/if} {/foreach}

Animiertes responsives Dropdown Menu mit nPage Script

Allgemeine Beschreibung

Diese Seite verwendet das gleiche animierte responsive Dropdown Menü wird diese Seite. Allerdings wird hier die Navigation automatisch mit nPage Script erstellt.

Außerdem habe ich einige kleinere Änderungen am CSS-Code der Navigationleiste vorgenommen, damit ein paar mehr menüpunkte auf die Seite passen.

Durchzuführende /durchgeführte Test mit verschiedenen Browsern und Geräten

Desktop-Browser

  • Firefox 29 - vollständig funktionsfähig
  • Google Chrome 35 - vollständig funktionsfähig
  • Internet Explorer 11 - vollständig funktionsfähig
  • Internet Explorer 10 - vollständig funktionsfähig
  • Internet Explorer 9 - funktionsfähig, keine transition-Übergänge
  • Internet Explorer 8- funktionsfähig, keine transition-Übergänge, keine Anpassung an geringere Bildschirmbreite

Mobile Geräte und Emulationen

Diese Tests dienen in erster Linie dem responsiven Verhalten

  • Entwicklertools Desktop Firefox: 320x480, 480x320, 360x640, 640x360, 480x800, 600x800, 768x1024, 1024x768 - alle ok, 800x480, 800x600 - zu breit
  • Firefox Webdevoloper Toolbar - mit Querformat für kleine Tablets (800x600) und Tablethochformat (768x1024) zu breit, sonst ok
  • Genymotion - Samsung Galaxy S3 - 4.3 - API 18 - 720x1280, 240 dpi; useragent:Mozilla/5.0 (Android; Tablet; rv:40.0) Gecko/40.0 Firefox/40.0; width:480; height:853 - Google Adsense Werbung ist zu breit
  • Genymotion - Samsung Galaxy S3 - 4.3 - API 18 - 720x1280, 240 dpi; Android Browser 4.0 - Google Adsense Werbung ist normal

nPage Script

Es wird im Wesentlichen der gleiche nPage Script Code wie auf dieser Seite verwendet. Der einzige wesentliche Unterschied besteht darin, dass ich die Anzahl der auszugebenden Hauptmenüpunkte aus Platzgründen begrenzt habe.

Zusammenfassung der Merkmale

Drop Down, Vertikal, Flyout, Horizontal, Tabbed, Responsive, jQuery, Accordion, nur CSS, CSS3, CSSMenumaker, CSSDeck