TIPS Cara Membuat Navigasi Menu Responsive Dropdown di Blog ini kelanjutan dari tips sebelumnya perihal Cara Membuat Template Blog Responsive dan Membuat Auto Readmore otomatis di hompage.
Setelah respopsinve dan auto readmore, tentu navigasi menunya juga harus responsive (ramah seluler, mobile-friendly). Posisinya dapat di atas header, dapat juga di bawahnya. Ini penampakannya. Demonya ada di link sumber di bawah.
Cara Membuat Navigasi Menu Responsive Dropdown di Blog
1. Tema > Edit HTML2. Copas isyarat CSS Navigasi Menu Responsive Dropdown ini di atas isyarat ]]></b:skin>
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
3. Copas isyarat HTML Navigasi Menu Responsive Dropdown ini di atas isyarat <header> untuk posisi di atas header dan di bawah isyarat </header> untuk posisi di bawah header.
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<font size='1'>▼</font>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
4. Copas isyarat JavaSript Navigasi Menu Responsive Dropdown ini di atas isyarat </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
5. Save! Simpan template.
Beres!
Navigasi Menu Responsive Dropdown Plus Link Media Sosial
Jika ingin dilengkapi dengan icon link media sosial, menyerupai dalam gambar di bawah ini, berikut ini kode-kode dan cara memasangnya.
1. Tema > Edit HTML
2. Pasang isyarat CSS Menu Responsive Dropdown plus Link Media Sosial ini di atas isyarat ]]></b:skin>
/* Navigasi Menu ------------------------------- */
.toggle,[id^=drop]{display:none}
#bbt-menu{background:#4d90fe;width:100%;margin:0 auto;max-width:900px;}
nav{width:100%;padding:0;margin:5px 0}
nav:after{content:'';display:table;clear:both}
nav ul{float:left;padding:0;margin:0;list-style:none;position:relative;width:100%}
nav ul li{margin:0;display:inline-block;float:left;}
nav ul li ul li{background:#333}
nav a,nav a:link,nav a:hover,nav a:visited{display:block;padding:0 14px;color:#FFF;font-size:14px;line-height:45px;text-decoration:none;font-weight:700}
nav ul li ul li:hover{background:#333}
nav a:hover{background-color:#c00}
nav ul li ul li a:hover{background-color:#48d}
nav ul ul{display:none;position:absolute;top:45px;z-index:9999}
nav ul li:hover > ul{display:inherit}
nav ul ul li{width:170px;float:none;display:list-item;position:relative}
nav ul ul ul li{position:relative;top:-45px;left:170px}
nav label span{float:right}
.toggle,[id^=drop]{display:none}
nav input[type=checkbox]{display:none}
.homer {background:#c00}
.socials {float:right;width:25%;}
@media all and (max-width : 768px) {
nav{margin:0}
.toggle + a,.menu{display:none}
.toggle{display:block;background-color:#333;padding:0 20px;color:#FFF;font-size:20px;line-height:45px;text-decoration:none;border:none}
.toggle:hover{background-color:#000}
[id^=drop]:checked + ul{display:block;width:100%}
nav ul li{display:block;width:100%}
nav ul ul .toggle,nav ul ul a{padding:0 60px}
nav ul ul ul a{padding:0 80px}
nav a:hover,nav ul ul ul a{background-color:#000}
nav ul li ul li .toggle,nav ul ul a{background-color:#212121}
nav ul ul{float:none;position:static;color:#fff}
nav ul ul li:hover > ul,nav ul li:hover > ul{display:none}
nav ul ul li{display:block;width:100%}
nav ul ul ul li{position:static}
.socials {float:left;width:100%;}
}
3. Copas/pasang isyarat HTML Menu Responsive Dropdown plus Link Media Sosial ini dibawah isyarat </header> blog Anda.
<div id='bbt-menu'>
<nav>
<label class='toggle' for='drop'>Menu <span>☰</span></label>
<input id='drop' type='checkbox'/>
<ul class='menu'>
<li class='homer'><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li>
<!-- First Tier Drop Down -->
<label class='toggle' for='drop-1'>Service <span>☰</span></label>
<a href='#'>Service ☰</a>
<input id='drop-1' type='checkbox'/>
<ul>
<li><a href='#'>Service 1</a></li>
<li><a href='#'>Service 2</a></li>
<li><a href='#'>Service 3</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li>
<!-- First Tier Drop Down -->
<label class='toggle' for='drop-2'>Portfolio <span>☰</span></label>
<a href='#'>Portfolio ☰</a>
<input id='drop-2' type='checkbox'/>
<ul>
<li><a href='#'>Portfolio 1</a></li>
<li><a href='#'>Portfolio 2</a></li>
<li>
<!-- Second Tier Drop Down -->
<label class='toggle' for='drop-3'>Works <span>☰</span></label>
<a href='#'>Works ☰</a>
<input id='drop-3' type='checkbox'/>
<ul>
<li><a href='#'>HTML/CSS</a></li>
<li><a href='#'>jQuery</a></li>
<li><a href='#'>Python</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>FAQ</a></li>
<div class='socials'>
<li class='sorting-01 facebook'><a href='https://www.facebook.com/' rel='nofollow'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='https://twitter.com/' rel='nofollow'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='https://plus.google.com/'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin'><a href='https://id.linkedin.com/in/' rel='nofollow'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='https://www.youtube.com/channel/'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</div>
</ul>
</nav>
</div>
<div class='clear'/>
4. Karena icon medsosnya memakai font awesome, maka pasang link ke Awesome Font berikut ini di atas isyarat </head>
<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
5. SAVE! Simpan template.
Itu dia Cara Membuat Navigasi Menu Responsive Dropdown di Blog dan Menu Responsive Blog plus Link Media Sosial. Wasalam. (blogromeltea.blogspot.com).*
Sumber
Sumber
0 comments: