深圳網站建設分享:實用的jQuery導航菜單插件
時間:2015-11-10
來源:星翼創想(www.getdigipatient.com)
作者:李飛
Trunk.js是一款非常實用的輕量級響應式跨平臺的jQuery導航菜單插件。該插件會根據viewport的大小來重置導航菜單。在大屏幕設備中,導航菜單以常規的水平菜單展示,在移動手機等小屏幕設備中,它會將菜單轉換為側邊欄隱藏菜單。
使用該響應式導航菜單插件需要引入jQuery、trunk.js和trunk.css文件。 在移動手機等小屏幕設置中,默認只會在頭部顯示一個漢堡包圖標,它的HTML結構如下: 導航菜單的HTML結構如下:使用方法
<
link
rel
=
"stylesheet"
href
=
"css/trunk.css"
>
<
script
src
=
"http://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
>