Metro 图标导航菜单 强大的和可定制的菜单

4 Positions

Every one is responsive



Colors!

Infinite Colors (with code)



Animations!

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










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"
     }]
}
);



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"
     }]
     }]
   }
);



关闭方法

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



Callback

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



适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。

来源:站长素材