下拉菜单中添加多媒体元素:
实例
<
a
href=
"#"
data-dropdown=
"id01"
class=
"button dropdown"
>Dropdown Button
<
/a
>
<
div
id=
"id01"
data-dropdown-content class=
"f-dropdown medium content"
>
<
h4
>Paris Title
<
/h4
>
<
p
>Some text.. some text..
<
/p
>
<
img
src=
"paris.jpg"
alt=
"Paris"
width=
"400"
height=
"300"
>
<
p
>Paris, je t'aime.
<
/p
>
<
/div
>
尝试一下 »
下拉菜单方向
默认情况下下拉菜单在底部,可以通过添加 data-options="align:left|right|top"
来修改其方向:
实例
<
a
href=
"#"
data-dropdown=
"id01"
data-options=
"align:right"
class=
"button dropdown"
>Right
<
/a
>
<
a
href=
"#"
data-dropdown=
"id02"
data-options=
"align:top"
class=
"button dropdown"
>Top
<
/a
>
<
a
href=
"#"
data-dropdown=
"id03"
data-options=
"align:bottom"
class=
"button dropdown"
>Bottom
<
/a
>
<
a
href=
"#"
data-dropdown=
"id04"
data-options=
"align:left"
class=
"button dropdown"
>Left
<
/a
>
尝试一下 »
下拉菜单触发条件
默认情况下,下拉菜单在点击按钮后显示。如果你需要在鼠标移动上去后显示,可以在按钮上使用 data-options="is_hover:true"
属性:
实例
<
a
href=
"#"
data-dropdown=
"id01"
data-options=
"is_hover:true"
class=
"button dropdown"
>Hover over me
<
/a
>
<
ul
id=
"id01"
data-dropdown-content class=
"f-dropdown"
>
<
li
>
<
a
href=
"#"
>Link 1
<
/a
>
<
/li
>
<
li
>
<
a
href=
"#"
>Link 2
<
/a
>
<
/li
>
<
li
>
<
a
href=
"#"
>Link 3
<
/a
>
<
/li
>
<
/ul
>
尝试一下 »
分割按钮
我们可以在按钮上添加 .split
类来设置一个分割效果的按钮,分割后会在 元素上生成一个方向向下的图标按钮:
实例
<
button
class=
"button split"
>Split Button
<
span
data-dropdown=
"id01"
>
<
/span
>
<
/button
>
<
ul
id=
"id01"
data-dropdown-content class=
"f-dropdown"
>
<
li
>
<
a
href=
"#"
>Link 1
<
/a
>
<
/li
>
<
li
>
<
a
href=
"#"
>Link 2
<
/a
>
<
/li
>
<
li
>
<
a
href=
"#"
>Link 3
<
/a
>
<
/li
>
<
/ul
>
<
script
>
$(document).ready(function() {
$(document).foundation();
})
<
/script
>
尝试一下 »
当前文章:创新互联Foundation教程:Foundation下拉菜单
分享链接:http://www.shufengxianlan.com/qtweb/news18/218718.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联