√ Cara Menciptakan Navigasi Blog Responsive Terbaru




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()">&#9776;
</a>
</li> </ul>
3. KODE JAVASCRIPT
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.........

Sumber http://tiksatuweru.blogspot.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Subscribe to receive free email updates:

0 Response to "√ Cara Menciptakan Navigasi Blog Responsive Terbaru"

Posting Komentar