Navigation Menu Responsive Multi Color

Navigation Menu Responsive Multi Color - Memodifikasi bentuk tampilan sederhana yang saya ambil dari berbagai sumber pada artikel sebelumnya dalam label ► Menu Navigasi, untuk memberikan warna yang berbeda-beda (multi color) di setiap teks link agar menu navigasi di blog Anda terlihat cantik dan menarik full responsive seperti ini:




DEMO SHOW



Pada blog atau website tidak selalu menampilkan kolom komentar didalamnya, namun pasti selalu menampilkan beberapa menu pilihan untuk mempermudah pengunjung dalam menavigasi atau mencari artikel-artikel yang terkait dalam site tersebut. Dikarenakan fungsi menu navigasi di blog begitu penting, » 4 Model Desain Menu Navigasi Blogger bisa Anda pilih untuk menyusun daftar artikel blog dalam bentuk menu navigasi.

SEO INFO

8 Hal Yang Perlu Dihindari Tentang Optimasi SEO



Pertemuan kali ini, SAHABAT BLOGGER 77 akan memberikan model ke-5 Navigation Menu Responsive Multi Color simple style fast loading dengan CSS seperti ini:

nav {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex}
@media all and (max-width: 650px) {
nav {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 80%;
  margin: 0 auto}}

nav a {
  -webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;
  flex: 1;text-align: center;padding: 15px;
  text-transform: uppercase;color: currentColor;
  text-shadow: 1px 2px 1px #111;font-weight: 600;font-size: 15px}

nav a:nth-child(2):hover {
  -0-transform:rotateY(-360deg);
  -ms-transform:rotateY(-360deg);
  -moz-transform:rotateY(-360deg);
  -webkit-transform:rotateY(-360deg);
  transform:rotateY(-360deg);
  background: #660000;
  box-shadow: inset 0px 4px 0 0 red}

nav a:nth-child(2) {
  background: red;
  -webkit-transition: 1.3s;-webkit-transform-style: preserve-3d;
  -moz-transition: 1.3s;-moz-transform-style: preserve-3d;
  -o-transition: 1.3s;-o-transform-style: preserve-3d;
  -ms-transition: 1.3s;-ms-transform-style: preserve-3d;
  transition: 1.3s;transform-style: preserve-3d}

nav a:nth-child(1) {background: #ccff00}
nav a:nth-child(1):hover {background: #526600;box-shadow: inset 0px 4px 0 0 #ccff00}
nav a:nth-child(3) {background: #0066ff}
nav a:nth-child(3):hover {background: #002966;box-shadow: inset 0px 4px 0 0 #0066ff}
nav a:nth-child(4) {background: #cc00ff}
nav a:nth-child(4):hover {background: #520066;box-shadow: inset 0px 4px 0 0 #cc00ff}
nav a:nth-child(5) {background: aqua}
nav a:nth-child(5):hover {background: #008080;box-shadow: inset 0px 4px 0 0 aqua}

Jika Anda bingung harus ditempatkan dimana kode-kode untuk membuat Navigation Menu Responsive Multi Color seperti ini, Anda bisa mempelajari tutorial lengkapnya pada artikel sebelumnya tentang Peletakan Serta Cara Mendesain Menu Navigasi Blog. Tahap selanjutnya tinggal memanggil semua fungsi elemen CSS diatas dengan susunan menu HTML seperti ini:

<nav>
  <a href="#">Home</a>
  <a href="#">Daftar Isi</a>
  <a href="#">Backlink</a>
  <a href="#">About</a>
  <a href="#">Source</a>
</nav>