Foundation 下拉菜单

Foundation下拉菜单使用指南

Foundation provides a very useful dropdown menu option that can help to create clean, simple, and easy-to-use navigation menus. This dropdown menu is designed to be flexible and customizable, allowing you to create menus that match your website’s color and design scheme. In this tutorial, we will guide you through the process of using Foundation dropdown menus.

准备工作

初始化 Foundation，查看zurb-foundation官方文档
确保有用到jQuery，Foundation依赖于jQuery，所以需要在HTML文件中导入jQuery
确定自己的下拉菜单大概长什么样，需要设置下拉菜单的大小、样式、位置等等。如example：

基本用法

使用Foundation下拉菜单，您需要遵循以下步骤：

在HTML中定义一个导航菜单。这个菜单必须是一个无序列表 (

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu vertical">
      <li><a href="#">Sub-item 1A</a></li>
      <li><a href="#">Sub-item 1B</a></li>
      <li><a href="#">Sub-item 1C</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

上述代码创建了一个带有3项的导航菜单。每个菜单项都可以包含一个或多个子菜单项。

导入所需要的CSS和JavaScript文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
<script src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>

初始化下拉菜单
```
 $(document).foundation();
```
这将初始化下拉菜单的外观和行为。

自定义下拉菜单

更改鼠标悬停颜色
```
 .dropdown.menu li:hover {
   background-color: #336699;
 }
```
将鼠标悬停颜色更改为您喜欢的任何颜色。

更改菜单背景色、字体和悬停时的颜色

 .dropdown.menu {
   background-color: #fff;
   font-family: 'Open Sans', sans-serif;
   .is-dropdown-submenu-item:hover > a {
     background-color: #eeeeee;
   }
 }

您可以更改下拉菜单的背景颜色、字体和鼠标悬停颜色。

修改菜单样式

 .dropdown.menu {
   & > li {
     margin: 0 15px;
     border-radius: 3px;
     & > a {
       padding: 20px 10px;
       color: #111;
       font-weight: bold;
       &:hover {
         background: #f6f6f6;
       }
     }
   }
 }

给菜单添加样式非常容易，您可以更改菜单项的大小、颜色、字体等等。

结论

Foundation dropdown菜单是一种轻松创建优雅，风格统一的下拉菜单的方式。只需要简单花费几分钟调整菜单的样式和色彩，即可创建出适合您网站主题的菜单。希望本文能帮助您使用Foundation的Dropdown菜单。

Foundation Joyride Foundation 价格表