css - splinter 的 Zurb Foundation 4 响应式导航栏菜单图标

Question

我正在为一个 Ruby 元素使用最新的 zurb-foundation gem。当屏幕宽度足够小时，我的导航栏应该响应并显示带有 3 个水平条的菜单。我让它显示“菜单”一词，但不显示水平条。当菜单展开时，样式会更远。

扩展导航栏: http://d.pr/i/RtoO

我能够使用我的元素使用的 css 和 js 在 jsfiddle 中重现这个(目前只有 jQuery 和 Zurb Foundation 的东西)。 http://jsfiddle.net/UvL7e/

我的标记有误吗？我还没有任何用于导航栏的自定义 CSS，也没有使用任何其他 CSS 库。

我用于基础的 SCSS 文件如下(大部分是默认的):

//
// Foundation Variables
//

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with brower-based text zoom or user-set defaults.
$base-font-size: 100% !default;

// $base-line-height is 24px while $base-font-size is 16px
// $base-line-height: 150%;

// This is the default html and body font-size for the base em value.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be a different size and not have it effect grid size too,
// set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
$em-base: 16px !default;

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

// Colors

$primary-color: #2ba6cb;
$secondary-color: #e9e9e9;
$alert-color: #c60f13;
$success-color: #5da423;

// Make sure border radius matches unless we want it different.

$global-radius: 3px;

// Media Queries

$small-screen: emCalc(768px);
$medium-screen: emCalc(1280px);
$large-screen: emCalc(1440px);

//
// Form Variables
//

// Base for lots of form spacing and positioning styles

// $form-spacing: emCalc(16px);

// Labels

$form-label-pointer: pointer;
$form-label-font-size: emCalc(14px);
$form-label-font-weight: 500;
$form-label-font-color: lighten(#000, 30%);
$form-label-bottom-margin: emCalc(3px);
$input-font-family: inherit;
$input-font-color: rgba(0,0,0,0.75);
$input-font-size: emCalc(14px);
$input-bg-color: #fff;
$input-focus-bg-color: darken(#fff, 2%);
$input-border-color: darken(#fff, 20%);
$input-focus-border-color: darken(#fff, 40%);
$input-border-style: solid;
$input-border-width: 1px;
$input-disabled-bg: #ddd;
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);

// Button background
$button-bg-color: #D8E1ED;

// Button text styles.

// $button-font-family: inherit;
// $button-font-color: #fff;
// $button-font-color-alt: #333;
$button-font-med: emCalc(16px);
// $button-font-tny: emCalc(11px);
// $button-font-sml: emCalc(13px);
// $button-font-lrg: emCalc(20px);
// $button-font-weight: bold;
// $button-font-align: center;

// Various hover effects.

$button-function-factor: 10%;

// Button border styles.

$button-border-width: 1px;
$button-border-style: solid;
$button-border-color: darken($primary-color, $button-function-factor);

// Radius used throughout the core.

$button-radius: 6px;

// Opacity for disabled buttons.

$button-disabled-opacity: 0.6;

//
// Top Bar Variables
//

// Background color for the top bar

$topbar-bg: #222;

// Height and margin

// $topbar-height: 45px;
$topbar-margin-bottom: emCalc(30px);

// Input height for top bar

$topbar-input-height: 2.45em;

// Title in the top bar

$topbar-title-weight: bold;
$topbar-title-font-size: emCalc(17px);

// Link colors and styles for top-level nav

$topbar-link-color: #fff;
$topbar-link-weight: bold;
$topbar-link-font-size: emCalc(13px);
$topbar-link-hover-lightness: -50% !default; // Darken by 30%

// Top bar dropdown elements

// $topbar-dropdown-bg: #333;
// $topbar-dropdown-link-color: #fff;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: #fff;
// $topbar-dropdown-toggle-alpha: 0.5;
// $dropdown-label-color: #555;

// Top menu icon styles

$topbar-menu-link-transform: uppercase;
$topbar-menu-link-font-size: emCalc(13px);
$topbar-menu-link-weight: bold;
$topbar-menu-link-color: #fff;
$topbar-menu-icon-color: #fff;
$topbar-menu-link-color-toggled: #888;
$topbar-menu-icon-color-toggled: #888;

// Transitions and breakpoint styles

$topbar-transition-speed: 900ms;
$topbar-breakpoint: $small-screen;
$topbar-media-query: "only screen and (min-width: "#{$topbar-breakpoint}")";

@import 'foundation';

Answer 1

这很简单，你的类名必​​须改变。
来自:

<li class="toggle-topbar menu-item">
  <a href="#">
    <span>Menu</span>
  </a>
</li>

收件人:

<li class="toggle-topbar menu-icon">
  <a href="#">
    <span>Menu</span>
  </a>
</li>

参见 http://jsfiddle.net/Volker_E/mxmJt/2/

我在顶部添加了黄色边框，因此结果标签不会与菜单图标重叠。