12.3.15
19
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.


Menu Navigasi Blog



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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Navigation Menu Responsive Multi Color
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

19 komentar

  1. yaa..memang cukup sederhana.. tp tidak mengurangi daya tarik menu responsivenya Vy..

    di demoshow ~ yg tulisan daftar isi.. ???

    BalasHapus
    Balasan
    1. maksudnya sih begitu mas Al, tampilan yang sederhana tetapi dengan penambahan efek rotate pada 1 link agar menarik pengunjung melakukan KLIK, saat beberapa link menu di hover

      Hapus
  2. kalo penambahan menu navigasi pada template default gimana mbak?

    BalasHapus
    Balasan
    1. ikutin saja HTML pemanggilnya mas, jika defaulnya dalam bentuk data seperti ini misalnya:

      <nav class="menu">
      <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Daftar Isi</a></li>
      <li><a href="#">Backlink</a></li>
      <li><a href="#">About</a></li>
      //menambahkan menu..
      ...
      <li><a href="#">menu lainnya...</a></li>
      </ul>

      //Jika menambahkan pada sub-menu
      <ul class="sub-menu">
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 1</a></li>
      </ul>
      </nav>

      Hapus
  3. Padahal link Nav di HTMLnya sama smua, tp kok ada perbedaan saat di sentuh.. saya bingung :-?
    berarti kalo semua linknya berputar " nav a:nth-child(2) di css harus dicopy lg? (o)

    BalasHapus
    Balasan
    1. bukan di Copy mas, tetapi gandakan saja deklarasinya menjadi seperti ini:

      nav a:nth-child(1):hover,
      nav a:nth-child(2):hover,
      nav a:nth-child(3):hover,
      nav a:nth-child(4):hover,
      nav a:nth-child(5):hover {
      .....
      .....
      }


      jika jumlah menu hanya menampilkan 5 link.

      Hapus
  4. simple dan dan bagus.. jempol buat devy ... :)
    tinggal menysuaikan warna aja agar sesuai dengan template blog nya ,, :)

    BalasHapus
    Balasan
    1. yups..!! silahkan mas, disesuaikan dengan selera warna yang disukai.

      Hapus
    2. oh ,, mf nih mw tanya diluar topik ,,,
      devy ada script agar template blog sy responsive gak ? hehe

      Hapus
    3. tambahkan media data element untuk mengatur lebar dan tinggi halaman dengan kode CSS seperti ini:

      ➞ @media only screen and (min-width:768px) and (max-width:999px) {
      ...
      ?? halaman mana yang akan kita atur jarak layoutnya agar respinsive.
      maka letakkan kodenya disni..
      //contoh.. (untuk menu navigasi)

      nav {
      ....
      ...
      width: 80%;
      margin: 0 auto}
      }


      Lebih lengkapnya, lihat pada link sumber berikut:

      Responsive Page Tutorial

      Hapus
    4. Ok matur tengyu yah devy .... hehehe :)

      Hapus
  5. keren, dismpan dulu dilemari ya, ntar klo mau pake bongkar lemarinya [-(
    nice post

    BalasHapus
    Balasan
    1. gimana kalau simpan menunya di lemari es saja, takutnya menunya jadi apek kalau disimpan di lemari, hehehe..!!

      Hapus
    2. simpan di kulkas biar selalu segar gan.

      Hapus
  6. hebat banget mba devi ini kalo masalah ini, tampilan diperbagus kadang membuat pengunjung lebih nyaman untuk berlama-lama di blog..

    BalasHapus
  7. .Cakep banget yang ngePost. x-)
    .Cakep banget Template Blognya. :)
    .Cakep juga Artikelnya. :d .Simpan dulu deh mbak, siapa tahu ntar kepikiran buat ganti. :))

    BalasHapus
  8. sederhana namun penuh warna navigasi menu responsivenya dev. dan menarik juga warna yang ngejrengnya...makasih ya sista ilmunya.

    BalasHapus
  9. jadi gini ya cara bikin menu responsif.. jadi tahu, maklum cuma bisa pakai template orang hehe

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK