HorizontalNav
这是一款水平方向的 jQuery 导航插件,能够自适应容器的宽度。使用示例:
HTML:
1
2
3
4
5
6
7
8
9
|
<nav class=
"horizontal-nav full-width horizontalNav-notprocessed"
>
<ul>
<li><a href=
"#"
>Navigation Item</a></li>
<li><a href=
"#"
>Work</a></li>
<li><a href=
"#"
>Blog</a></li>
<li><a href=
"#"
>About</a></li>
<li><a href=
"#"
>Contact</a></li>
</ul>
</nav>
|
CSS:
JavaScript:
1
2
3
4
|
$(document).ready(
function
() {
// Call horizontalNav on the navigations wrapping element
$(
'.full-width'
).horizontalNav({});
});
|
stickyMojo
stickyMojo 是一款轻量的,灵活的侧栏固定导航插件,兼容 Firefox, Chrome, Safari, 以及 IE8+。
在 IE 更低版本的浏览器能够优雅降级处理,使用示例:
HTML:
1
2
3
4
5
6
7
8
9
10
11
|
<div id=
"wrapper"
>
<div id=
"sidebar"
>
<p>sidebar</p>
</div>
<div id=
"main"
>
<p>main</p>
</div>
<div id=
"footer"
>
Footer
</div>
</div>
|
CSS:
JavaScript:
1
2
3
|
$(document).ready(
function
(){
$(
'#sidebar'
).stickyMojo({footerID:
'#footer'
, contentID:
'#main'
});
});
|
ddSlick
ddSlick 是一款非常轻量的插件,能够帮助你实现自定义的下拉导航菜单效果(需要FQ),使用示例:
1
2
3
4
5
6
7
8
9
|
$(
'#demoBasic'
).ddslick({
data: ddData,
width: 300,
imagePosition:
"left"
,
selectText:
"Select your favorite social network"
,
onSelected:
function
(data) {
console.log(data);
}
});
|
jQuery Collapse
jQuery Collapse 这个插件为您提供一个方便和轻量级的解决方案,实现风格各异的折叠导航功能,使用示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div id=
"demo"
data-collapse=
"accordion persist"
>
<h2>Fruits</h2>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
<h2>Hint</h2>
<div>
<p>One fruit a day keeps the doctor away</p>
</div>
<h2>Third</h2>
<p>Just a paragraph here</p>
</div>
|
data-collapse 属性能够自动触发脚本,更详细教程参考这里:使用帮助。
jQuery Accordion
Akordeon 提供了一种实现手风琴效果的轻量解决方案,能够在有限的空间内展现各种形式的数据,使用示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<div
class
=
"akordeon"
>
<div
class
=
"akordeon-item"
>
<div
class
=
"akordeon-item-head"
>
<div
class
=
"akordeon-item-head-container"
>
<div
class
=
"akordeon-heading"
>
Header Here
</div>
</div>
</div>
<div
class
=
"akordeon-item-body"
>
<div
class
=
"akordeon-item-content"
>
Contents here
</div>
</div>
</div>
<div
class
=
"akordeon-item-head"
>
<div
class
=
"akordeon-item-head-container"
>
<div
class
=
"akordeon-heading"
>
Header Here
</div>
</div>
</div>
<div
class
=
"akordeon-item-body"
>
<div
class
=
"akordeon-item-content"
>
Contents here
</div>
</div>
</div>
<script>
$(document).ready(
function
() {
$(
'.akordeon'
).akordeon();
});
</script>
|
特别说明:需要FQ访问(⊙﹏⊙b汗)