Cara Membuat Navbar Responsive Website HTML CSS Sederhana
Pada postingan terdahulu saya membuat design website dengan menggunakan HTML, CSS dan JS yang sederhana. Jadi teman - teman bisa cek langsung pada menu design jika ingin melihat beberapa artikel yang telah saya buat.
Namun artikel design website tersebut masih dalam tampilan versi dekstop. Kesempatan kali ini saya ingin berbagi informasi kepada teman - teman tentang bagaimana cara membuat navbar responsive pada website html css sederhana. Langsung saja
Kita membutuhkan HTML berikut :
Kita membutuhkan HTML berikut :
<h2>androitechnoku</h2>
<p>Testing Responsive Navbar</p>
<div class="nav-left">
<ul>
<li>
<a class="active" href="#home">Home</a>
</li>
<li class="dropdown">
<a class="dropbutton" href="#">Menu 1</a>
</li>
</ul>
</div>
<div class="nav-center">
<p>Nav Center</p>
</div>
<div class="nav-right">
<form action="">
<label>Username</label>
<input type="text" name="username">
<label>Password</label>
<input type="text" name="password">
<button type="submit">Login</button>
</form>
</div>
Seperti biasa kode html tersebut kita letakan diantara tag <body>...</body>. <p>Testing Responsive Navbar</p>
<div class="nav-left">
<ul>
<li>
<a class="active" href="#home">Home</a>
</li>
<li class="dropdown">
<a class="dropbutton" href="#">Menu 1</a>
</li>
</ul>
</div>
<div class="nav-center">
<p>Nav Center</p>
</div>
<div class="nav-right">
<form action="">
<label>Username</label>
<input type="text" name="username">
<label>Password</label>
<input type="text" name="password">
<button type="submit">Login</button>
</form>
</div>
Pada tag html di atas tidak jauh berbeda dengan tag html navbar yang telah saya buat sebelumnya namun yang membedakan adalah saya membagi navbar menjadi 3 bagian yaitu nav-left yang berfungsi sebagai wadah menu, nav-center berfungsi sebagai tempat update artikel terbaru namun teman-teman bisa mengubah sesuai inovasi sendiri dan nav-right berfungsi sebagai wadah form login. Selanjutnya kita membutuhkan kode css
Berikut kode css :
Pada kode css di atas juga tidak jauh berbeda dengan kode css yang telah saya buat sebelumnya, namun dalam segi ukuran lebar saya menggunakan persen (%) menurut saya nilai % lebih berpengaruh jika kita menginginkan sebuah website mobile friendly sedangkan jika kita memakai nilai lebar px nilai tersebut seperti paten ketika dibuka memakai smartphone maka tampilannya akan sesuai dengan ukuran px yg kita tentukan. Untuk mengatur css pada versi mobile (responsive) kita menambahkan media query.
Kode media query responsive :
Kode media query di atas letakan pada file css, fungsi dari media query di atas adalah untuk mengatur tampilan ketika website dalam versi mobile (responsive). @media screen and (max-width:640px) apabila lebar layar 640px atau lebih kecil maka css yang akan digunakan adalah kode css yang berada pada media query tersebut. Jika lebar melebihi 640px maka kode css yang kita tuliskan tadilah yang akan digunakan.
Berikut kode css :
.nav-left {
float:left;
width:15%;
}
.nav-center {
background-color:#000;
float:left;
width:45%;
}
.nav-right {
background-color:#000;
float:left;
width:40%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
.form-login {
float: right;
margin-top: 10px;
margin-right: 10px;
}
form {
margin-left: 5px;
padding: 15px 0px 14px 0px;
}
label{
color: #fff;
}
float:left;
width:15%;
}
.nav-center {
background-color:#000;
float:left;
width:45%;
}
.nav-right {
background-color:#000;
float:left;
width:40%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
.form-login {
float: right;
margin-top: 10px;
margin-right: 10px;
}
form {
margin-left: 5px;
padding: 15px 0px 14px 0px;
}
label{
color: #fff;
}
Kode media query responsive :
@media screen and (max-width:640px) {
.nav-left {
width:100%;
}
.nav-center {
display: none;
}
.nav-right {
width: 100%
}
label{
width: 90%;
}
input{
width: 90%;
}
}
.nav-left {
width:100%;
}
.nav-center {
display: none;
}
.nav-right {
width: 100%
}
label{
width: 90%;
}
input{
width: 90%;
}
}
Di sinilah para designer web akan dituntut ketelitiannya karena lebar setiap layar smartphone berbeda-beda.
Demikian sedikit informasi yang saya dapat bagikan semoga bermanfaat. Jika ada pertanyaan teman - teman bisa tuliskan pada kolom komentar di bawah.
Terima Kasih
Demikian sedikit informasi yang saya dapat bagikan semoga bermanfaat. Jika ada pertanyaan teman - teman bisa tuliskan pada kolom komentar di bawah.
Terima Kasih
0 Response to "Cara Membuat Navbar Responsive Website HTML CSS Sederhana"
Post a Comment