Menu adalah sesuatu yang dibutuhkan dalam membuat blog, di kasus pembuatan landing page terkadang juda dibutuhkan menu supaya pengunjung dapat mengakses halaman halaman tertentu sehingga mendapatkan informasi produk yang komprehensif.
berikut ini adalah Cara Membuat Menu Responsive Di Blogger
Kode CSS Menu Responsive Di Blogger
<!--- Kode CSS Menu Responsive--->
<style type="text/css">
body{font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}
/*Navmenu*/
#nav {
background:#252525;
}
#nav ul {
margin:0;
padding:0;
}
#nav li {
list-style:none;
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
margin:0;
padding:0;
}
#nav li a {
display:block;
text-decoration:none;
color:white;
padding:1em;
}
#nav li a:hover {
color:white;
background:#191919;
}
.show-menu {
background: #71a4fa;
text-decoration: none;
color: #fff;
text-align: left;
padding: 10px 5px;
display: none;
}
.show-menu b{
font-size:30px;
}
.show-menu span{
margin-right: 1em;
float:right;
}
#nav input[type=checkbox]{
display: none;
}
#nav input[type=checkbox]:checked ~ #menus {
display: block;
}
/*css-styles-responsive*/
@media screen and (max-width:768px){
#nav ul {
position: static;
display: none;
}
#nav li {
border-bottom: 1px solid #333;
}
#nav ul li, #nav li a {
width: 100%;
}
#nav li a{
display:block;
height:auto;line-height:normal;
}
#nav li a {
text-align:left;
}
.show-menu {
display:block!important;
line-height:30px;
}
.show-menu:hover {
cursor:pointer;
}
label {
margin:0!important;
}
}
</style> <!--- Kode HTML Menu Responsive Sederhana --->
<nav id='nav'>
<label class='show-menu' for='show-menu'><b>☰</b> <span>Show Menu</span></label>
<input autocomplete='off' id='show-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>Comments</a></li>
</ul>
</nav>
Kalo Cara Membuat Menu Responsive Di Blogger untuk di link listdefault blogger kodenya ini
<div class='widget-content'>
<nav id='nav'>
<label class='show-menu' for='show-menu'><b>☰</b> <span>Show Menu</span></label>
<input autocomplete='off' id='show-menu' role='button' type='checkbox'/>
<ul id='menus'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</nav>
</div>
demikian Cara Membuat Menu Responsive Di Blogger
