Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
PHP Scripts / Navigation

MelonHTML5 - Metro UI

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

MelonHTML5 - Metro UI - CodeCanyon Item for Sale


Ad: Bluehost hosting



Metro UI is a flexible and easy to integrate framework to build your one page website in Windows 8 Metro UI. It is fully powered by HTML5, CSS3 and JavaScript with plengy of options for you to configure it to suit your own needs.

Please give it quick rating if you like this. If you have any suggestions/feature request or you find a bug, you are more than welcome to contact me and I’ll address them ASAP.

NOTE: This is the PHP version. A pure HTML/JavaScript version is also available here.


Desktop and Mobile Device (Phone + Tablet) Ready
Desktip View and Mobile View. Each device type gets its own view by default and has the ability to switch between.

Resonsive UI Design
The entire UI is designed responsively with media queries so that it will fit any screen sizes

Full HTML5 + CSS3 Animations
HTML5 elements/concept are used as many as possible. All animations are purely in CSS3. No jQuery fallbacks are used for old IEs for better performance.

Old IE Support
The UI is also fully functional in old IEs (IE7, IE8). The only difference is that IE won’t get animations.

Sliding Button Bar
Just like Windows 8, each page gets a sliding control bar when mouse is moved to the right edge of the screen.

One Page Application
The whole UI design follows the concept of one page app, which means only one page request is made per visit, and all the rest are handled in XHR (AJAX).

Working with Browser Back button
Back & Forward buttons can still be used as usual to navigate between 2 pages, just like normal websites.

Customizable Tiles
Each tile can be customized to have its own colour, icon, external link, XHR callback … etc

Tiles are grouped into containers which have 2 different sizes: half and full. You can add as many containers as you want to.

Smart Page Content Caching
Page contents are all cached after first load which allows the 2nd visit of the same page to be almost instant.

Integration with Google Analytics
Each tile open can be configured as a normal page open in Google Analytics.

Object oriented PHP framework
All PHP code are written in mordern object oriented style with clean and easy to understand structure.


v1.11 @ 26 Aug 2014
 UPDATE: Updated styling for mobile mode 
v1.10 @ 28 June 2013
 BUGFIX: Fixed a display issue when zoom level is not 100% 
v1.09 @ 15 March 2013
 UPDATE: Simplified file include UPDATE: Updated rounting script to use standard hashbang 
v1.08 @ 27 Feb 2013
 UPDATE: Redesigned Sidebar UPDATE: Generate CSS for different container/widget configurations automatically 
v1.07 @ 14 Feb 2013
 UPDATE: Moved media query to a separate metro_mobile.css UPDATE: Redesigned mobile mode UPDATE: Many JS & CSS improvements 
v1.06 @ 15 Dec 2012
 UPDATE: Minor CSS improvements 
v1.05 @ 30 Oct 2012
 UPDATE: Changed hover effect to scale tiles UPDATE: New settings panel UPDATE: JS & CSS optimizations 
v1.04 @ 04 Oct 2012
 UPDATE: Added a "start" button. Clicking on it toggles the "Detail" view UPDATE: Changed to use "animation" instead of "transition" for the sliding control indicator UPDATE: Changed animation on document load to fade in tiles one by one instead of flipping all at once 
v1.03 @ 29 Sep 2012
 UPDATE: Allow setting theme on containers to make all tiles display in one colour 
v1.02 @ 21 Sep 2012
 UPDATE: Allow setting widget URL to empty string to stop opening widget on click 
v1.01 @ 14 Sep 2012
 UPDATE: Show sliding control button indicator only for 1st time users UPDATE: JavaScript performance improvements 
v1.00 @ 09 Sep 2012
 UPDATE: Initial release 

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


10 September 12

Last Update:
27 August 14

High Resolution:

Compatible Browsers:
IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS, PHP, Layered PNG

Software Version:
PHP 4.x, PHP 5.x, PHP 5.0 - 5.2, PHP 5.3


eCommerce, All Items, MelonHTML5, Nativation, animation, css3, html5, javascript, jquery, metro, tile, windows 8