javafx 菜单组件_基础6：新菜单组件

javafx 菜单组件

If you’ve used Foundation before you might have found the menu / navigation components a bit tedious to use. If you wanted to build an icon bar or horizontal sidebar navigation menu, you would need to use those components exactly as they are (and customise them to suit your needs if you wanted anything else).

如果您之前使用过Foundation ，则可能会发现菜单/导航组件的使用有点繁琐。如果要构建图标栏或水平边栏导航菜单，则需要完全按原样使用这些组件(并在需要时对其进行自定义以满足您的需求)。

With the release of Foundation 6, all of that has changed. In one of their biggest overhauls to date, Zurb have managed to simplify the process so you can power along with your development.

随着Foundation 6的发布，所有这些都改变了。在迄今为止最大的一次大修中，Zurb设法简化了流程，因此您可以随开发一起发展。

In a previous post, I discussed many of the new features in Foundation 6. In this post, I’ll cover navigation menus. You’ll see that the Zurb team now offers a pared-back build, along with several really useful JavaScript plugins to make the menu system better than ever.

在上一篇文章中，我讨论了Foundation 6中的许多新功能。在这篇文章中，我将介绍导航菜单。您将看到Zurb团队现在提供了简化的版本，以及几个真正有用JavaScript插件，以使菜单系统比以往更好。

导航菜单简化 (Navigation Menu Streamlining)

Navigation components have gone under a serious reconstruction in Foundation 6. In Foundation 5 you had a large range of menus to choose from, each of which required its own specific markup, settings, and styles to work correctly.

导航组件已经在Foundation 6中进行了认真的重建。在Foundation 5中，您有多种菜单可供选择，每个菜单都需要自己的特定标记，设置和样式才能正常工作。

With the latest version, Zurb has re-worked these different menus into one large menu with multiple configuration options. So the following menus are now gone:

在最新版本中，Zurb将这些不同的菜单重新处理为一个具有多个配置选项的大型菜单。 因此，以下菜单消失了 ：

Inline List – Used to create the standard horizontal menu you’re used to

内联列表 –用于创建您习惯的标准水平菜单
Side Nav – Used to outline a vertical menu, normally used in sidebars or other vertical locations

侧面导航 –用于概述垂直菜单，通常用于侧边栏或其他垂直位置
Icon Bar – Used to showcase menu items along with icons (or sometimes just icons).

图标栏 –用于展示菜单项以及图标(有时只是图标)。
Sub Nav – Used to create sub-navigation elements, such as links to different parts of a single page.

子导航 –用于创建子导航元素，例如指向单个页面不同部分的链接。

These have been replaced with a single component called Menu.

这些已被称为Menu的单个组件替换。

The menu is straight-forward. You define your markup with your a and li items inside your ul element with the menu class:

菜单简单明了。您可以使用menu类在ul元素内的a和li项目定义标记：

<ul class="menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>

This new menu component offers the same basic functionality as the previous menus in Foundation 5, but has them as options so you can choose if your menu is to be a vertical menu, horizontal menu, icon bar, etc.

这个新的菜单组件提供与Foundation 5中以前的菜单相同的基本功能，但是将它们作为选项，因此您可以选择菜单是垂直菜单，水平菜单，图标栏等。

简单菜单 (Simple Menu)

By default, the menu class adds padding, subtle colours, and other layout aspects to help get you started. If you prefer to style everything yourself, you can add the .simple class to your menu and it will strip out most of the styling.

默认情况下， menu类添加了填充，微妙的颜色和其他布局方面，以帮助您入门。如果您希望自己设置所有样式，则可以将.simple类添加到菜单中，它将删除大部分样式。

<!-- A basic menu with most styling stripped out -->
<ul class="menu simple">
<li><a href="#">Vanilla</a></li>
<li><a href="#">Strawberry</a></li>
<li><a href="#">Chocolate</a></li>
<ul>

水平和垂直菜单 (Horizontal and Vertical Menus)

Menus will be horizontal by default, which will work much like the older ‘inline menu’ from Foundation 5. If you want to have a vertical menu instead, it’s as easy as adding the vertical class to the menu. We could use this feature to create, for example, a listing of our latest news items.

默认情况下，菜单将为水平菜单，其工作原理与Foundation 5中较旧的“内联菜单”类似。如果要使用垂直菜单，则只需将vertical类添加到菜单中就可以了。我们可以使用此功能来创建例如最新新闻列表。

<!-- Basic vertical menu example for showcasing blog items -->
<ul class="menu vertical">
<li><a href="#">Dynamic Interactivity, 21st December 2015</a></li>
<li><a href="#">Web Fundamentals, 12th December 2015</a></li>
<li><a href="#">Intro to CSS, 02nd December 2015</a></li>
</ul>

子菜单和嵌套 (Sub Menus and Nesting)

If you’re going to have sub-menus, you will most likely end up using one of the menu plugins such as the dropdown/drilldown components, however you can easily make a sub-menu offset to the left for use in a vertical menu by adding the nested class:

如果您要使用子菜单，则很有可能最终会使用菜单插件之一，例如下拉/向下钻取组件，但是您可以轻松地使子菜单向左偏移以用于垂直菜单通过添加nested类：

<!-- using the nested class to create
a sub-menu inside a vertical menu -->
<ul class="menu vertical">
<li><a href="#">Course One</a>
<ul class="menu vertical nested">
<li><a href="#">Course One - One</a></li>
<li><a href="#">Course One - Two</a></li>
</ul>
</li>
<li><a href="#">Course Two</a></li>
</ul>

图标菜单 (Icon Menus)

Icon menus work really well in app-centric designs and can be implemented easily with minimal styling.

图标菜单在以应用程序为中心的设计中确实能很好地工作，并且可以通过最少的样式轻松实现。

To a standard menu, you add your icon image inside a  tag and wrap that inside your <a> tag. You can use either an image for your icon or optionally one of the Foundation Icon Font elements.

在标准菜单中，将图标图像添加到标签内，然后将其包装在<a>标签内。您可以使用图像作为图标，也可以使用“ 基础图标字体”元素之一。

If you opt for the icon font you need to include it manually in your project and instead of using a span you can use an  element with the appropriate classes.

如果选择图标字体，则需要在项目中手动添加它，而不是使用跨度，可以将元素与相应的类一起使用。

<!-- Simple icon menu using Foundation's icon font -->
<ul class="menu">
<li><a href="#"><i class="fi-save"></i> <span>Save</span></a></li>
<li><a href="#"><i class="fi-x"></i> <span>Delete</span></a></li>
<li><a href="#"><i class="fi-arrow-left"></i> <span>Back</span></a></li>
<li><a href="#"><i class="fi-arrow-right"></i> <span>Forward</span></a></li>
</ul>

All we need to do is add the correct class name to the  element and we are good to go!

我们要做的就是将正确的类名称添加到元素，我们一切顺利！

By default, the standard layout is a horizontal menu with icons to the left of each option. If you wanted the icon above the menu elements we can add the .icon-top class. This looks much more like what you see on mobile platforms with a little icon above and text below.

默认情况下，标准布局是一个水平菜单，每个选项的左侧都有图标。如果您想要菜单元素上方的图标，我们可以添加.icon-top类。这看起来更像是您在移动平台上看到的内容，上面带有一个小图标，下面是文本。

下拉菜单，下拉菜单和手风琴菜单 (Dropdown, Drilldown, and Accordion Menus)

The standard menu is great but sometimes you need something more robust that handles sub-child elements and interactivity dynamically. Foundation 6 expands upon the previous versions of the Dropdown, Drilldown, and Accordion menus. These menus are all accessible via keyboard navigation and use semantic markup to make your development easier.

标准菜单很棒，但有时您需要更强大的功能来动态处理子元素和交互性。 Foundation 6在Dropdown ， Drilldown和Accordion菜单的先前版本上进行了扩展。这些菜单都可以通过键盘导航访问，并使用语义标记使开发更容易。

Because these menus use the JavaScript library, you need to set it up by doing the following:

由于这些菜单使用JavaScript库，因此您需要通过以下步骤进行设置：

You can either call $(document).foundation() to set it up if your build has it included, or

您可以调用$(document).foundation()进行设置$(document).foundation()如果您的构建中包含它)，或者
Include your specific menu and create it. For example to set up a drilldown menu you would define var elem = new Foundation.Drilldown(element) (after including the required dependencies).

包括您的特定菜单并创建它。例如，要设置向下钻取菜单，您将定义var elem = new Foundation.Drilldown(element) (包括所需的依赖项之后)。

The Dropdown menu should be really familiar to you. It’s the standard menu design where child elements are displayed when their parents are interacted with (via hovering or keyboard). Adding the data-dropdown-menu attribute to the menu will trigger all of this dynamically.

下拉菜单应该是您真正熟悉的。这是标准菜单设计，在与父元素互动(通过悬停或键盘)时显示子元素。将data-dropdown-menu属性添加到菜单将动态触发所有这些操作。

The Drilldown menu is unique in that instead of showing you a new menu on top of, or below, the current menu, it slides a new menu across the current menu, letting you ‘drill down’ X levels until you find the link you’re after. This is really useful in a situation when you have limited screen space such as on mobile.

“ 向下钻取”菜单的独特之处在于，它不会在当前菜单的上方或下方显示新菜单，而是会在当前菜单上滑动一个新菜单，让您“向下钻取” X级别，直到找到您要的链接为止。重新之后。这在屏幕空间有限的情况下(例如在移动设备上)非常有用。

The JavaScript handles the generation of the back button and positioning. All you need to do is include the data-drilldown attribute to all of the menu’s elements inside your menu.

JavaScript处理后退按钮和位置的生成。您要做的就是将data-drilldown属性包括在菜单内所有菜单元素中。

The Accordion menu is exactly what it sounds like, an accordion menu that you can click to toggle (show/hide) sub-menus by clicking on a parent item. Include the data-accordion-menu attribute to the top level menu to get it to work.

“ 手风琴”菜单听起来确实像是一个手风琴菜单，您可以通过单击父项来单击以切换(显示/隐藏)子菜单。将data-accordion-menu属性包含到顶层menu以使其起作用。

All of the menu plugins have their own functions, events, and options that you can configure. For example if you wanted to trigger some functionality when you close a sub-menu inside the Accordion menu you could hook onto the up.zf.accordion menu event. For example:

所有菜单插件都有自己的功能，事件和可配置的选项。例如，如果您想在关闭“手风琴”菜单内的子菜单时触发某些功能，则可以挂接到up.zf.accordion menu事件。例如：

// do something when the accordion closes
$('.my-accordion-menu').on('up.zf.accordion menu', function() {
alert('Menu Closed');
});

Overall the functions, events, and options for these have all been streamlined in Foundation 6 so if you implemented these using Foundation 5 you might want to check how it’s all changed.

总体而言，这些功能，事件和选项在Foundation 6中都得到了简化，因此，如果您使用Foundation 5来实现这些功能，事件和选项，则可能需要检查其全部更改。

响应式导航 (Responsive Navigation)

This feature is new to Foundation 6. Previously if you wanted to display different menu styles on different device profiles, you would define multiple menus and show/hide them. With this latest version, you can create a single responsive menu that will dynamically change depending on what breakpoint/device profile is being used.

该功能是Foundation 6的新增功能。以前，如果要在不同的设备配置文件上显示不同的菜单样式，则需要定义多个菜单并显示/隐藏它们。使用此最新版本，您可以创建一个响应菜单，该菜单将根据所使用的断点/设备配置文件而动态变化。

We start by defining our menu as we normally do:

首先像通常那样定义菜单：

<ul class="menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>

To make the menu responsive, use the data-responsive-menu attribute and provide the following:

要使菜单具有响应性，请使用data-responsive-menu属性并提供以下内容：

The default menu type (for example it could be the drilldown, dropdown or accordion menu)

默认菜单类型(例如，它可以是drilldown ， dropdown或accordion菜单)
Additional menu types prefixed with the size of the screen profile. For example small-dropdown, medium-drilldown, large-dropdown, etc.

以屏幕配置文件大小为前缀的其他菜单类型。例如， small-dropdown ， medium-drilldown small-dropdown ， large-dropdown等。

Supplying this info will let our menu transform depending on what values we passed. This is useful if you want to have a standard dropdown menu on larger devices but then fall back to a vertical accordion/drilldown menu on small devices.

提供此信息将使我们的菜单根据传递的值进行转换。如果要在大型设备上使用标准的下拉菜单，然后又在小型设备上使用垂直手风琴/下拉菜单，则此功能很有用。

If you customised your breakpoint classes, you can optionally define even more menu combinations (for example showing the dropdown menu on extra large screens but falling back to drilldown menus when on large and below).

如果您自定义了断点类，则可以选择定义更多菜单组合(例如，在超大屏幕上显示下拉菜单，但在大屏幕及以下屏幕上则退回到向下钻取菜单)。

顶栏 (Top Bar)

Let’s not forget the Top Barcomponent. This, like most of the other components, has been overhauled.

让我们不要忘记Top Bar组件。像大多数其他组件一样，已对此进行了大修。

With the Top Bar component, your main menu can have both a left and right section. You might want to put your main menu items to the left and then your search and action buttons to the right. The basic format is as follows:

使用“顶部栏”组件，主菜单可以同时具有左右部分。您可能希望将主菜单项放在左侧，然后将搜索和操作按钮放在右侧。基本格式如下：

<div class="top-bar" id="top-bar">
<div class="top-bar-left">
<ul class="dropdown vertical medium-horizontal menu">
<li><a href="#">Monday</a></li>
<li><a href="#">Tuesday</a></li>
<li><a href="#">Wednesday</a></li>
<li><a href="#">Thursday</a></li>
<li><a href="#">Friday</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="dropdown vertical medium-horizontal menu">
<li><a href="#">January</a></li>
<li><a href="#">February</a></li>
<li><a href="#">March</a></li>
<li><input type="search" placeholder="Search"></li>
</ul>
</div>
</div>

You can put whatever you want into this menu, however you will need to format it and fiddle around until it works for you (for example it makes sense to make the inner menus ‘dropdown’ and ‘vertical’ so that they work well on mobile).

您可以将所需的任何内容放入此菜单，但是您需要对其进行格式化并弄乱直到它对您有用(例如，使内部菜单“下拉”和“垂直”有意义，这样它们才能在移动设备上正常工作)。

If you also want to have a menu toggle (which was part of the component in Foundation 5), you can use the responsive toggle functionality.

如果您还想进行菜单切换(这是Foundation 5中组件的一部分)，则可以使用响应切换功能。

The basic run-down of this is that it will display a menu toggle on small devices that will show / hide your menu. The documentation has more information but its default settings will work fine for most cases.

这样做的基本原理是，它将在小型设备上显示一个菜单开关，从而显示/隐藏您的菜单。该文档提供了更多信息，但是其默认设置在大多数情况下都可以正常使用。

<div class="title-bar" data-responsive-toggle="top-bar"
data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Main Menu</div>
</div>

What’s important here is the data-responsive-toggle attribute, which needs to match the id of the menu you want to control (which is why this one says top-bar). This will display a button that will toggle the menu only when viewing the small profile.

这里重要的是data-responsive-toggle属性，该属性必须与您要控制的菜单的id相匹配(这就是为什么该菜单显示为top-bar )。这将显示一个仅在查看小型配置文件时才切换菜单的按钮。

菜单示例 (Menu Examples)

Below is a CodePen example that showcases some of the different ways you can use the new menu component. The menu documentation is the best source if you’re looking to see how you can adjust the menu’s default settings and options.

下面是一个CodePen示例，展示了使用新菜单组件的一些不同方式。如果要查看如何调整菜单的默认设置和选项，则菜单文档是最佳的参考。

See the Pen Foundation 6 Menu Examples by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen Foundation 6菜单示例。

大幅减少代码 (A huge reduction in code)

There are two benefits to the streamlining of the menu components in Foundation 6, the first being the reduction in complexity (as now everything is a menu with just different options); the second more subtle benefit is that it’s significantly reduced the size of the framework.

简化Foundation 6中的菜单组件有两个好处，其一是降低了复杂性(因为现在所有内容都是具有不同选项的menu )。第二个更微妙的好处是它大大减少了框架的大小。

The updated menu component has merged 5+ menu structures together and in doing so has removed all of the legacy CSS that used to be included in the framework. Even though it’s somewhat glossed over on Zurb’s blog, they have removed more than 1000 lines of styling by merging these all together.

更新的菜单组件将5个以上的菜单结构合并在一起，从而删除了以前包含在框架中的所有旧CSS。尽管在Zurb的博客上有所掩饰，但他们通过将所有这些合并在一起， 删除了1000多个样式行 。

Reduction in code is always a good thing for developers. The framework weighs less and loads faster, it’s easier to learn and understand, and it will be easier to update going forward.

减少代码对于开发人员总是一件好事。该框架重量更轻，加载速度更快，更易于学习和理解，并且以后将更易于更新。

结论 (Conclusion)

Foundation 6 has really trimmed back and in the process improved a vast majority of their components. Before you would need to use a series of different components to get the menus you need, now it’s just one highly flexible component.

Foundation 6确实进行了缩减，并且在此过程中改进了其大部分组件。在您需要使用一系列不同的组件来获取所需菜单之前，现在它只是一个高度灵活的组件。

The combination of the different menu plugins with the revised menu build has created a powerful, yet simple component that you should be using in all your Foundation projects.

将不同的菜单插件与经过修订的菜单构建结合在一起，创建了一个功能强大而又简单的组件，您应该在所有Foundation项目中使用该组件。

翻译自: https://www.sitepoint.com/foundation-6-menu-component/

javafx 菜单组件