20 クールなメニュー ライン アニメーション特殊効果 UI デザイン Effects_html/css_WEB-ITnose

簡単なチュートリアル

これは、非常にクールなメニュー ライン アニメーション特殊効果 UI デザイン効果です。このメニュー ライン アニメーションのセットには合計 20 個の効果があり、ユーザーがメニュー項目をクリックすると、さまざまなライン アニメーションが表示されます。

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

ブラウザの互換性

使用法

HTML構造

すべてのメニューは同じHTML 構造:

<section class="section section--menu" id="Prospero">   <h2 class="section__title">Prospero</h2>   <nav class="menu menu--prospero">     <ul class="menu__list">      <li class="menu__item menu__item--current">        <a class="menu__link">Home</a>      </li>      <li class="menu__item">        <a class="menu__link">Who we are</a>      </li>      <li class="menu__item">        <a class="menu__link">What we offer</a>      </li>      <li class="menu__item">        <a class="menu__link">Our news</a>      </li>      <li class="menu__item">        <a class="menu__link">Contact us</a>      </li>    </ul>       </nav> </section>

menu__item--current class 識別するために使用されるクラス現在選択されている項目。各エフェクトの c787b9a589a3ece771e842a6176cf8e9 要素には独自のクラスがあり、これを使用してさまざまなライン効果を作成します。

CSS スタイル

すべてのメニューに共通の CSS スタイルは次のとおりです。

.menu {  line-height: 1;  margin: 0 auto 3em;} .menu__list {  position: relative;  display: -webkit-flex;  display: flex;  -webkit-flex-wrap: wrap;  flex-wrap: wrap;  margin: 0;  padding: 0;  list-style: none;} .menu__item {  display: block;  margin: 1em 0;} .menu__link {  font-size: 1.05em;  font-weight: bold;  display: block;  padding: 1em;  cursor: pointer;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;  -webkit-touch-callout: none;  -khtml-user-select: none;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .menu__link:hover,.menu__link:focus {  outline: none;}

メニューはレイアウトにフレックスボックスを使用し、リンクにいくつかの一般的なスタイルを提供します。 IEブラウザはフレックスボックスをサポートしていないため、IEのメニューのレイアウトがずれてしまいます。

最初のメニューラインエフェクト Prospero の CSS スタイルは次のとおりです:

/* Prospero */.menu--prospero .menu__link {  position: relative;  display: block;  margin: 0 1.5em;  padding: 0.75em 0;  text-align: center;  color: #b5b5b5;  transition: color 0.3s;} .menu--prospero .menu__link:hover,.menu--prospero .menu__link:focus {  color: #929292;} .menu--prospero .menu__item--current .menu__link {  color: #d94f5c;} .menu--prospero .menu__link::before {  content: '';  position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 4px;  background: #d94f5c;  transform: scale3d(0, 1, 1);  transition: transform 0.1s;} .menu--prospero .menu__item--current .menu__link::before {  transform: scale3d(1, 1, 1);  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);  transition-duration: 0.3s;}

このエフェクトでは、疑似要素を使用して単純にラインを作成し、途中から展開させます。これは絶対位置を使用してリンクの下に配置され、最初は X 方向に 0 にスケールダウンされます。ユーザーがメニュー項目をクリックすると、行が 0 から 1 に変わります。

出典: jQuery ホーム