Cara Membuat Menu Responsive di Blog

Cara Membuat Menu Responsive di Blog - Pure CSS Tanpa Javascript - Plus Link Media Sosial

Menu Responsive di Blog - Pure CSS Tanpa Javascript ini mirip dengan Menu ala New Johny Wuss atau Menu Responsive Keren dan Top Menu Dropdown plus Media Sosial.

Penampakannya seperti ini:

Lihat Demo

Menu Responsive ini Pure CSS dan HTML, Tanpa Javascript, sehingga selain ringan (fast loding), juga bebas error yang biasa disebabkan konflik javascript.

CB dapatkan menu jenis ini dari Blogger Origin. Berikut ini cara memasangnya di blog blogger.

1. Tema > Edit HTML

2. Copas kode berikut ini di atas kode ]]></b:skin>

#topnav-outside {background:#fff;width:100%;min-height:30px;margin:0 auto;padding:0;-moz-box-shadow: 0 8px 6px -6px #ccc;-webkit-box-shadow: 0 8px 6px -6px #ccc;box-shadow: 0 8px 6px -6px #ccc;}
#topnav-intside {max-width:1120px;min-height:30px;margin:0 auto;padding:0;}
.bofollowbutton-nav{float:right;margin:0;padding:8px 5px 0 5px;overflow:hidden;clear:both;}
.status-msg-wrap{display:none;}
#bonav li.has-child {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA7gs82vnCdEuh4ibD2P7EKE5GPV2gvPTuMRWikzJ15My4yTlkZMV9OagK6pOxEfVSs0j9tWrificxKatQaPlzXOoMwniQ4C1nCIcnfeoE7CpGItkdORzwJG0qnl3Ysjvg70fu8TR8YSCz/s1600/bo_arrow_dropdown.gif);background-repeat: no-repeat;background-position: 95% 50%;}
#bonav{max-width:950px;text-transform:uppercase;}
#bonav > a{display: none;}
#bonav li{list-style-type: none;position: relative;}
#bonav li a{display: block;color: #4285f4;text-decoration:none;}
#bonav li a:active{background-color: #c00 !important;}
#bonav span:after{height: 0;width: 0;border: 0.313em solid transparent;border-bottom: none;border-top-color: #efa585;content: '';display: inline-block;vertical-align: middle;position: relative;right: -0.313em;}
#bonav > ul{background-color: #fff;height: 3.75em;margin:0;padding:0;}
#bonav > ul > li{width: 15%;height: 100%;float: left;}
#bonav > ul > li.home-icon{max-width:120px;}
#bonav > ul > li > a{font-family:'Oswald', sans-serif;height: 100%;text-align: center;font-size: 1.0em;line-height: 3.7em;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#bonav > ul > li:not( :last-child ) > a{border-right: 1px solid #f4f4f4;}
#bonav > ul > li:hover > a,#bonav > ul:not( :hover ) > li.active > a{color: #333;}
#bonav li ul{background-color: #f9f9f9;position: absolute;display: none;top: 100%;margin:0;padding:0;}
#bonav li:hover ul{display: block;left: 0;right: 0;}
#bonav li:not( :first-child ):hover ul{//left: -1px;}
#bonav li ul a{font-family:'Oswald', sans-serif;font-size: 1.0em;border-top: 1px solid #f4f4f4;padding: 1.0em;-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;}
#bonav li ul li a:hover,#bonav li ul:not( :hover ) li.active a{background-color: #333;}
@media only screen and ( max-width: 60em )
#bonav{font-size: 75%;position: relative;top: auto;left: auto;}
#bonav > a{font-size: 1.25em;text-decoration: none;color: #fff;background: #3d5c99;text-align: center;padding: 15px 0;display: none;text-align:center;overflow:hidden;}
#bonav > a:after{top: 60%;}
#bonav:not( :target ) > a:first-of-type,#bonav:target > a:last-of-type{display: block;}
#bonav > ul{height: auto;display: none;position: absolute;left: 0;right: 0;}
#bonav:target > ul{display: block;}
#bonav > ul > li{width: 100%;float: none;}
#bonav > ul > li > a{height: auto;text-align: left;padding: 0 0.833em;}
#bonav > ul > li:not( :last-child ) > a{border-right: none;border-bottom: 1px solid #f4f4f4;}
#bonav li ul{position: static;padding: 1.25em;padding-top: 0;}
#bonav li ul{background-color: #f8f8f8;}
#bonav > ul{background-color: #f8f8f8;}
#bonav li ul a{border-top: 1px solid #f1f1f1;}
#bonav > ul > li > a{border-top: 1px solid #f1f1f1;}
}

3. Copas kode berikut ini di bawah kode <header>

<div id='topnav-outside'>
<div id='topnav-intside'>
<div class='bofollowbutton-nav'>
<a href='https://www.facebook.com/' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7_fU65tmETlQ4cf5-h2miD9wcwpXM6KYZI1S6Dsx-SbDRsaCYmvX0nSBKQpkULJhuLPkJiLJJ3F9Ks6bq2i9dXLHAkZsNGzkpyMxTOPjt78ocxwpKSSlGIvdQ59xNfNHWzDBhfqgQ3gm/s1600/facebook_bo.png'/>
</a> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href='https://twitter.com/' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnozuRhMuRaUXI7jSCs7dTOpST0d3i51GAT7aI98flb9x93p_baqGukPxDlAiJscZnnbNDM5wXv35r1cmsSMUrMzvwuCF_KCqNGLnbCQ8d2nJYRP_kIVY-RagnE95I7FbCFUdzqbzqOyeu/s1600/twitter_bo.png'/>
</a> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href='https://plus.google.com/' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmKodIxfpDymwvldEAI3qHaVx_DWYmSdd1I5WHQm1puahWyC4iXlmDjKHRA1fDyHe72ih5aR36ix1OleaYD-sAxDiNay8k7p09Rym2qewNjQhrhhEqmp_EKgVcm2X-KfmEvO7qGVorSRM/s1600/gplus_bo.png'/>
</a>
</div>
<div id='bonav' role='navigation'>
<a href='#bonav' title='Show navigation'>
☰ Show Menu
</a>
<a href='#' title='Hide navigation'>
☰ Hide Menu
</a>
<ul>
<li class='home-icon'>
<a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS4w20xK2vm7sudyauRoDkxcaxpbvy25Q__8kdXBuMhyphenhyphen6Sp1n7i6dLesKqe8qgHdVC1PSBcABBpJC4u7XDV4X81Ch3RVsVgI7iGgbPjDYtU3Q33YDqQ6M6f4-snyDikqLWr6xqgx-MEyqw/s1600/blog-ornate-home-icon.png' style='height:20px;width:20px;margin:14px 0 0 0;'/></a>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 1</a>
<ul>
<li><a href='#'>Sub Menu Item 1</a></li>
<li><a href='#'>Sub Menu Item 1.1</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 2</a>
<ul>
<li><a href='#'>Sub Menu Item 2</a></li>
<li><a href='#'>Sub Menu Item 2.2</a></li>
<li><a href='#'>Sub Menu Item 2.3</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 3</a>
<ul>
<li><a href='#'>Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href='#'>Menu Item 4</a></li>
<li><a href='#'>Menu Item 5</a></li>
</ul>
</div>
</div>
</div>

4. Save!

Demikian Cara Membuat Menu Responsive di Blog - Pure CSS Tanpa Javascript.

See the Pen Menu Responsive Blogger by CB Blogger (@cbblogger) on CodePen.

Good Luck & Happy Blogging! (www.contohblog.com).*

September 11, 2017

Cara Membuat Menu Responsive di Blog - Pure CSS Tanpa Javascript