深圳网站建设分享:实用的jQuery导航菜单插件
时间:2015-11-10
来源:星翼创想(www.iswweb.com)
作者:李飞
Trunk.js是一款非常实用的轻量级响应式跨平台的jQuery导航菜单插件。该插件会根据viewport的大小来重置导航菜单。在大屏幕设备中,导航菜单以常规的水平菜单展示,在移动手机等小屏幕设备中,它会将菜单转换为侧边栏隐藏菜单。
使用该响应式导航菜单插件需要引入jQuery、trunk.js和trunk.css文件。 在移动手机等小屏幕设置中,默认只会在头部显示一个汉堡包图标,它的HTML结构如下: 导航菜单的HTML结构如下:使用方法
<
link
rel
=
"stylesheet"
href
=
"css/trunk.css"
>
<
script
src
=
"//code.jquery.com/jquery-1.11.3.min.js"
></
script
>
<
script
src
=
"js/trunk.js"
></
script
>
HTML结构
<
header
class
=
"slide"
>
<
ul
id
=
"navToggle"
class
=
"burger slide"
>
<
li
></
li
><
li
></
li
><
li
></
li
>
</
ul
>
</
header
>
<
nav
class
=
"slide"
>
<
ul
>
<
li
><
a
href
=
"#"
class
=
"active"
>HOME</
a
></
li
>