草庐IT

Foundation 下拉菜单

runoob 2023-04-06 原文

Foundation 下拉菜单

Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值:

实例

<!-- Trigger the Dropdown -->
<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>

<!-- Dropdown content -->
<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>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

尝试一下 »

实例解析

.dropdown 类为按钮添加一个向下的箭头符号"图标。

使用按钮或链接的 data-dropdown="id" 属性来打开下拉菜单。

id 值需要与下拉菜单的内容 (id01) 匹配。

在 <div>, <nav>, <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。

最后初始化 Foundation JS。

注意: 在小屏幕上,所有的下拉菜单的宽度是100%。


下拉菜单尺寸

使用 .tiny, .small, .medium, .large.mega 来修改下拉菜单的宽度。

注意: 在小屏幕上,所有的下拉菜单的宽度是100%。

实例

<!-- Tiny Dropdown: max-width is 200px -->
<ul id="id01" data-dropdown-content class="f-dropdown tiny">..

<!-- Small Dropdown: max-width is 300px -->
<ul id="id02" data-dropdown-content class="f-dropdown small">..

<!-- Medium Dropdown: max-width is 500px -->
<ul id="id03" data-dropdown-content class="f-dropdown medium">

<!-- Large Dropdown: max-width is 800px -->
<ul id="id04" data-dropdown-content class="f-dropdown large">..

<!-- Mega Dropdown: 100% width -->
<ul id="id04" data-dropdown-content class="f-dropdown mega">..

尝试一下 »

下拉菜单边距

可以使用 .content 类为下拉菜单添加内边距:

实例

<!-- Default Dropdown -->
<ul id="id01" data-dropdown-content class="f-dropdown">..

<!-- Dropdown with padding -->
<ul id="id02" data-dropdown-content class="f-dropdown content">..

尝试一下 »

其他实例

<div> 下拉菜单中添加多媒体元素:

实例

<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 类来设置一个分割效果的按钮,分割后会在 <span> 元素上生成一个方向向下的图标按钮:

实例

<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>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

尝试一下 »

有关Foundation 下拉菜单的更多相关文章

  1. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型,我有一个过滤器来检查用户的预订状态,该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而,这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时,我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点? 最佳答案 假设booking_status是模型中的枚举字段,您可以使用:过滤器:booking

  2. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单,以便根据用户输入的内容,取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  3. ruby-on-rails - Scaffold Rails 3 View 中的外键下拉列表 - 2

    我使用脚手架和Rails3创建了2个模型。模型是位置和作业,每个作业都有一个位置。我在脚手架生成代码中创建了所需的引用调用,但是当我查看创建新作业的View时,我看到的只是一个文本框,我应该在其中添加location_id。我怎样才能让它变成下拉菜单以获得更好的用户体验? 最佳答案 想象一下,您有每个位置的titleAPI:http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/collection_select 关于r

  4. ruby - 下拉菜单在应该被选中的时候没有被选中……为什么? - 2

    我正在尝试解决我们测试中的一个错误,我认为它应该有效。我很确定这是selectize或capybara中的错误,但我不明白为什么。我已经进入了capybara的源代码,一切似乎都在正常工作。我真的不确定如何前进。为了测试这个错误,我已经尽可能地把这个错误剥离成一个小的testapplication.请参阅下面的设置bugs/show.html.erbOneTwoThreeFourOneTwoThreeFourbug_spec.rbfeature'bug'doit"specsetup",js:truedovisitbug_pathfind('div.selectize-inputinpu

  5. ruby-on-rails - 在 Rails 中,如何使用字符串数组实现 HTML 选择菜单? - 2

    我有一个FinancialDocument#document_type模型属性。我想让用户从由字符串数组填充的HTML选择菜单中选择文档类型...doctypes=['Invoice','Packingslip','Other']对于每个选项,显示的标签和返回的值都是相同的。我查看了select和collection_select助手,但它们似乎适合选择子模型,而不仅仅是一个String值。我找不到如何让它们达到我的目的。这是我正在尝试的方法(我使用的是Haml,而不是Erb)...form_for(@financial_document)do|f|-doctypes=['Invoic

  6. ruby - 如何在 ruby​​ watir 中选择下拉值选项? - 2

    这是我的下拉菜单,我想在它的值选项上选择它01-Liveanimals我知道如何选择下拉内容,即ie.select_list(:id,"DropDownList_Product").select("01-Liveanimals")实际上我想选择其值01的下拉菜单,我应该为此做什么? 最佳答案 像这样的东西应该可以工作:ie.select_list(:id,"DropDownList_Product").select_value("01")更多信息请访问http://rdoc.info/gems/watir-webdriver/Wat

  7. ruby - capybara 将下拉选项文本写入数组 - 2

    我想在capybara中将下拉列表的选项放入一个数组中。在此过程之后,我期望有一个字符串数组,其中包含所有下拉选项。我尝试了下面的代码,但无论选项计数是多少,我的数组长度都保持为1。periods=Array.new()periods=all('#MainContent_dd')printperiods.length 最佳答案 问题在于all('#MainContent_dd')返回所有具有IDMainContent_dd的元素。假设这是您的下拉列表并且id是唯一的,则periods.length应为1(即periods是选择列表)

  8. ruby - OS X 中作为守护进程运行的脚本的菜单栏图标? - 2

    我有一个ruby​​脚本(https://github.com/daemonza/MacBak)作为守护进程在我的macbook上运行并监视一堆目录的文件更改和rsync发生的任何更改。我想知道我能否让它在顶部的菜单栏中创建一个图标?只是为了让我知道它确实在运行,而不必使用ps检查它。也许以后如果需要的话,我可能希望能够从那里控制脚本,简单的带有停止和状态条目的下拉菜单等。从ObjectC看来我可以调用NSStatusItem来获取图标,但我真的只是想通过我的Ruby脚本轻松地完成它。也许我可以做一些applescript调用? 最佳答案

  9. ruby-on-rails - 如何使用 rails 3.1 覆盖 Zurb Foundation css 属性? - 2

    大家好,我正在开发一个新的Rails应用程序,我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css,还有它的视觉效果;p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的,如果您对app/assets/stylesheets/

  10. ruby-on-rails - Ruby on Rails : allow the user to enter a new information, 或单击下拉菜单选择现有信息 - 2

    这里是新的ROR程序员。我正在尝试构建一个Web应用程序,该应用程序允许用户填写表单,他们在其中输入公司信息,然后通过单击提交,将输入添加到数据库中。目前,如果用户要创建一个新条目,他们会看到几个字段,例如“公司名称”。有一个空白框供他们输入新公司,旁边有一个下拉菜单,用户可以使用该菜单查看数据库中的现有公司。"SelectaCompany")%>我正在寻找一种允许用户输入新公司的方法,或者单击下拉菜单并选择现有公司。目前:如果未在文本框中输入任何内容且未从下拉列表中选择任何选项,则将其保存为空白。如果输入了一些内容,但没有选择任何选项,它将被保存为空白。但是,如果输入内容并从下拉列表

随机推荐