Cara Membuat Menu Navigasi Responsive di Atas Header Blog (Top Nav)
August 14, 2019
Cara Membuat Menu Navigasi Responsive di Atas Header Blog - Top Navigation Menu
CB sudah beberapa kali share cara membuat menu navigasi responsive di atas header blog. Jika menemukan topbar menu terbaru, apalagi terbaik, cb tes, coba, berhasil, dan share di sini.
Kali ini dari situs templat belajar CB selama ini, yaitu W3C Schools. Sudah dicoba dan berhasil. Menu navigasi atas header blog ini masih bisa dimodifikasi, terutama soal warna backgroundnya.
Ini penampakannya versi mobile dan desktop:
1. KODE CSS
Pasang di atas kode ]]></b:skin>
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
2. KODE HTML
Pasang di bawah kode <body>
<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
3. KODE JAVASCRIPT
Pasang di atas kode </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
4. Save Template!
KODE HTML
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
KODE CSS:
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;}
/* Dropdown content (hidden by default) */
.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;}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;}
Demikian Cara Membuat Menu Navigasi Responsive di atas Header Blog. Model lainnya ada di Indeks Top Menu.
Good Luck & Happy Blogging! (http://www.contohblog.com).*
CB sudah beberapa kali share cara membuat menu navigasi responsive di atas header blog. Jika menemukan topbar menu terbaru, apalagi terbaik, cb tes, coba, berhasil, dan share di sini.
Kali ini dari situs templat belajar CB selama ini, yaitu W3C Schools. Sudah dicoba dan berhasil. Menu navigasi atas header blog ini masih bisa dimodifikasi, terutama soal warna backgroundnya.
Ini penampakannya versi mobile dan desktop:
 |
| navigasi menu versi mobile |
 |
| navigasi menu versi desktop |
Cara Membuat Menu Navigasi Responsive
Cara memasang dan menerapkannya juga ada di laman demo.1. KODE CSS
Pasang di atas kode ]]></b:skin>
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
2. KODE HTML
Pasang di bawah kode <body>
<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
3. KODE JAVASCRIPT
Pasang di atas kode </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
4. Save Template!
Menu Topnav dengan Dropdown
Bagaimana jika mau menggunakan dropdown menu? Gampang. Masih di sumber yang sama, berikut ini cara mebuat menu navigasi, top nav ataupun header menu, di Blogger.<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
KODE CSS:
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;}
/* Dropdown content (hidden by default) */
.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;}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;}
Demikian Cara Membuat Menu Navigasi Responsive di atas Header Blog. Model lainnya ada di Indeks Top Menu.
Good Luck & Happy Blogging! (http://www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
makasihh gan infonya....akan dicobaa gann
ReplyDeletesupaya ada searchnya ada ngga gan?
ReplyDeletekotak pencarian bikin aja di sidebar, biar fokus dan gak ribet di menu
DeleteMin, ditempat saya munculnya palah ada dibawah, bukan diatas...
ReplyDeleteminta solusinya min, ane pake blogspot
supaya ada ditengah gimana ya gan?
ReplyDeleteMakasih gan di coba ini
ReplyDeleteMakasih gan..artikelnya bermanfaat
ReplyDeleteUdah bisa, cuma icon menu yg garis 3 itu gak muncul gan. Jd jelek kelihatannya
ReplyDelete