Material Design风格下拉菜单

所属分类:导航-其他导航

 26960  297  查看评论 (1)
分享到微信朋友圈
X
Material Design风格下拉菜单 ie兼容8

menu.js

menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件,你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。

使用方法

在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。

<link rel="stylesheet" href="menu.css">
<script src="jquery.min.js"></script>             
<script src="menu.js"></script>

HTML结构

创建一个打开下拉菜单的超链接或按钮。

<a href="javascript:;" class="toggle" id="menu-toggle1">
  <i class="material-icons">more_vert</i>
</a>

使用一个无序列表作为下拉菜单的HTML结构。其中,data-menu-toggle指定的是打开下拉菜单的超链接的id。

<ul class="menu" data-menu data-menu-toggle="#menu-toggle1, #menu-toggle2">
  <li>
    <a href="#">Duis aute irure dolor</a>
  </li>
  <li class="menu-separator"></li>
  <li>
    <a href="#">Lorem ipsum dolor sit amet</a>
  </li>
  <li>
    <a href="#">Consectetur adipisicing elit</a>
  </li>
  <li>
    <a href="#">Tempor incididunt ut</a>
  </li>
  <li class="menu-separator"></li>
  <li>
    <a href="#">Excepteur sint</a>
  </li>
</ul>

初始化创建

在页面DOM元素加载完毕之后,通过menu()方法来初始化该下拉菜单插件:

$('[data-menu]').menu();
相关插件-其他导航

圆形的动画导航用CSS和jQuery

一个实验性的全屏导航、动画使用CSS和jQuery,扩大在一个循环。 支持所有主流浏览器。
  其他导航
 36145  399

纯CSS3扇形导航

纯CSS3打造动感漂亮的扇形菜单
  其他导航
 44462  558

手机移动端可滚动的导航代码

这是一款基于移动端滑动导航
  其他导航
 59460  483

jQuery仿微信自定义菜单

jQuery仿微信自定义菜单全屏自适应手机底部弹出菜单
  其他导航
 34006  378

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Brave to do yourself 0
    2017/9/14 19:49:16
    element.style { top: 20px; left: 58px; right: auto;}这个怎么改 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复