Cara Membuat Menu Bar Responsive Di Blog Tanpa Edit Html Pure Css

Demo Menu

 <!-- CSS --> <style type='text/css'> #materialmenu *margin:0;padding:0;box-sizing:border-box #materialmenuwidth:100%;height:50px;background-color:#3498DB;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23) #materialmenu atext-decoration:none #materialmenu > nav#menunav > divfloat:left;width:16.6666%;height:100%;position:relative #materialmenu > nav#menunav > div > atext-align:center;width:100%;height:100%;display:block;line-height:50px;color:#fbfbfb;transition:background-color 0.2s ease;text-transform:uppercase #materialmenu > nav#menunav > div:hover > abackground-color:rgba(0,0,0,0.1);cursor:pointer #materialmenu > nav#menunav > div > divdisplay:none;overflow:hidden;background-color:white;min-width:200%;position:absolute;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);padding:10px #materialmenu > nav#menunav > div:not(:first-of-type):not(:last-of-type) > divleft:-50%;border-radius:0 0 3px 3px #materialmenu > nav#menunav > div:first-of-type > divleft:0;border-radius:0 0 3px 0 #materialmenu > nav#menunav > div:last-of-type > divright:0;border-radius:0 0 0 3px #materialmenu > nav#menunav > div:hover > divdisplay:block #materialmenu > nav#menunav > div > div > adisplay:block;float:left;padding:8px 10px;width:46%;margin:2%;text-align:center;background-color:#3498DB;color:#fbfbfb;border-radius:2px;transition:background-color 0.2s ease #materialmenu > nav#menunav > div > div > a:hoverbackground-color:#212121;cursor:pointer h1margin-top:150px;font-weight:300 @media (max-width:600px)#materialmenu > nav#menunav > div > div > amargin:5px 0;width:100%#materialmenu > nav#menunav > div > a > spandisplay:none </style> <!-- HTML --> <div id="materialmenu">   <nav id="menunav">     <div> <a href="#"><span>Menu </span>1</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>2</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>3</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>4</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>5</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>6</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>   </nav> </div> 

nah kalo udah di pilih dan di masukan, kalian save widgetnya dan lihat hasilnya

kalo kalian tidak tau cara edit menunya / menambahkan link, edit judul menu. Silahkan ikuti tutorial di post berikut untuk mengeditnya Tutorial Cara Edit Menu Navigation Bar Di Blogger

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial cara Membuat Menu Navigation Bar Responsive Di Blog Tanpa Edit HTML ini bermanfaat. Apabila ada yang tidak mengerti / ada yang mau di tanyakan, silahkan bertanya di kolom komentar