√ Cara Menciptakan Navigasi Blog Responsive Terbaru
Konten [Tampil]
Diatas ialah pola tampilan Navigasi Desktop & Responsive. Sebuah navigasi memanglah sangat penting untuk sebuah blog. Sebelumnya aku sudah menciptakan artikel perihal Cara menciptakan navigasi blog khusus mobile .Kali ini aku posting kembali cara menciptakan navigasi responsive.
untuk lihat DEMOnya klik LIHAT HASIL dibawah ini :
Baiklah ikuti langkah demi langkah berikut ini :
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="j4vascript:void(0);" onclick="myFunction()">☰
</a>
</li> </ul>
3. KODE JAVASCRIPT
Pasang di atas kode </body>
Pasang di atas kode </body>
<script type='text/j4vascript'> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav")
{ x.className += " responsive"; } else { x.className = "topnav"; } }
</script>
Sekian..
Semoga bermanfaat.........