おいしい CSS アニメーションのハンバーガー:ハンバーガー_html/css_WEB-ITnose

ハンバーガー

ハンバーガーは、CSS でアニメーション化されたおいしいハンバーガー アイコンのコレクションです。 Sass ライブラリとしてのソースも含まれています。モジュール式でカスタマイズ可能なので、自分だけのハンバーガーを作ってみましょう。

目次

• 使用法
• カスタマイズ
• アクセシビリティ
• ブラウザ サポート

使用法

CSS をダウンロードして に含めます。サイトの

<link href="dist/hamburgers.css" rel="stylesheet">

ベースのハンバーガー マークアップを追加します:

<button class="hamburger" type="button">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span></button>

< を使用できます;div> は、メニュー ボタンとしてアクセスできません。

<div class="hamburger" type="button">  <div class="hamburger-box">    <div class="hamburger-inner"></div>  </div></div>

ハンバーガーの種類のクラス名を追加します。 're craving:

<button class="hamburger hamburger--collapse" type="button">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span></button>

選択できるハンバーガー タイプのクラスのリストは次のとおりです:

hamburger--arrowhamburger--arrow-rhamburger--arrowalthamburger--arrowalt-rhamburger--boringhamburger--collapsehamburger--collapse-rhamburger--elastichamburger--elastic-rhamburger--emphatichamburger--emphatic-rhamburger--sliderhamburger--slider-rhamburger--spinhamburger--spin-rhamburger--squeezehamburger--vortexhamburger--vortex-r

注: -r クラスは逆バージョンです (例: hamburger--spin は時計回りに回転しますが、hamburger--spin-r は反時計回りに回転します。

クラス名 is-active を追加することでアクティブ状態をトリガーします:

<button class="hamburger hamburger--collapse is-active" type="button">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span></button>

クラス名は JavaScript で切り替える必要があり、実装はハンバーガーをどのように使用するかというコンテキストに基づいて異なるため、残りはあなたに任せます。

Sass

CSS プリコンパイラーとして Sass を使用する場合は、.scss ソース ファイルも含まれています。これはカスタマイズ可能でモジュール式です。

ソース ファイルをダウンロードして解凍します。

_sass/hamburgers ディレクトリからプロジェクトにファイルをコピーします。

Sass マニフェスト ファイルにハンバーガー.scss ファイルをインポートします。

@import "path/to/hamburgers";

ハンバーガーをカスタマイズしたり、burgers.scss 内で不要なタイプを削除したりできます。

Sass* をコンパイルすれば出来上がりです!

ハンバーガーは npm と Bower でも利用できます。

npm install hamburgersbower install css-hamburgers

* Sass はベンダー プレフィックスを考慮しないため、必ず Autoprefixer を介して CSS を実行してください。

カスタマイズ

デフォルト設定の完全なリストは (_sass/hamburgers/hamburgers.scss にあります);

$hamburger-padding-x                       : 15px !default;$hamburger-padding-y                       : 15px !default;$hamburger-layer-width                     : 40px !default;$hamburger-layer-height                    : 4px !default;$hamburger-layer-spacing                   : 6px !default;$hamburger-layer-color                     : #000 !default;$hamburger-layer-border-radius             : 4px !default;$hamburger-hover-opacity                   : 0.7 !default;$hamburger-hover-transition-duration       : 0.15s !default;$hamburger-hover-transition-timing-function: linear !default;// To use CSS filters as the hover effect instead of opacity,// set $hamburger-hover-use-filter as true and// change the value of $hamburger-hover-filter accordingly.$hamburger-hover-use-filter: false !default;$hamburger-hover-filter    : opacity(50%) !default;

デフォルト設定をオーバーライドするには、値を変更できます。 ) 内でハンバーガーを作成しますが、新しい設定を個別に宣言することをお勧めします。

@import "path/to/hamburgers";$hamburgers-padding-x: 20px;$hamburgers-padding-y: 15px;

別のファイルを作成することもできます (例: hamburgers-settings.scss) をこれらの宣言とともにインポートし、ハンバーガーと一緒にインポートします:

@import "path/to/hamburgers";@import "hamburgers-settings"

ems または rems

Wanna work with ems or rems but not px ?すべての px 値を選択した単位に変更するだけです。注: 一貫性 (すべて px またはすべて ems) を保ってください。そうでないと、機能が壊れる可能性があります。異なる単位の値を使用して操作を実行しようとすると、カスタマイズの背後にある計算が失敗します。

満足されませんか?

_base.scss または types/ を調べて、思う存分カスタマイズしてください。厳重な警告: これは非常に繊細で、特にアニメーション自体を調整する場合は壊れる可能性があります。

アクセシビリティ

ハンバーガー メニューのアイコンは、適切なコンテキストで役に立ちますが、適切なコンテキストではありません。

ARIA は、障害を持つ人々がアクセスできるようにするのに役立ちます。

<button class="hamburger hamburger--elastic" type="button"        aria-label="Menu" aria-controls="navigation">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span></button><nav id="navigation">  <!--navigation goes here--></nav>

<div class="hamburger hamburger--elastic" tabindex="0"     aria-label="Menu" role="button" aria-controls="navigation">  <div class="hamburger-box">    <div class="hamburger-inner"></div>  </div></div><nav id="navigation">  <!--navigation goes here--></nav>

を使用する場合は、デフォルトでフォーカス可能ではありません (つまり、キーボードまたは支援技術を使用)。 ARIA の横に tabindex 属性を追加します。

<button class="hamburger hamburger--collapse" type="button">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span>  <span class="hamburger-label">Menu</span></button>

ラベルを使用すると、メニューを切り替えていることがより明確になります。

Web アクセシビリティと ARIA に関するリソースは次のとおりです。

ブラウザのサポート

アニメーションは CSS3 3D 変換を使用します (GPU アクセラレーションのために可能な場合は常に 3d を変換します)。これはほとんどのブラウザでサポートされています (IE9 ではサポートされていません)。および Opera Mini 以降)。ブラウザのサポートの詳細については、caniuse.com を確認してください。 项目地址： https://github.com/jonsuh/hamburgers