![[ HTML ] Cara mudah membuat tampilan Navigasi](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtEciLcLifeNaV1Th6VLxvQtlq6OYaX8g3G3lhRvV6TP0DWpT-aJab8tZE_IZUa9xV99uri_ADGs9KsI90M1rja6Z97SlETQuuahDiyy3fC8E1ZpLGImW2JcLm4662dIV2zMLX4QAt2T2/w336-h336-p-k-no-nu/1.PNG)
[ HTML ] Cara mudah membuat tampilan Navigasi
Tampilan navigasi pada website adalah merupakan sesuatu yang sangat penting. Selain menjaga tampilan website yang lebih professional Navigasi juga diperuntukan untuk pengunjung agar mudah mendapatkan artikel yang sedang di cari. Berikut tampilan yang akan kita buat
Yak itu tampilan sederhana yang akan kita buat pertama sediakan terlebih dahulu file HTML dan CSS kalian ( File CSS jika kallian menggunakan CSS External ). ketikkan coding HTML berikut di dalam file HTML kalian..
<html>
<head>
<title>mudatek</title>
<link href="CSS/project.css" rel="Stylesheet" type="text/css">
</head>
<body>
<div class="s1">
<div class="wrp">
<div class="mn">HOME</div>
<div class="mn">About</div>
<div class="mn">Contact</div>
<div class="mn">Sitemap</div>
<div class="mn">Disclaimer</div>
<div class="mn">Privacy Policy</div>
<form>
<input class="search" type="text" placeholder="Cari artikel" required>
<input class="button" type="button" value="Cari">
</form>
</div>
</div>
</body>
</html>
Nah, jika sudah menampilkan tampilan seperti diatas selanjutnya kita masuk di CSS
ketikkan Coding berikut di dalam CSS kalian
body{
margin: 0px;
padding: 0px;
}
form {
float: right;
padding: 10px 0px;
margin: auto;
}
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid white;
}
.button {
position:relative;
padding:6px 15px;
left:-8px;
border:2px solid maroon;
background-color:maroon;
color:#fafafa;
}
.button:hover {
background-color:teal;
color:white;
}
.wrp:before, .wrp:after{
content: "";
display: table;
clear: both;
}
.wrp{
width: 960px;
margin: auto;
}
.mn {
color: black;
}
.s1{
background: aqua;
color: solid black;
position: fixed;
width: 100%;
margin: 0px auto;
}
.s1 .mn{
float: left;
height: 25px;
line-height: 50px;
padding: 0px 15px;
cursor: pointer;
font-variant: small-caps;
font-family: arial;
font-weight: bold;
}
Nah itu cara membuat tampilan navigasi di web, menggunakan HTML dan CSS.
body{
margin: 0px;
padding: 0px;
}
form {
float: right;
padding: 10px 0px;
margin: auto;
}
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid white;
}
.button {
position:relative;
padding:6px 15px;
left:-8px;
border:2px solid maroon;
background-color:maroon;
color:#fafafa;
}
.button:hover {
background-color:teal;
color:white;
}
.wrp:before, .wrp:after{
content: "";
display: table;
clear: both;
}
.wrp{
width: 960px;
margin: auto;
}
.mn {
color: black;
}
.s1{
background: aqua;
color: solid black;
position: fixed;
width: 100%;
margin: 0px auto;
}
.s1 .mn{
float: left;
height: 25px;
line-height: 50px;
padding: 0px 15px;
cursor: pointer;
font-variant: small-caps;
font-family: arial;
font-weight: bold;
}
Berikut hasil nya jika kalian sudah menggabungkannya dengan CSS
Jika masih ada yang kurang mengerti atau tidak bisa dijalankan silahkan komen dibawah. Yang mau tanya tanya silahkan komen dibawah saja.
Terima kasih telah berkunjung di blog saya. Semoga bermanfaat, dan jangan lupa untuk share ke teman teman kalian.
