Navigation Menu Responsive Multi Color

Info informasi Navigation Menu Responsive Multi Color atau artikel tentang Navigation Menu Responsive Multi Color ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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>

Demikian artikel tentang Navigation Menu Responsive Multi Color ini dapat kami sampaikan, semoga artikel atau info tentang Navigation Menu Responsive Multi Color ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik