✔ Cara Menciptakan Navbar Responsive Website Html Css Sederhana
Pada postingan terdahulu aku menciptakan design website dengan menggunakan HTML, CSS dan JS yang sederhana. Makara sahabat - sahabat sanggup cek pribadi 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 membuatkan isu kepada sahabat - sahabat ihwal bagaimana cara menciptakan navbar responsive pada website html css sederhana. Langsung saja
Kita membutuhkan HTML berikut :
Berikut arahan css :
Kode media query responsive :
Demikian sedikit isu yang aku sanggup bagikan agar bermanfaat. Jika ada pertanyaan sahabat - sahabat sanggup tuliskan pada kolom komentar di bawah.
Terima Kasih Sumber http://gapunyakode.blogspot.com
 |
| 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 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 pecahan 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 arahan 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 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 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 ialah 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 ialah 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..nav-left {
width:100%;
}
.nav-center {
display: none;
}
.nav-right {
width: 100%
}
label{
width: 90%;
}
input{
width: 90%;
}
}
Demikian sedikit isu yang aku sanggup bagikan agar bermanfaat. Jika ada pertanyaan sahabat - sahabat sanggup tuliskan pada kolom komentar di bawah.
Terima Kasih Sumber http://gapunyakode.blogspot.com
0 Response to "✔ Cara Menciptakan Navbar Responsive Website Html Css Sederhana"
Posting Komentar