jQuery と CSS3 のスタックカードスタイルナビゲーションメニュー特殊効果_html/css

jQuery と CSS3 のスタックカードスタイルナビゲーションメニュー特殊効果_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:30:53

オリジナル

1291 人が閲覧しました

簡単なチュートリアル

これは、非常にクールな jQuery と CSS3 のスタックカードスタイルのナビゲーションメニュー効果です。このナビゲーションメニュー効果では、ユーザーがハンバーガーボタンをクリックすると、各サブメニューがカードの形式でビューポートに積み重ねられて配置され、対応するサブメニューをクリックすると、対応するページに切り替わります。

デモを見る プラグインをダウンロードする

使い方

HTML 構造

ナビゲーションメニューの HTML 構造は、ネストされた

の HTML 構造を採用しています。。 demo__close -menu はハンバーガーボタンで、各 div.demo__section はサブページです。

<div class="demo">  <div class="demo__close-menu"></div>  <div class="demo__section demo__section-1" data-section="1">    <div class="demo__menu-btn"></div>    <h2 class="demo__section-heading">Contact</h2>  </div>  <div class="demo__section demo__section-2 active" data-section="2">    <div class="demo__menu-btn"></div>    <h2 class="demo__section-heading">About</h2>  </div>  <div class="demo__section demo__section-3 inactive" data-section="3">    <div class="demo__menu-btn"></div>    <h2 class="demo__section-heading">Team</h2>  </div>  <div class="demo__section demo__section-4 inactive" data-section="4">    <div class="demo__menu-btn"></div>    <h2 class="demo__section-heading">Projects</h2>  </div></div>

ログイン後にコピー

CSS スタイル

ハンバーガーアイコンボタンのスタイルは次のとおりです:

.demo__close-menu {  position: absolute;  left: 22px;  top: 22px;  width: 29px;  cursor: pointer;}.demo__close-menu:before, .demo__close-menu:after {  content: "";  position: absolute;  left: 0;  top: 8px;  width: 100%;  height: 4px;  background: #7097B0;}.demo__close-menu:before {  -webkit-transform: rotate(45deg);          transform: rotate(45deg);}.demo__close-menu:after {  -webkit-transform: rotate(-45deg);          transform: rotate(-45deg);}

ログイン後にコピー

スタックカードページのメイン CSS スタイルは次のとおりです:

.demo {  overflow: hidden;  position: absolute;  width: 100%;  height: 100%;  background: #CDDBEE;  border-radius: 6px;} .demo__section {  z-index: 1;  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  padding: 25px 0 0 65px;  border-radius: inherit;  -webkit-transition: -webkit-transform 0.4s;  transition: -webkit-transform 0.4s;  transition: transform 0.4s;  transition: transform 0.4s, -webkit-transform 0.4s;  -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);  will-change: transform;} .demo.menu-active .demo__section-1 {  -webkit-transform: translate3d(20px, 60px, 0);  transform: translate3d(20px, 60px, 0);} .demo__section-1.inactive {  -webkit-transform: translate3d(100%, 60px, 0);  transform: translate3d(100%, 60px, 0);} .demo.menu-active .demo__section-2 {  -webkit-transform: translate3d(40px, 120px, 0);  transform: translate3d(40px, 120px, 0);} .demo__section-2.inactive {  -webkit-transform: translate3d(100%, 120px, 0);  transform: translate3d(100%, 120px, 0);} .demo.menu-active .demo__section-3 {  -webkit-transform: translate3d(60px, 180px, 0);  transform: translate3d(60px, 180px, 0);} .demo__section-3.inactive {  -webkit-transform: translate3d(100%, 180px, 0);  transform: translate3d(100%, 180px, 0);} .demo.menu-active .demo__section-4 {  -webkit-transform: translate3d(80px, 240px, 0);  transform: translate3d(80px, 240px, 0);} .demo__section-4.inactive {  -webkit-transform: translate3d(100%, 240px, 0);  transform: translate3d(100%, 240px, 0);} .demo.menu-active .demo__section { cursor: pointer; } .demo__section-heading {  text-transform: uppercase;  font-size: 12px;  -webkit-transition: -webkit-transform 0.4s;  transition: -webkit-transform 0.4s;  transition: transform 0.4s;  transition: transform 0.4s, -webkit-transform 0.4s;} .demo.menu-active .demo__section-heading {  -webkit-transform: translateX(-45px);  transform: translateX(-45px);}

ログイン後にコピー

JavaScript

この特殊効果では jQuery コードが使用されています。ハンバーガーボタンのクリックイベントとスタックカードメニューの Switch イベントを処理します。

すごい

出典: jQuery ホーム