4 Positions

Every one is responsive

Left Right Top Bottom

Colors!

Infinite Colors (with code)

#1777a6 #662d91 #754c24 #9e005d

Animations!

Pure CSS animation (14 animations)
This apply to the submenus. (Menu Options has childs)

fadeIn fadeInRight
fadeInLeft flipInX
flipInY fadeInUpBig
fadeInDownBig fadeInLeftBig
fadeInRightBig bounceIn
bounceInUp bounceInDown
bounceInLeft bounceInRight


Easy to configure

$.MetroMenu(
{
  backicon: "images/back.png",
  color1: "#01a2a0",
  color2: "#008d8b",
  withtooltip: true,
  closeonclick: true,
  escclose: true,
  items:[
     {
      name: Go Gmail",
      icon: images/gmail.png",
      link: http://sc.chinaz.com"
     },
     {
     name: Go Skype",
     icon: images/skype.png",
     link: http://sc.chinaz.com"
     }]
}
);

Test that Menu!

Adding SubMenu

$.MetroMenu(
{
   backicon: "images/back.png",
   color1: "#95b201",
   color2: "#8aa404",
   withtooltip: true,
   closeonclick: true,
   escclose: true,
   items:[
   {
     name: Mail",
     icon: images/mail.png",
     items:[{
       name: Mail",
       icon: images/mail.png"
     },
     {
       name: Open Mail",
       icon: images/mailopen.png"
     }]
     },
     {
     name: Office",
     icon: images/office.png",
     items:[{
       name: Word",
       icon: images/word.png"
     },
     {
       name: Outlook",
       icon: images/outlook.png"
     }]
     }]
   }
);

Sub Menu Test!

关闭方法

如果你想关闭的时候可以通过按键（ESC）来关闭它.
当然你也可以用 "CloseMetroMenu()" 来通过代码关闭。

Close Menu

Callback

返回默认状态.
If is an SubMenu Option, will return the Primary Option + "." + Secondary Option

Callback Test