Setelah sebelumnya belajar tentang membuat menu vertikal dengan html dan css, sekarang kita akan belajar salah satu cara membuat menu horizontal. Maksud menu horizontal yaitu menu yang tersusun dari kiri ke kanan atau dari kanan ke kiri. Untuk membuat menu horizontal sama juga seperti membuat menu vertikal yaitu menggunakan tag un-ordered list <ul>. Tentu saja tag <ul> yang awalnya untuk menulis teks poin per poin baik numbering atau bullets dengan bantuan CSS dapat menjadi menu horizontal. Dalam prakteknya tidak hanya tag <ul> tapi juga melibatkan tag <div> sebagai layernya. Perhatikan gambar menu horizontal yang akan kita buat di bawah ini:
Untuk membuat menu horizontal seperti gambar di atas, silahkan pelajari dan praktekan script berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Menu Horizontal</title>
<Style>
#menu{
border:1px solid;
width:850px;
height:30px;
margin:5px auto;
background-color:blue;
clear:both;
}
#topmenu ul{
list-style:none;
margin:0;
padding:0;
}
#topmenu li{
float:left; padding:0 5px 0 0px;
display: inline;
position:relative;
}
#topmenu a{
margin-left: 0px;
margin-right: 5px;
text-decoration: none;
display: block;
float: left;
height: 25px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
color: #ffcc00;
}
#topmenu a:hover{
margin-left: 0px;
margin-right: 5px;
text-decoration: none;
display: block;
float: left;
height: 25px;
background: red;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
color: yellow;
}
</style>
</head>
<body>
<Div id="menu">
<div id="topmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Inti dari pembuatan menu horizontal terletak pada CSS yang mengubah list-style tag <ul> menjadi none, diplay tag <li> diatur inline, begitu juga dengan tag link <a> diatur display menjadi block. Demikianlah tutorial singkat tentang membuat menu horizontal dengan html dan css. Semoga bermanfaat.