html左侧工具栏插件,jQuery绚丽的菜单插件sidenav

插件描述：sidenav是一款和绚丽的垂直菜单,样式简洁时尚的jQuery和CSS3侧边栏菜单插件。

直接部署即可，文件夹index.html直接打开可查看效果图，js和css文件都在对应文件夹中

sidenav

sidenav是一款简洁时尚的jQuery和CSS3侧边栏菜单插件。该侧边栏插件具有手风琴的多级菜单效果，使用简单，效果简洁大方。

使用方法

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

HTML结构

该侧边栏菜单的HTML结构如下。

BRAND

Section Header

secondary text

• store

  Lorem ipsum

  arrow_drop_down

  arrow_drop_up

  • Dolor sit amet
  • Consectetur adipisicing
  • Elit

• payment

  Sed do eiusmod

  arrow_drop_down

  arrow_drop_up

  • Tempor incididunt
  • Labore

• shopping_cart

  Dolore magna

  arrow_drop_down

  arrow_drop_up

  • Aliqua
  • Exercitation
  • Minim veniam

• assignment_ind

  Nostrud ullamco

• alarm

  Commodo

Another Section Header

• date_range

  Reprehenderit

  arrow_drop_down

  arrow_drop_up

  • Voluptate
  • Excepteur

• backup

  Occaecat

• settings

  Deserunt

使用下面的代码来创建一个汉堡包按钮，用于打开侧边栏菜单。

menu

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该侧边栏菜单。$('[data-sidenav]').sidenav();