Assalamu'alaikum, selamaat siang sobat semuanya,kali ini saya akan berbagi tentang masalah blog yaitu tentang Cara mudah buat menu Navigasi Responsive diatas Header. Nah sobat semuanya didaalm sebuah blog perlu adanya suatu navigasi yang bagus dan bisa membuat si pengunjung bisa nyaman dan enak dilihatnya pada blog kita.
Dalam Hal ini sobat, ada cara unik yang bisa membuat blog kita nyaman untuk dilihat visitor,
Cara memasang dan menerapkannya juga ada disini
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. Kemudian Simpan Template
Semoga bermanfaat yah sob.
