Cara Membuat Menu Navigasi Responsive dengan CSS

Anda sedang mencari cara membuat menu navigasi responsive di blogger hanya dengan CSS?

Ini dia caranya !
Langkah pertama :
Cari dulu code seperti ini  ]]></b:skin> pada template anda.

Langkah kedua :
Copy Paste code CSS yang ada di bawah ini dan tempatkan DI ATAS  ]]></b:skin> tadi
ini code CSSnya :

 #menu{background:#464646;color:#eee;height:35px;}  
 #menu ul,#menu li{margin:0;padding:0;list-style:none}  
 #menu ul{height:35px}  
 #menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}  
 #menu li a{color:#ccc}  
 #menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}  
 #menu li:hover > a,#menu li a:hover{color:#fff}  
 #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}  
 #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}  
 #menu label span{font-size:13px;position:absolute;left:35px}  
 #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}  
 #menu ul.menus a{color:#333}  
 #menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}  
 #menu li:hover ul.menus{display:block}  
 #menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}  
 #menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}  
 #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}  
 #menu ul.menus a:hover{background:#BABABA;}  
 #menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}  

dan ini CSS yang juga di tempatkan di atas  ]]></b:skin>. ( Ctt : Kalau code seperti ini @media screen and (max-width: 768px) sudah ada di template anda letakkan aja di bawahnya.

 @media screen and (max-width: 768px){  
 #menu{position:relative}  
 #menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}  
 #menu ul.menus{width:100%;position:static;border:none}  
 #menu li{display:block;float:none;width:auto;text-align:left}  
 #menu li a{color:#fff}  
 #menu li a:hover{color:#333}  
 #menu li:hover{background:#BABABA;color:#333;}  
 #menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}  
 #menu ul.menus a{background:#BABABA;}  
 #menu ul.menus a:hover{background:#fff;}  
 #menu input,#menu label{position:absolute;top:0;left:0;display:block}  
 #menu input{z-index:4}  
 #menu input:checked + label{color:white}  
 #menu input:checked ~ ul{display:block}  
 }  

Langkah terakhir adalah meletakkan kode HTML pemanggilannya, letakkan di bawah bagian header </header>

 <nav id='menu'>  
 <input type='checkbox'/>  
 <label>&#8801;<span>Navigation</span></label>  
 <ul>  
 <li><a href='/' title="Home">Home</a></li>  
 <li><a href='#' title="Menu 1">Menu 1</a></li>  
 <li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>  
 <ul class='menus'>  
 <li><a href='#' title="Drop Menu1">Drop Menu 1</a></li>  
 <li><a href='#' title="Drop Menu2">Drop Menu 2</a></li>  
 <li><a href='#' title="Drop Menu3">Drop Menu 3</a></li>  
 </ul>  
 </li>  
 <li><a href='#' title="Menu 2">Menu 2</a></li>  
 <li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a>  
 <ul class='menus'>  
 <li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li>  
 <li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li>  
 <li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li>  
 </ul>  
 </li>  
 <li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>  
 </ul>  
 </nav>  

Ctt : Title dan linknya silahkan sesuaikan.