logo blog

Membuat Menu Bar Dropdown Responsive Plus Icon Pure CSS

Membuat Menu Bar Dropdown Responsive Plus Icon Pure CSS

Menu Navigation Bar Multi Dropdown With Icon Pure CSS

Tutorial Cara Membuat Menu Navigation Bar Multi Dropdown Responsive With Icon Font Awesome

Memasang Icon Di Menu Navigation Bar Blogger, Pada kesempatan kali ini saya akan memberikan tutorial menambahkan icon atau gambar bisa juga logo ke dalam menu navigasi blog.

Sebelumnya saya juga sudah pernah posting tutorial membuat menu navigasi dengan icon, tapi pada postingan sebelumnya saya menggunakan image untuk dijadikan icon menu tersebut dan banyak yang bingung bagaimana cara mengganti, menghosting, mencari link imagenya dlll.

Nah pada postingan ini saya mengganti icon image dengan menggunakan icon FontAwesome yang cukup mudah untuk kalian ganti sesuai dengan icon yang sudah di sediakan, tinggal pilih copy llau paste...

Bagi yang tidak cocok dengan tampial menu navigation ini, kalian bisa mencari menu navigation yang lain di blog mas tamvan ini, karena saya udah sering posting artikel tentang menu navigation bar yang responsive / mobile friendly. Salah satunya bisa kalian liat di link berikut..



Sekarang kita lanjut ke tutorialnya..

Memasang Menu Navigation Plus Icon FontAwesome

  • Login terlebih dahulu ke akun blogger kalian
  • Kalo Udah login klik menu TemplateEdit HTML
  • Setelah Masuk Edit HTML, Kalian cari kode </head>
  • Selanjutnya masukan CSS dibawah ini tepat di atasnya
  • 
    <style type='text/css'>
    /*Menu Navigation Plus Icon*/
    nav#menu_mastamvan .toggle,[id^=drop]{display:none}
    nav#menu_mastamvan{margin:0;padding:0;background-color:#2979ff}
    nav#menu_mastamvan:after{content:"";display:table;clear:both}
    nav#menu_mastamvan ul{float:right;padding:0;margin:0;list-style:none;position:relative;width:100%}
    nav#menu_mastamvan ul li{margin:0;display:inline-block;float:left;background-color:#2979ff}
    nav#menu_mastamvan a{display:block;padding:0 20px;color:#FFF;font-size:20px;line-height:60px;text-decoration:none}
    nav#menu_mastamvan ul li ul li:hover{background:#000000}
    nav#menu_mastamvan a:hover{background-color:#000000}
    nav#menu_mastamvan ul ul{display:none;position:absolute;top:60px}
    nav#menu_mastamvan ul li:hover > ul{display:inherit}
    nav#menu_mastamvan ul ul li{width:170px;float:none;display:list-item;position:relative}
    nav#menu_mastamvan ul ul ul li{position:relative;top:-60px;left:170px}
    nav#menu_mastamvan li > a:after{content:"\f0d7";font-family:FontAwesome;padding:0 0 0 3px;float:right}
    nav#menu_mastamvan li > a:only-child:after{content:''}
    /* Media Queries*/
    @media all and (max-width:768px){nav#menu_mastamvan{margin:0}nav#menu_mastamvan .toggle + a,nav#menu_mastamvan .menu{display:none}nav#menu_mastamvan .toggle{display:block;background-color:#254441;padding:0 20px;color:#FFF;font-size:20px;line-height:60px;text-decoration:none;border:none;cursor:pointer}nav#menu_mastamvan label.toggle i{float:right;line-height:60px}nav#menu_mastamvan .toggle:hover{background-color:#000000}nav#menu_mastamvan [id^=drop]:checked + ul{display:block}nav#menu_mastamvan ul li{display:block;width:100%}nav#menu_mastamvan ul ul .toggle,nav#menu_mastamvan ul ul a{padding:0 40px}nav#menu_mastamvan ul ul ul a{padding:0 80px}nav#menu_mastamvan a:hover,nav#menu_mastamvan ul ul ul a{background-color:#000000}nav#menu_mastamvan ul li ul li .toggle,nav#menu_mastamvan ul ul a{background-color:#212121}nav#menu_mastamvan ul ul{float:none;position:static;color:#ffffff}nav#menu_mastamvan ul ul li:hover > ul,nav#menu_mastamvan ul li:hover > ul{display:none}nav#menu_mastamvan ul ul li{display:block;width:100%}nav#menu_mastamvan ul ul ul li{position:static}}
    @media all and (max-width:330px){nav#menu_mastamvan ul li{display:block;width:100%}}
    </style>
    

    Khusus buat kalian yang di templatenya belum ada Font Awesome, Silahkan Masukan Script ini di atas kode </head>
    
    <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel = "stylesheet" />
    

    Kalo ga ada fontawesomenya nanti iconnya g bakalan tampil!
  • Save Template
  • Setelah memasang kode cssnya, sekarang kita tinggal menyimpan kode HTML menu navigationnya
  • Kalian bisa pasang di atas atau di bawah header, footer dll
  • di tutorial lini kita coba pasang lewat tataletak aja biar mudah.
  • Kalian masuk ke TataletakTambahkan Widget, Cari HTML/Javascript (Lihat Gambar)
  • Tataletak Add Gadget / Widget Blogger
  • Klik HTML/Javascript maka akan muncul popup seperti berikut
  • Masukan Scrippt Di HTML / Javascript
  • Lalu kalian copy kode Menu Navigation dibawah ini dan masukan ke dalamnya
  • 
    <nav id='menu_mastamvan'>
      <label for="drop" class="toggle">Menu</label>
      <input type="checkbox" id="drop" />
      <ul class="menu">
        <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
        <li><a href="https://mastamvan.blogspot.co.id/p/sitemap.html"><i class="fa fa-html5" aria-hidden="true"></i> HTML5</a></li>
        <li> 
          <!-- First Tier Drop Down -->
          <label for="drop-1" class="toggle">Dropdown <i class="fa fa-caret-down" aria-hidden="true"></i></label>
          <a href="#">Dropdown</a>
          <input type="checkbox" id="drop-1"/>
          <ul>
            <li><a href="#">Dropdown 1</a></li>
            <li><a href="#">Dropdown 2</a></li>
            <li><a href="#">Dropdown 3</a></li>
          </ul>
        </li>
        <li> 
          
          <!-- First Tier Drop Down -->
          <label for="drop-2" class="toggle">Dropdown <i class="fa fa-caret-down" aria-hidden="true"></i></label>
          <a href="#">Dropdown</a>
          <input type="checkbox" id="drop-2"/>
          <ul>
            <li><a href="#">Dropdown 1</a></li>
            <li><a href="#">Dropdown 2</a></li>
            <li> 
              
              <!-- Second Tier Drop Down -->
              <label for="drop-3" class="toggle">Works <i class="fa fa-caret-down" aria-hidden="true"></i></label>
              <a href="#">Works</a>
              <input type="checkbox" id="drop-3"/>
              <ul>
                <li><a href="#">HTML/CSS</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">Python</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-android" aria-hidden="true"></i> Android</a></li>
      </ul>
    </nav>
    

    Yang perlu kalian ganti / sesuaikan..
    Tanda # (pagar) Ganti dengan link tujuan.
    Kode yang di bungkus dengan tag <i sampai </i>, Contoh <i class="fa fa-home" aria-hidden="true"></i>. Dengan Icon yang Kalian Mau
    Tulisan Home, HTML, Dropdown. Sesuaikan Dengan Judul Menu Kalian
  • Kalo Sudah Tinggal Save
  • Jika kalian ingin mengganti icon menunya, ikuti langkah demi langkah dibawah ini ↓

Memasang Icon Di Samping Text Menu Navigation

Di sini kita akan mengganti / merubah icon di menu navigation bar tadi dengan menggunakan icon font awesome...
  • Langkah pertama, silahkan kunjungi link berikut untuk mencari icon yang cocok untuk di pasang pada menu Font Awesome 4.7.0
  • Setelah masuk ke situnya, kalian akan melihat banyak icon-icon di situ...
  • Untuk mendapatkan kodenya, klik iconnya dan nanti akan di arahkan ke halaman lain
  • Selanjutnya kalian tinggal copy kodenya dan masukan ke samping judul menu kalian
  • Jangan lupa kasih spasi agar nanti ada jarak antara menu dan iconnya
  • Kalo sudah tinggal save n done
  • Salam tamvan

Cukup sekian dan terimakasih, semoga artikel tentang Tutorial Membuat Menu Navigation Bar Dropdown Responsive Plus Icon With Font Awesome ini bermanfaat :)
Jika kalian bingung dengan tutorialnya, silahkan bertanya di kolom komentar

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Membuat Menu Bar Dropdown Responsive Plus Icon Pure CSS. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Next
This Is The Current Newest Page
Previous
Previous Post »
Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Membuat Menu Bar Dropdown Responsive Plus Icon Pure CSS. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

2 comments

Mas Tamvan

Demo Menu Navigation Responsive with Icon

https://jsfiddle.net/oj2uzLzw/

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon