TUJUAN navigasi menu di atas header blog (top navbar menu) antara lain memanfaatkan ruang di atas header.
Tampilan blog juga jadi lebih terkesan profesional, selain memudahkan pengunjung mengeksplorasi blog kita.
Berikut ini saya share beberapa desain topbar navigasi menu di atas blog header blog yang responsive dan statis. Desain pertama tampilannya seperti ini:
4. Pasang Kode Add JavaScript di bawah ini di atas kode </head>
5. Save Template
sekarang lihat blog kalian, Semoga ilmu sederhana ini bisa membantu untuk kalian semua belajar ^_^ jangan bosen-bosen belajar HTML yaa.
Tampilan blog juga jadi lebih terkesan profesional, selain memudahkan pengunjung mengeksplorasi blog kita.
Berikut ini saya share beberapa desain topbar navigasi menu di atas blog header blog yang responsive dan statis. Desain pertama tampilannya seperti ini:
1. Template > Edit HTML
2. Pasang kode HTML berikut ini di bawah kode <body>
<ul class="topnav" id="myTopnav">
<li><a href="/">Home</a></li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/sitemap.html">Sitemap</a></li>
<li><a href="/p/kontak.html">Kontak</a></li>
<li><a href="/p/disclaimer.html">Disclaimer</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
3. Pasang Kode CSS Topbar Navigasi Menu di atas Header Blog berikut ini di atas kode ]]></b:skin>/* Topbar Navmenu */
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;
}
}
4. Pasang Kode Add JavaScript di bawah ini di atas kode </head>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
5. Save Template
sekarang lihat blog kalian, Semoga ilmu sederhana ini bisa membantu untuk kalian semua belajar ^_^ jangan bosen-bosen belajar HTML yaa.
0 komentar untuk Cara Membuat Navigasi Menu di Atas Header - Responsive.
Perlihatkan Semua Komentar Tutup Semua Komentar