Setiap website memilki menu yang akan memandu pengunjung untuk menelusuri ada apa saja pada website tersebut. Maka dari itu, peran menu sangat penting. Apalagi jika website kita berisikan begitu banyak informasi. Sehingga kita perlu menatanya dengan baik.
Berbicara mengenai menu, sesuai dengan pembahasan kita kali ini adalah bagaimana cara membuat menu bidang miring dengan css. Bidang miring disini adalah style kita dalam menampilkan menu agar terlihat menarik. Agar pengunjung juga tidak bosan, dan yang terpenting adalah menu website kita menjadi lebih memuat informasi.
Oke langsung saja kita mulai prakteknya, pertama kalian harus buat file html terlebih dahulu. Kalian bisa salin contoh code dibawah ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Halaman website dengan garis mirin</title>
<style type=”text/css”>
body{
background: #ccc;
}
.container{
width: 800px;
margin:auto;
}
.menu li a{
text-decoration:none;
color: #333333;
}
.menu li{
float: left;
padding: 10px 20px;
background: red;
position: relative;
list-style: none;
margin: 0 21px;
text-decoration: none;
}
.menu li:before{
content: “”;
position: absolute;
top: 0;
left: -40px;
border-top: 38px solid red;
border-left: 40px solid transparent;
}
.menu li:after{
content: “”;
position: absolute;
top: 0;
right: -40px;
border-bottom: 38px solid red;
border-right: 40px solid transparent;
}
</style>
</head>
<body>
<div class=”container”>
<ul class=”menu”>
<li> <a href=”#”>Link 1</a> </li>
<li> <a href=”#”>Link 2</a> </li>
<li> <a href=”#”>Link 3</a> </li>
<li> <a href=”#”>Link 4</a> </li>
</ul>
</div>
</body>
</html>
Setelah sudah kalian simpan filenya. Untuk melihat hasilnya kalian bisa buka file tersebut lewat browser kesayangan kalian. Jika berhasil maka tampilnya akan seperti ini.
Maka tampilan menunya akan menjadi seperti gambar diatas. Pada umumnya bentuk menu hanya kotak persegi panjang, namun dengan adanya fitur dari css, kita bisa buat dengan bentuk yang dapat kita atur sesuai dengan kemauan kita. Ini adalah salah satu contoh pengaplikasianya. Kalian bisa kembangkan lagi sesuai dengan keinginan kalian.
Sekian pembahasan mengenai bagaimana cara membuat menu bidang miring dengan css. Semoga artikel kali ini bermanfaat. Sampai jumpa pada artikel selanjutnya.