Assalamualaikum Wr.Wb
Pada postingan kali ini saya akan berbagi sedikit ilmu tentang bagaimana cara membuat navbar responsiv dengan css.Apa itu Css? Cascading Style Sheet (CSS) merupakan aturan untuk
mengatur beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.Untuk labih jelasnya baca DI SINI.
Lalu apa itu navbar responsiv? yaitu navbar yang tampilannya bisa menyesuaikan dengan layar perangkat kita baik itu komputer,tablet hp dll.
Untu lebih jelasnya lihat gambar di bawah ini
Sudah jelas bukan? Oke,mari kita mulai
Untuk membuat tampilan responsiv gunakan tag <meta> dalam atribut <head>
- tag meta
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
selanjutnya kita buat style untuk navbarnya.Letakkan <style> pada < /style>
Berikut SS Codingnya
Yang udah gak sabar nih codingnya :v
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin:0;}
ul.topnav{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff1a75;
}
ul.topnav li{
float: left;
}
ul.topnav li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active{background-color: #00aaff}
ul.topnav li.right{float: right;}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li{float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li class="right"><a href="#">About</a></li>
</ul>
<div style="padding: 0 16px;">
<h2>Contoh Navbar Responsive</h2>
<p>Responsive web desain ini mungkin mengingatkan kita pada desain web liquid jaman dulu (sebelum populernya fixed width). Pada artikel ini, Jeffrey Zeldman menulis: It’s what some of us were going for with “liquid†web design back in the 1990s, only it doesn’t suck. (Beberapa diantara kita menuju penggunaan liquid webdesign, kembali sebagaimana tahun 1990an, hanya saja tidak lagi jelek). Ya, responsive web desain memang bukan liquid desain, tetapi lebih tepat liquid with style :D.</p>
<p>Responsive web desain ini mungkin mengingatkan kita pada desain web liquid jaman dulu (sebelum populernya fixed width). Pada artikel ini, Jeffrey Zeldman menulis: It’s what some of us were going for with “liquid†web design back in the 1990s, only it doesn’t suck. (Beberapa diantara kita menuju penggunaan liquid webdesign, kembali sebagaimana tahun 1990an, hanya saja tidak lagi jelek). Ya, responsive web desain memang bukan liquid desain, tetapi lebih tepat liquid with style :D.</p>
</div>
</body>
</html>
oh ya,saya tidak akan menjelaskan satu persatu mengenai tag di atas jadi silahkan di pelajari sendiri hehe, ya karena akan banyak sekali jika saya jelaskan satu persatu.Oke sekian berbagi ilmu membuat navbar responsiv semoga bermanfaat di balik banyaknya kekurangan postingan ini.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar