Membuat Navigasi Pada Web dengan HTML+CSS - dalam pembuatan suatu halaman web bar navigasi /menu navbar merupakan salah satu syarat pokok yang harus ada dalam suatu halaman web tanpa adanya navbar webpage/halaman web tsb nampak terasa sangat tidak menarik, selain itu navbar juga berfungsi agar suatu halaman web yang kita buat menjadi tidak terlalu panjang agar para pengunjung yang ingin mengunjungi tidak harus men-scrolling halaman web dari atas kebawah melainkan tingkan klik saja menu yang kita inginkan, nah oleh karena itu kami tim Young Informatics akan memberikan tutorial sederhana mengenai navbar.
1. Pertama Kali yang harus kita kerjakan adalah mengetik kode html seperti yang ada dibawah ini, simpan file tsb dengan nama navbar.html
<!DOCTYPE html>
<html>
<head>
<title>Navbar Sederhana By Young Informatics</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="Stylesheet" href="style.css"/>
</head>
<body>
<ul>
<li style="margin:3px 6px;"><img src="yi.png" width="40px" height="29px"></li><li style="width:420px;"></li>
<li><a href="#">Home</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
2. Nah setelah kita simpan file tersebut kita buka denga cara klik kanan pada mouse lalu open with browser
dan jangan kaget bila tampilannya hanya sederhana seperti ini.
.menu-wrapper {
margin:10px auto;
position: relative;
width:100%;
}
.menu-wrapper ul{
margin:0;
padding:0;
}
.multi-level-responsive-menu {
background-color: #333;
clear: both;
display: block;
width: 100%;
}
.menu-toggle {
display: none;
}
.multi-level-responsive-menu ul {
padding:0;
display: table;
width: 100%;
list-style: none;
}
.multi-level-responsive-menu ul li ul li:first-child {
border-top: 1px solid #DD3D36;
}
.multi-level-responsive-menu ul li {
position: relative;
display: inline-block;
float:left;
}
.multi-level-responsive-menu ul li:last-child {
border-right: 0;
}
.multi-level-responsive-menu ul li a{
display: block;
text-align: center;
padding:11px 20px;
color:#fff;
text-decoration: none;
line-height: 1;
font-weight: 500;
font-size: 14px;
}
.multi-level-responsive-menu ul li.active a{
background-color:#DD3D36 ;
}
.multi-level-responsive-menu ul li:not(.active) a:hover {
background-color:#DD3D36 ;
}
ul.menu li span.arrow-bottom,
ul.menu li span.arrow-right {
position: absolute;
top:15px;
right:7px;
border:5px solid transparent;
width:0;
height:0;
}
ul.menu li span.arrow-bottom {
border-top-color: #fff;
}
ul.menu li span.arrow-right {
border-left-color: #fff;}
4. dan terakhir refresh halaman tsb sehingga tampilannya akan berubah menjadi seperti berikut
maaf gan masih belum mau tampilan seperti pada tutorial yang anda berikan.
BalasHapus