Menu Navigasi Header Responsive CSS

Sebelumnya saya menuliskan artikel tentang cara membuat navigation menu accordion CSS3 sederhana dalam berbagai warna dan navigasi accordion menggunakan javascript yang biasanya diletakkan dibagian sidebar, Tapi pada kali ini saya akan membuat nav menu menggunakan CSS pada atas blog (header). Menu ini sering di gunakan pada template Responsive sehingga akan terlihat lebih cantik dan menarik.

Menu ini hanya mengandalkan kombinasi antara CSS dan HTML5 ( No Javascript ), Sehingga tidak akan memberatkan loading blog anda !

Untuk Demonya bisa anda lihat dengan cara mengarahkan cursor anda :

• 
• Archive
  • Printing & FramingPhoto EditingStorage & Backup
    
• Contacts
  • SupportSalesBuyingPhotographersStockistGeneral
    
• Stores Location
  • South West RegionNorth East RegionCentral Region
    
• Contact Us
  • Email AddressesBy PostTelephone Numbers
    
• Gallery
  • Digital SLR CamerasInterchangeable LensesFlash Guns & AccessoriesProfessional TripodsFilters & Lens Hoods
    
• Privacy

Cara Membuat Menu Navigasi Responsive dengan CSS (mobile friendly) :

• Login ke akun blogger sobat

• Masuk ke Template dan pilih edit HTML

• Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya.

/* Responsive Nav Menu */
.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#242425; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#242425; border-radius:5px 5px 0 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#1465B6; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a.last {border-radius:0 0 5px 5px;}
.menu ul li:hover {z-index:100;}
.menu > ul > li:hover > a {background:#1465B6; margin-top:-4px; height:40px;
 box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
 }
.menu ul li:hover ul {left:0; width:180px; margin-top:0;
-webkit-transition: margin 0.25s;
-moz-transition: margin 0.25s;
-ms-transition: margin 0.25s;
-o-transition: margin 0.25s;
transition: margin 0.25s;
}
.menu ul ul li span {display:block; opacity:0;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu ul li:hover ul li span {opacity:1;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a {margin-top:0;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a:hover {background:#555;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}

.menu ul:hover + img {width:100%; height:100%;}

Jika sudah, selanjutnya anda Copypastekan kode dibawah sebelum kode <div id=header-wrapper>

 <div class='menu'>
  <ul>
   <li class='current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'><img src='http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/home-icon.png' style='padding:0px;'/></a></li>
    <li><a href='#'>Archive</a>
    <ul>
      <li>
        <span><a href='#'>Printing &amp; Framing</a>
        <span><a href='#'>Photo Editing</a>
        <span><a class='last' href='#'>Storage &amp; Backup</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href='#'>Contacts</a>
    <ul>
      <li>
        <span><a href='#'>Support</a>
        <span><a href='#'>Sales</a>
        <span><a href='#'>Buying</a>
        <span><a href='#'>Photographers</a>
        <span><a href='#'>Stockist</a>
        <span><a class='last' href='#'>General</a>
        </span></span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href='#url'>Stores Location</a>
    <ul>
      <li>
        <span><a href='#'>South West Region</a>
        <span><a href='#'>North East Region</a>
        <span><a class='last' href='#'>Central Region</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href='#url'>Contact Us</a>
    <ul>
      <li>
        <span><a href='#'>Email Addresses</a>
        <span><a href='#'>By Post</a>
        <span><a class='last' href='#'>Telephone Numbers</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href='#url'> Gallery</a>
    <ul>
      <li>
        <span><a href='#'>Digital SLR Cameras</a>
        <span><a href='#'>Interchangeable Lenses</a>
        <span><a href='#'>Flash Guns &amp; Accessories</a>
        <span><a href='#'>Professional Tripods</a>
        <span><a class='last' href='#'>Filters &amp; Lens Hoods</a>
        </span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href='#'>Privacy</a></li>
  </ul>
</div>

• Note :  Tulisan berwarna biru adalah icon home (beranda) ganti sesuai keinginan anda
  Tulisan berwarna Kuning alamat URL, dan yang berwarna Merah keterangan Menu.

SIMPAN dan lihat hasilnya.