파운데이션 드롭다운 메뉴

Foundation 드롭다운 메뉴를 사용하면 사용자가 미리 정의된 드롭다운 목록에서 값을 선택할 수 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>下拉菜单按钮</h2>
  <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>
</div>

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

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

인스턴스 분석

.dropdown 클래스는 버튼에 "아래쪽 화살표" 아이콘을 추가합니다. .dropdown 类为按钮添加一个向下的箭头符号"图标。

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

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

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

最后初始化 Foundation JS。

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

下拉菜单尺寸

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

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

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

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

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

下拉菜单边距

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

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h2>下拉菜单内容项</h2>
<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>

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

其他实例

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

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px;">

<h2>下拉菜单内容</h2>
<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="paris.jpg" alt="Paris" width="400" height="300">
  <p>Paris, je t'aime.</p>
</div>

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

下拉菜单方向

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

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px;"><br><br><!-- Add <br> elements to enable top dropdown -->

<h2>下拉菜单方向</h2>
<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>

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

下拉菜单触发条件

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

버튼이나 링크의 data-dropdown="id를 사용하세요. " 속성을 사용하여 드롭다운 메뉴를 엽니다.

id 값은 드롭다운 메뉴(id01)의 내용과 일치해야 합니다.

In <div>, <nav>, < code>

.f-dropdown

data-dropdown-content

🎜마지막으로 Foundation JS를 초기화합니다. 🎜🎜참고: 작은 화면에서는 모든 드롭다운 메뉴의 너비가 100%입니다. 🎜

드롭다운 메뉴 크기🎜🎜 < code>.tiny, .small, .medium, .large 또는 .mega 드롭다운 메뉴의 너비 수정 🎜🎜참고: 작은 화면에서는 모든 드롭다운 메뉴의 너비가 100%입니다. 🎜🎜🎜Instance🎜🎜

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h2>下拉菜单触发条件</h2>
<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>

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

</body>
</html>

🎜🎜🎜인스턴스 실행»🎜 🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

드롭다운 메뉴 쪽 🎜🎜에서 .content 클래스를 사용하여 드롭에 패딩을 추가할 수 있습니다. -다운 메뉴: 🎜🎜🎜Example🎜🎜

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>分割按钮</h2>
  <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>
</div>

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

</body>
</html>

🎜🎜🎜예제 실행»🎜🎜온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜< hr/>

다른 인스턴스🎜🎜<div> 드롭다운 메뉴에 요소 추가: 🎜🎜🎜Instances🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요🎜🎜

드롭다운 메뉴 방향 🎜 🎜기본적으로 드롭다운 메뉴는 하단에 있으며 `data-options="align:left|right|top"`를 추가하여 방향을 수정할 수 있습니다. 🎜🎜🎜Example🎜 🎜rrreee🎜🎜 🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.🎜🎜

드롭다운 메뉴 트리거 조건🎜🎜기본적으로 버튼을 클릭하면 드롭다운 메뉴가 표시됩니다. 마우스를 위로 올린 후 표시해야 하는 경우 버튼의 `data-options="is_hover:true"` 속성을 사용할 수 있습니다. 🎜🎜🎜Instance🎜🎜rrreee🎜
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

분할 버튼

버튼에 .split 클래스를 추가하여 분할 효과가 있는 버튼을 설정할 수 있습니다. <span> 요소에 아래쪽 아이콘 버튼을 생성합니다.

Instance

rrreee

Run Instance »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

파운데이션 드롭다운 메뉴

Instance

인스턴스 분석

下拉菜单尺寸

实例

下拉菜单边距

实例

其他实例

实例

下拉菜单方向

实例

下拉菜单触发条件

id 값은 드롭다운 메뉴(id01)의 내용과 일치해야 합니다.

다른 인스턴스🎜🎜<div> 드롭다운 메뉴에 요소 추가: 🎜🎜🎜Instances🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요🎜🎜

분할 버튼

Instance

PHP 중국어 웹사이트