Inspirasi Menu Dengan CSS

Garis adalah elemen desain yang menakjubkan. Ini sangat serbaguna dan memungkinkan kita menggunakannya untuk menambahkan animasi yang menyenangkan atau meningkatkan poin yang diminati. Hari ini kami ingin berbagi seperangkat ide untuk menggunakan garis sebagai elemen desain dalam menu horizontal. Ada banyak kemungkinan kreatif, beberapa sangat kecil dan halus, yang lain berani dan lebih boros. Kami telah menyiapkan sedikit set inspirasional untuk Anda di mana kami menjelajahi beberapa menu menu.
Kami juga ingin mengundang Anda untuk menyumbangkan gaya Anda ke koleksi terbuka ini. Lihat rincian GitHub.

Mari kita lihat markup yang, selain beberapa pengecualian, sama untuk setiap gaya menu:

<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 - kelas saat ini menunjukkan item yang saat ini dipilih. Perhatikan bahwa kami menggunakan konvensi penamaan BEM namun memungkinkan nav utama memiliki kelas indikatif yang kemudian kami gunakan di lembar kerja (komponen.css) kami untuk menentukan gaya masing-masing.
Mari kita lihat gaya umum untuk semua menu:

.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;
}

Kami akan menggunakan flexbox untuk tata letak menu dan menentukan beberapa gaya umum untuk tautan.
Berikut ini adalah contoh style effect (atribut prefixed properties dihilangkan):

/* 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;
}

Lihat  Unduh

Password: www.duniadesain.net

Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)

Dalam efek ini kita cukup menggunakan garis elemen pseudo yang mulai melebar dari tengah. Ini diposisikan benar-benar di bagian bawah link dan awalnya diskalakan ke 0 pada X. Saat kita memilih item menu dengan mengkliknya, baris akan diskalakan ke 1.
Kami harap Anda menikmati set kecil ini dan menemukannya inspirasional!
Source: Tympanus