Cara Menciptakan Navbar Responsive Website Html Css Sederhana
Pada postingan terdahulu aku menciptakan design website dengan menggunakan HTML, CSS dan JS yang sederhana. Makara sobat - sobat sanggup cek pribadi pada hidangan 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 warta kepada sobat - sobat perihal bagaimana cara menciptakan navbar responsive pada website html css sederhana. Langsung saja
Kita membutuhkan HTML berikut :
Berikut instruksi css :
Kode media query responsive :
Demikian sedikit warta yang aku sanggup bagikan biar bermanfaat. Jika ada pertanyaan sobat - sobat sanggup tuliskan pada kolom komentar di bawah.
Terima Kasih
 |
| rensponsive web gapunyakode |
Kita membutuhkan HTML berikut :
<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 instruksi 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 bab yaitu nav-left yang berfungsi sebagai wadah menu, nav-center berfungsi sebagai kawasan update artikel terbaru namun teman-teman sanggup mengubah sesuai penemuan sendiri dan nav-right berfungsi sebagai wadah form login. Selanjutnya kita membutuhkan instruksi css<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>
Berikut instruksi 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 instruksi css di atas juga tidak jauh berbeda dengan instruksi css yang telah aku buat sebelumnya, namun dalam segi ukuran lebar aku menggunakan persen (%) berdasarkan aku nilai % lebih besar lengan berkuasa bila kita menginginkan sebuah website mobile friendly sedangkan bila kita menggunakan nilai lebar px nilai tersebut menyerupai paten dikala dibuka menggunakan smartphone maka tampilannya akan sesuai dengan ukuran px yg kita tentukan. Untuk mengatur css pada versi mobile (responsive) kita menambahkan media query.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%;
}
}
Kode media query di atas letakan pada file css, fungsi dari media query di atas yaitu untuk mengatur tampilan dikala website dalam versi mobile (responsive). @media screen and (max-width:640px) apabila lebar layar 640px atau lebih kecil maka css yang akan dipakai yaitu instruksi css yang berada pada media query tersebut. Jika lebar melebihi 640px maka instruksi css yang kita tuliskan tadilah yang akan digunakan. Di sinilah para designer web akan dituntut ketelitiannya alasannya lebar setiap layar smartphone berbeda-beda..nav-left {
width:100%;
}
.nav-center {
display: none;
}
.nav-right {
width: 100%
}
label{
width: 90%;
}
input{
width: 90%;
}
}
Demikian sedikit warta yang aku sanggup bagikan biar bermanfaat. Jika ada pertanyaan sobat - sobat sanggup tuliskan pada kolom komentar di bawah.
Terima Kasih