Cara Mudah Membuat Navigasi Menu Responsive Dropdown dengan Cepat

Ilustrasi gambar

Cara Mudah Membuat Navigasi Menu Responsive Dropdown dengan Cepat - Navigasi menu merupakan suatu elemen yang sangat penting dalam dunia website atau blog. Di daftar menu tersebut ini, kita akan menampilkan sebuah link halaman statis, konten unggulan, link label dan juga bisa menampilkan eksternal link ke website atau blog lain.

Navigasi menu responsive ini menjadi hal yang wajib di era mobile-friendly. Dengan menampilkan menu responsive, maka si pengunjung akan bisa dengan mudahnya untuk menemukan "Peta" konten pada website atau blog kita. Baca juga : Cara Mudah Membuat Tombol Social Share Facebook, Google Plus, Twitter dengan Font Awesome

Dan berikut ini adalah salah satu desain 'Navigasi Menu Responsive' Dropdown' buat web atau Blogger dari MBG. Sudah di uji dan ternyata berhasil. Penampakan versi Desktop dan juga Mobile (Responsive) menu tersebut ini sebagai berikut :

Inilah Cara Membuat "Navigasi Menu Responsive dropdown"

1. Template --------> Edit HTML
2. Copas code Menu CSS Responsive berikut ini dan tarus di atas code ]]></b:skin> atau juga </style>

<====================> Code CSS Responsive Menu <====================>
#menu-wrapper{background:#4b3f57;height:50px;width:100%;position:relative;}#menu1{background:#4b3f57;color:#fff;height:50px;}#menu1 {border-bottom: 4px solid #f35d5c;}#menu1 ul,#menu1 li{margin:0;padding:0;list-style:none;}#menu1 ul{height:50px}#menu1 li{float:left;display:inline;position:relative;font-family:Arial;font-size:14px;font-weight:400;text-transform:capitalize;}#menu1 li a{color:#fff;}#menu1 a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}#menu1 li:hover > a{background:#3f354a;color:#fff;}#menu1 li a:hover{color:#fff;}#menu1 li:last-child a{border-right:none;}#menu1 input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}#menu1 label{font-family:Arial;font-size:30px;font-weight:400;text-transform:capitalize ;display:none;width:35px;height:51px;line-height:51px;text-align:center}#menu1 label span{font-size:13px;position:absolute;left:35px}#menu1 ul.menus{visibility:hidden;opacity:0;height:auto;overflow:hidden;width:166px;background:#3f354a;position:absolute;z-index:99;display:none;color:#fff;transition:all 0.3s ease-in-out;}#menu1 li > ul.menus{transition:all 0.3s linear;}#menu1 li:hover > ul.menus{visibility:visible;opacity:1;display:block;-moz-animation: fadeInUp .3s ease-in-out;-webkit-animation: fadeInUp .3s ease-in-out;animation: fadeInUp .3s ease-in-out;transition:all 0.3s linear;}#menu1 a.ai,#menu1 a.trigger2{padding:0 27px 0 14px;transition:all 0.3s linear;}#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#3f354a;color:#fff}#menu1 li > a.ai::after {content:"";margin:0 auto;background:url('http://2.bp.blogspot.com/-mHVCs4K3A84/U9vKbpqhSmI/AAAAAAAAE5E/y7Dp7HzmenA/s1600/arrow.png') no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 li:hover > a.ai::after {content:"";margin:0 auto;background:url('http://3.bp.blogspot.com/-ihlfaVl0yFM/U9vMSJa-tLI/AAAAAAAAE5Q/9SRXYxdvmmI/s1600/arrowhover.png') no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:1px solid #3a3144;transition:all .3s linear;}#menu1 ul.menus a:hover{background:#322a3b;color:#fff;transition:all .1s linear;}#menu1 ul.menus li{display:block;width:100%;font-family:'Open Sans';font-size:13px;font-weight:400;text-transform:none;}#menu1 ul.menus li:hover{width:100%;}#menu1 ul.menus li:last-child {border-bottom:none;}#menu1 ul.menus li:first-child a{border-top:none;}#menu1 ul.menus li:last-child a{border-bottom:none;}#menu1 ul.menus li:hover a {background:#322a3b;color:#fff;}#menu1 .homers a{background:#f35d5c;color:#fff;}#menu1 .homers a:hover{background:#d95353;color:#fff;}#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #f35d5c;color:#fff;}#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #f35d5c;color:#fff;}
@media screen and (max-width:960px) {#menu1{position:relative;background:#4b3f57;color:#fff;}#menu1 ul{background:#3f354a;position:absolute;top:100%;right:0;left:0;z-index:5;height:auto;display:none;}#menu1 ul.menus{width:100%;position:static;}#menu1 li{display:block;width:100%;text-align:left;}#menu1 a{border:none;}#menu1 li a{color:#fff;}#menu1 li a:hover{background:#f35d5c;color:#fff}#menu1 li:hover{background:#f35d5c;color:#fff;}#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#f35d5c;color:#fff;}#menu1 li:hover > a,#menu1 li a:hover{background:#f35d5c;color:#fff;box-shadow:none;transition: .3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus a:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 ul.menus li{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 ul.menus li a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li a:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 input,#menu1 label{display:inline-block;position:absolute;right:0;top:0;}#menu1 input:after,#menu1 label:after {content:"";background:url('http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png') no-repeat; width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:17px;}#menu1 input{z-index:4}#menu1 input:checked + label{color:#fff;font-weight:700}#menu1 input:checked ~ ul{display:block}#menu1 .homers a{background:transparent;color:#fff;}#menu1 .homers a:hover{background:#f35d5c;color:#fff;}#footer-widgetfix {width:100%;overflow:hidden;}#menu1 li:hover > a.ai::after{content:"";width:6px;height:6px;border:2px solid #fff;border-right-width:0;border-top-width:0;transform:rotate(320deg);-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-o-transform:rotate(320deg);-ms-transform:rotate(320deg);position:absolute;top:19px;right:12px;transition:all .3s linear;}<===================================================================>

3. Simpan / Save code HTML Navigasi Menu Responsive berikut ini dan taruh dibawah code </header> atau bisa juga taruh di atas code <div class='main-wrapper'>

<==================> Code HTML Navigasi Menu responsive <==================>

<nav id='menu1'>
<input type='checkbox'/>
<label><span>CB</span></label>
<ul>
<li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'></i></a></li>
<li><a href='#'>Drop Down1</a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Seo</a></li>
<li><a href='#'>Template</a></li>
<li><a href='#'>Widget</a></li>
<li><a href='#'>Social Media</a></li>
</ul>
<a href='#' id='pull'>MENU</a></nav>
<========================================================================>

4. Gantilah nama menu navigasi dengan versi kita sendiri dan tanda pagar (#) dengan Url linknya
5. Karena menu navigasi responsive ini memakai gambar home dari "Font Awesome", maka pastikan di template website atau blog kita sudah ada link ke font awesome. Apabila belum ada, sebaiknya tambahkan code tersebut ini dan taruh di atas code </head>
6. simpan / Save template

Nah, setelah anda selesai memasang code-code tersebut, sebaiknya anda coba untuk menge-cek (Pratinjau) halaman web atau blog anda. Jika masih belum tampil di halaman, maka coba ulang kembali cara-cara tersebut.

Demikian info Cara Mudah Membuat Navigasi Menu Responsive Dropdown dengan Cepat tersebut. Silahkan anda untuk mencoba cara-cara menata halaman di web atau blog anda supaya tampilan halaman web atau blog nampak cantik. Terima kasih banyak...

Sumber berita : http://www.contohblog.com