Membuat Menu Navigasi Full Color yang Flat UI dan Responsive

Oke sobat, kali ini saya akan share post dari blog saya. Yang berjudul Membuat Menu Navigasi Full Color yang Flay UI dan Responsive. Oke kita langsung ke tkp



Sebelum kita mengikuti cara-caranya klik demonya dulu

Spoiler: Tahap 1 : Memasang CSS

1. Buka blogger > template > edit HTML
2. Cari kode ]]></b:skin>, taruh kode dibawah ini tepat diatas kode ]]></b:skin>
   
   Code:

   /* Menu Navigasi Flat UI by blogfwa */
   .navmenu { background: #2c3e50; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; }
   ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; }
   ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; }
   ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; }
   ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; }
   ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; }
   ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; }
   ul.navfullcolor li ul li { float: none; background: #34495e; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; }
   ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; }
   ul.navfullcolor li ul li a:hover { background: #e67e22; }
   .green{background-color:#35cf76 !important;} .green:hover{background-color:#27ae60 !important;}
   .yellow{background-color:#f1c40f !important;} .yellow:hover{background-color:#f39c12 !important;}
   .red{background-color:#e74c3c !important;} .red:hover{background-color:#c0392b !important;}
   .purple{background-color:#9b59b6 !important;} .purple:hover{background-color:#8e44ad !important;}
   .blue{background-color:#3498db !important;} .blue:hover{background-color:#2980b9 !important;}

3. Lalu Save

Spoiler: Tahap 2 : Memasang Menu Navigasi

1. Buka blogger > tata letak > add gadget > HTML/Java Script
2. Kemudian masukan kode dibawah ini, kedalamnya
   
   HTML:

   <div class='navmenu'>
   <ul class='navfullcolor'>
       <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li>
       <li><a href='http://blogfwa.blogspot.com' class='red'>With Sub Menu 1</a>
           <ul>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 1</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 2</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 3</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 4</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 5</a></li>
           </ul>
       </li>
       <li><a href='http://blogfwa.blogspot.com' class='yellow'>With Sub Menu 2</a>
           <ul>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 1</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 2</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 3</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 4</a></li>
           </ul>
       </li>
       <li><a href='http://blogfwa.blogspot.com' class='green'>With Sub Menu 3</a>
           <ul>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 1</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 2</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 3</a></li>
           </ul>
       </li>
       <li><a href='http://blogfwa.blogspot.com' class='purple'>With Sub Menu 4</a>
           <ul>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 1</a></li>
           <li><a href='http://blogfwa.blogspot.com'>Sub Menu 2</a></li>
           </ul>
       </li>
       <li><a href='http://blogfwa.blogspot.com' class='red'>Menu 5</a></li>
       <li><a href='http://blogfwa.blogspot.com' class='yellow'>Menu 6</a></li>
       <li><a href='http://blogfwa.blogspot.com' class='green'>Menu 7</a></li>
   </ul>
   </div>

3. Lalu Save

Spoiler: Baca Biar Gak Salah !

Untuk memasang menu navigasi, gunakanlah widget yang berada diatas "blog post"

 

keren , tapi mempengaruhi Loading blog gak ya ?

 

flay ui apa flat ui yaaah? mantap menu nya, enak dipandang

 

untuk cepot ya ini, kalo wp gimana? apa sama?

 

sip gan,
maknyus jadi warna warni navigasinya

 

Wah, Makasih atas infonya Den @fanjiwildanu

izin saya praktek ya den

 

long shadownya mana gan? hhe,

 

wih,... keren nih gan, siap memodifikasi themes lagi

 

ada yg bisa bikin seperti modelnya category di gumtree ga ya ?

 

Wah asik juga kayaknya, bisa dicoba nie.

 

Bisa di coba ni di website ane

 

Wah, keren-keren...
Kalau di wordpress menunya di generated otomatis, agak sulit sepertinya

 

Apa ini bisa digunakan pada template yg sdh ada menu navigasi responsive nya? saya mau coba takut berantakan tampilan templatenya seperti: Tempat outbound dan gathering di Sentul Bogor
Terima kasih

 

Hati2 boss jgn nyepam sembarangan.. baca rules

 

Maaf..tidak bermaksud nyepam..tujunanya agar bisa dilihat contoh,,template barangkali ada yg resonse.terimakasih infonya,dam sya sdh baca rulenya,

 

Oke, silahkan membuat thread baru jika ada yg ingin ditanyakan..

 

Kalau demikian, gunakan url langsung (lebih sip no live) tanpa harus menggunakan anchor text.
bersosial.com/threads/membuat-menu-navigasi-full-color-yang-flat-ui-dan-responsive.11582/