Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog

Baca Juga

Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog.

TIPS Cara Membuat Navigasi Menu Responsive Dropdown di Blog ini kelanjutan dari tips sebelumnya tentang 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 bisa di atas header, bisa juga di bawahnya. Ini penampakannya. Demonya ada di link sumber di bawah.

Cara Membuat Navigasi Menu Responsive Dropdown di Blog

1. Tema > Edit HTML
2. Copas kode CSS Navigasi Menu Responsive Dropdown ini di atas kode ]]></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 kode HTML Navigasi Menu Responsive Dropdown ini di atas kode <header> untuk posisi di atas header dan di bawah kode </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'>&#9660;</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()">&#9776;</a>
</div>

4. Copas kode JavaSript Navigasi Menu Responsive Dropdown ini di atas kode </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, seperti dalam gambar di bawah ini, berikut ini kode-kode dan cara memasangnya.

1. Tema > Edit HTML
2. Pasang kode CSS Menu Responsive Dropdown plus Link Media Sosial ini di atas kode ]]></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 kode HTML Menu Responsive Dropdown plus Link Media Sosial ini dibawah kode </header> blog Anda.

<div id='bbt-menu'>
<nav>
<label class='toggle' for='drop'>Menu <span>&#9776;</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>&#9776;</span></label>
<a href='#'>Service &#9776;</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>&#9776;</span></label>
<a href='#'>Portfolio &#9776;</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>&#9776;</span></label>
<a href='#'>Works &#9776;</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 menggunakan font awesome, maka pasang link ke Awesome Font berikut ini di atas kode </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