Cara Menciptakan Navbar Responsive Website Html Css Sederhana

⇉ Download Cara Menciptakan Navbar Responsive Website Html Css Sederhana Now! ⇇

Pada postingan terdahulu aku menciptakan design website dengan menggunakan HTML, CSS dan JS yang sederhana. Makara sobat - sobat sanggup cek eksklusif pada sajian design bila ingin melihat beberapa artikel yang telah aku buat. Namun artikel design website tersebut masih dalam tampilan versi dekstop. Kesempatan kali ini aku ingin menyebarkan info kepada sobat - sobat perihal bagaimana cara menciptakan navbar responsive pada website html css sederhana. Langsung saja

rensponsive web gapunyakode

Kita membutuhkan HTML berikut :

Baca Juga

<h2>GAPUNYAKODE</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 arahan html tersebut kita letakan diantara tag <body>...</body>. Pada tag html di atas tidak jauh berbeda dengan tag html navbar yang telah aku buat sebelumnya namun yang membedakan adalah aku membagi navbar menjadi 3 potongan yaitu nav-left yang berfungsi sebagai wadah menu, nav-center berfungsi sebagai daerah update artikel terbaru namun teman-teman sanggup mengubah sesuai penemuan sendiri dan nav-right berfungsi sebagai wadah form login. Selanjutnya kita membutuhkan arahan css

Berikut arahan 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;
}

Pada arahan css di atas juga tidak jauh berbeda dengan arahan css yang telah aku buat sebelumnya, namun dalam segi ukuran lebar aku menggunakan persen (%) berdasarkan aku nilai % lebih kuat bila kita menginginkan sebuah website mobile friendly sedangkan bila kita menggunakan nilai lebar px nilai tersebut menyerupai paten saat dibuka menggunakan 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 :

@media screen and (max-width:640px) {
.nav-left {
width:100%;
}
.nav-center {
display: none;
}
.nav-right {
width: 100%
}
label{
width: 90%;
}
input{
width: 90%;
}
}

Kode media query di atas letakan pada file css, fungsi dari media query di atas yaitu untuk mengatur tampilan saat website dalam versi mobile (responsive). @media screen and (max-width:640px) apabila lebar layar 640px atau lebih kecil maka css yang akan dipakai yaitu arahan css yang berada pada media query tersebut. Jika lebar melebihi 640px maka arahan css yang kita tuliskan tadilah yang akan digunakan. Di sinilah para designer web akan dituntut ketelitiannya sebab lebar setiap layar smartphone berbeda-beda.

Demikian sedikit info yang aku sanggup bagikan biar bermanfaat. Jika ada pertanyaan sobat - sobat sanggup tuliskan pada kolom komentar di bawah.
Terima Kasih

≫Download Cara Menciptakan Navbar Responsive Website Html Css Sederhana≪