我正在为 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';