简单的jQuery响应式弹出菜单插件

当前位置:主页 > jQuery库 > 菜单和导航 > 简单的jQuery响应式弹出菜单插件
简单的jQuery响应式弹出菜单插件
分享:

    插件介绍

    jQueryPopMenu是一款简单的响应式jQuery弹出菜单插件。该弹出菜单有基本的自适应特性。可以设置包括菜单背景色、菜单按钮大小、圆角或者直角等属性。

    浏览器兼容性

    浏览器兼容性
    时间:2016-02-26
    阅读:
麦子学院
简要教程

jQueryPopMenu是一款简单的响应式jQuery弹出菜单插件。该弹出菜单有基本的自适应特性。可以设置包括菜单背景色、菜单按钮大小、圆角或者直角等属性。

使用方法

使用该弹出菜单插件需要引入jquery和jquery.popmenu.js文件,图标可使用FontAwesome字体图标。

         
<script src="js/jquery.min.js"></script>
<script src="js/jquery.popmenu.js"></script>                  
                
HTML结构

该弹出菜单插件的基本HTML结构使用一个<div>元素来包裹一个无序列表。

<div id="demo_box">
    <span class="pop_ctrl"><i class="fa fa-bars"></i></span>
    <ul id="demo_ul">
        <li class="demo_li">
          <a href="#"><div><i class="fa fa-home"></i></div><div>Home</div></a>
        </li>
        <li class="demo_li">
          <a href="#"><div><i class="fa fa-cloud"></i></div><div>Cloud</div></a>
        </li>
        <li class="demo_li">
          <div><i class="fa fa-cog"></i></div><div>settings</div>
        </li>
        <li class="demo_li">
          <div><i class="fa fa-envelope"></i></div><div>E-mail</div>
        </li>
        <li class="demo_li">
          <div><i class="fa fa-clock-o"></i></div><div>Clock</div>
        </li>
        <li class="demo_li">
          <div><i class="fa fa-folder"></i></div><div>Files</div>
        </li>
        <li class="demo_li">
          <div><i class="fa fa-heart-o"></i></div><div>Favourites</div>
        </li>
        <li class="demo_li">
          <div><i class="fa fa-mobile"></i></div><div>Mobile</div>
        </li>
        <li class="demo_li">
          <div><i class="fa fa-power-off"></i></div><div>Exit</div>
        </li>
    </ul>
</div>
                
初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该弹出菜单插件。

$(' #target ').popmenu();                  
                

配置参数

默认的配置参数为:

{
  'controller': true,       //设定是否使用控制按钮,设置为false,菜单将一直显示
  'width': '300px',         //菜单总宽度
  'background': '#34495e',  //菜单背景色
  'focusColor': '#1abc9c',  //菜单按钮hover时颜色
  'borderRadius': '10px',   //边角弧度,设置为0,为直角
  'top': '50',              //上移距离,向上移动多少就设置为多少
  'left': '0',              //左移距离,设置同上
  'iconSize': '100px'       //菜单按钮大小,目前是正方形设计(宽高相同)
}                  
                
  • controller:设定是否使用控制按钮,设置为false,菜单将一直显示。
  • width:菜单总宽度。
  • background:菜单背景色。
  • focusColor:菜单按钮hover时颜色。
  • borderRadius:边角弧度,设置为0,为直角。
  • top:上移距离,向上移动多少就设置为多少。
  • left:左移距离,设置同上。
  • iconSize:菜单按钮大小,目前是正方形设计(宽高相同)。

使用该弹出菜单插件按钮可以是纯文字,内容排版可以自行安排设计。

另外,控制按钮对应.pop_ctrl,即名字为pop_ctrl的class,使用class是为了方便同时使用多个菜单,各菜单间无影响。

jQueryPopMenu弹出插件的github地址为:https://github.com/gucheen/jQueryPopMenu

网友评论