当前位置:主页 > 网页特效 > 菜单导航 >

jQuery超酷隐藏菜单放大显示特效插件

发布时间:2018/07/04 来源:互联网 浏览: 关键词:jquery 菜单导航 隐藏菜单 
jQuery超酷隐藏菜单放大显示特效插件 jQuery超酷隐藏菜单放大显示特效插件
阿里云

简要教程

这是一款jQuery超酷隐藏菜单放大显示特效插件。通过这个插件,你可以在你的网站上添加一个功能类似的菜单,你还可以通过参数设置来定制这个隐藏菜单插件。

HTML结构

实现需要在html的头部引入jQuery和jQuery.square_menu.js以及square_menu.css文件。

<body>
  ..
  <divclass="sidemenu">
    <navclass="left">
      <ahref="...">...</a>
      <ahref="...">...</a>
      <ahref="...">...</a>
    </nav>
    <navclass="right">
      <ahref="...">...</a>
      <ahref="...">...</a>
      <ahref="...">...</a>
    </nav>
  </div>
  ..
</body>

上面的代码中使用了两个nav元素,这一点十分重要,因为插件需要两个独立的动画元素来创建菜单展开动画。所以要确保在你的Html结构中有两个nav。在nav中的内容你可以随意定制。 JAVASCRIPT

通过下面的jQuery代码来调用隐藏菜单插件:

$(".sidemenu").square_menu({
    flyDirection:"bottom",
    button:"Menu",
    animationStyle:"vertical",
    closeButton:"X"
});

下面是一些可用参数:

flyDirection:该参数定义隐藏菜单出现的方向。可用的值是:"top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" 和 "bottom-right"。默认值为"bottom"。

button:该参数用于设置触发隐藏菜单的按钮。设置为"false"隐藏按钮,默认值为字符串"Menu"。

animationStyle:该参数用于设置隐藏菜单展开的动画类型。可用值为:"vertical"和"horizontal"。Vertical最好和flyDirection的"top" 或 "bottom"一起使用。Horizontal最好和flyDirection的"left" 或 "right"一起使用。默认值为"vertical"。

closeButton:该参数定义隐藏菜单是否有关闭按钮。该参数接收HTML标签或字符串。要隐藏关闭按钮设置为"false"。默认字符串为"X"。

公共方法

有时候你需要创建自己的触发按钮,通过这些公共方法,你可以通过编程的方式使用下面的公共方法来自定义触发按钮。

$.fn.openMenu()

你可以像下面的代码一样手动触发隐藏菜单。这个方法和toggle方法的功能一样,例如,如果调用这个方法时隐藏菜单已经打开,那么它会触发关闭菜单的函数。

$.fn.closeMenu()

你可以像下面的代码一样手动关闭隐藏菜单。

$(".sidemenu").closeMenu();

应用举例:

$(".your-button").click(function() {
$(".sidemenu").openMenu();
});

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top