Membuat Menu Navigasi Responsive HTML5 – Menu Navigasi ialah bagian berarti dalam suatu desain website. desain menu Navigasi responsive membolehkan konsumen bisa memakai dalam seluruh bentuk dimensi device. Alhasil menu navigasi ini akan terlihat nyaman meski dibuka di desktop, tablet maupun seluler.
Membuat Menu Navigasi Responsive HTML5
wimi5 – Source isyarat Navigasi responsive memakai jQuery serta HTML5. Alhasil menu Navigasi halamn website mempunyai dampak spesial. Dampak spesial ini merupakan layar penuh HTML5 adaptif responsive multi- level. Navigasi responsive
Mengutip labkom99, HTML5 yang dicocokkan buat layar sentuh fitur seluler. Desain warna totalitas amat baik. Dampak kartun dilengkapi dengan ciri peralihan CSS3 serta js. Percobaan kompatibilitas memakai FireFox, Chrome, Ekspedisi serta Opera. Mensupport browser HTML5 ataupun CSS3.
Baca juga : Skill HTML5 Yang Harus Di Kuasai Web Developer
Alat Dan Bahan
- Notepad
- Tool Web Programming
Buat membuat menu Navigasi responsive ini butuh melaksanakan pemanggilan isyarat CSS serta js. Buat triknya dapat diamati dibawah ini.
Panggil Gaya CSS
Buat pemanggilan CSS memakai isyarat selanjutnya ini, isyarat selanjutnya di pasang saat sebelum isyarat</ head.
<link rel=”stylesheet” type=”text/css” href=”css/default.css” />
<link rel=”stylesheet” type=”text/css” href=”css/component.css” />
<link rel=”stylesheet” type=”text/css” href=”css/labkom99.css”>
Panggil Plug-In JS
Pemanggilan JS juga pada prinsipnya sama dengan pemanggilan CSS.
<script src=”js/modernizr.custom.js”></script>
Struktur HTML
Berikut ini adalah struktur HTML yang digunakan untuk membuat menu navigasi
<nav id=”menu” class=”nav”>
<ul>
<li>
<a href=’http://www.labkom99.com’ target=’_blank’ >
<span class=”icon”>
<i aria-hidden=”true” class=”icon-home”></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href=”https://www.labkom99.com/p/jasa-it.html” target=”_blank”>
<span class=”icon”>
<i aria-hidden=”true” class=”icon-services”></i>
</span>
<span>Services</span>
</a>
</li>
<li>
<a href=”https://www.labkom99.com/p/about.html” target=”_blank”>
<span class=”icon”>
<i aria-hidden=”true” class=”icon-portfolio”></i>
</span>
<span>Portfolio</span>
</a>
</li>
<li>
<a href=”https://www.labkom99.com/search/label/” target=”_blank”>
<span class=”icon”>
<i aria-hidden=”true” class=”icon-blog”></i>
</span>
<span>Blog</span>
</a>
</li>
<li>
<a href=”https://www.labkom99.com/p/jasa-it.html” target=”_blank”>
<span class=”icon”>
<i aria-hidden=”true” class=”icon-team”></i>
</span>
<span>The team</span>
</a>
</li>
<li>
<a href=’https://www.labkom99.com/p/contact.html’ target=”_blank”>
<span class=”icon”>
<i aria-hidden=”true” class=”icon-contact”></i>
</span>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
Menu navigasi menggunakan class nav untuk mempermudah pemanggilan kode css
Struktur CSS
Untuk membuat responsive pada menu navigasi diperlukan eleman css transition seperti yang digunakan pada css berikut ini
.nav ul {
max-width: 1240px;
margin: 0;
padding: 0;
list-style: none;
font-size: 1.5em;
font-weight: 300;
}
.nav li span {
display: block;
}
.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
-webkit-transition: color .5s, background .5s, height .5s;
-moz-transition: color .5s, background .5s, height .5s;
-o-transition: color .5s, background .5s, height .5s;
-ms-transition: color .5s, background .5s, height .5s;
transition: color .5s, background .5s, height .5s;
}
.nav i{
/* Make the font smoother for Chrome */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
Preview
Buat preview membuat menu Navigasi responsive HTML5 telah labkom99 sajikan di link dibawah ini. Supaya lebih gampang menekuni pula labkom99 telah sajikan link unduh full source code nya.
