文章: 阅读:

Foundation 下拉菜单

CSSFoundation

前言

  • Foundation 下拉菜单。

1、下拉菜单

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</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>

    <!-- 初始化 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。

2、下拉菜单尺寸

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

  • 在小屏幕上，所有的下拉菜单的宽度是 100%。

  • 实例

    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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <!-- Tiny Dropdown: max-width is 200px -->
    <a href="#" data-dropdown="id01" class="button dropdown">Tiny</a>
    <ul id="id01" data-dropdown-content class="f-dropdown tiny">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <br>

    <!-- Small Dropdown: max-width is 300px  -->
    <a href="#" data-dropdown="id02" class="button dropdown">Small</a>
    <ul id="id02" data-dropdown-content class="f-dropdown small">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <br>

    <!-- Medium Dropdown: max-width is 500px  -->
    <a href="#" data-dropdown="id03" class="button dropdown">Medium</a>
    <ul id="id03" data-dropdown-content class="f-dropdown medium">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <br>

    <!-- Large Dropdown: max-width is 800px  -->
    <a href="#" data-dropdown="id04" class="button dropdown">Large</a>
    <ul id="id04" data-dropdown-content class="f-dropdown large">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <br>

    <!-- Mega Dropdown: 100% width -->
    <a href="#" data-dropdown="id05" class="button dropdown">Mega</a>
    <ul id="id05" data-dropdown-content class="f-dropdown mega">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>

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

  • 效果 🔗

3、下拉菜单边距

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <a href="#" data-dropdown="id01" class="button dropdown">没有内边距</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>

    <a href="#" data-dropdown="id02" class="button dropdown">有内边距</a>
    <ul id="id02" data-dropdown-content class="f-dropdown content">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>

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

  • 效果 🔗

4、下拉菜单中添加多媒体元素

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <a href="#" data-dropdown="id01" class="button dropdown">下拉按钮</a>
    <div id="id01" data-dropdown-content class="f-dropdown medium content">
        <h4>Paris Title</h4>
        <p>Some text.. some text..</p>
        <img src="https://demo.qianchia.com/media/image/demo/demo11.png" alt="Paris" width="400" height="300" />
        <p>Paris, je t'aime.</p>
    </div>

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

  • 效果 🔗

5、下拉菜单方向

  • 默认情况下下拉菜单在底部，可以通过添加 data-options="align: left | right | top" 来修改其方向：

  • 实例

    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
    <a href="#" data-dropdown="id01" data-options="align: right;" class="button dropdown">右边</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>

    <a href="#" data-dropdown="id02" data-options="align: top;" class="button dropdown">顶部</a>
    <ul id="id02" 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>

    <a href="#" data-dropdown="id03" data-options="align: bottom;" class="button dropdown">底部</a>
    <ul id="id03" 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>

    <a href="#" data-dropdown="id04" data-options="align: left;" class="button dropdown">左边</a>
    <ul id="id04" 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>

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

  • 效果 🔗

6、下拉菜单触发条件

  • 默认情况下，下拉菜单在点击按钮后显示。如果需要在鼠标移动上去后显示，可以在按钮上使用 data-options="is_hover: true;" 属性:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <a href="#" data-dropdown="id01" data-options="is_hover: true;" class="button dropdown">鼠标移动到我这</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>

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

  • 效果 🔗

7、分割按钮

  • 可以在按钮上添加 .split 类来设置一个分割效果的按钮，分割后会在 <span> 元素上生成一个方向向下的图标按钮:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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>

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

  • 效果 🔗

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-12 20:13


评论


文章目录
  1. 1. 前言
  2. 2. 1、下拉菜单
  3. 3. 2、下拉菜单尺寸
  4. 4. 3、下拉菜单边距
  5. 5. 4、下拉菜单中添加多媒体元素
  6. 6. 5、下拉菜单方向
  7. 7. 6、下拉菜单触发条件
  8. 8. 7、分割按钮
隐藏目录