Sekarang kitaakan mencoba membuatmenu horizontal dengan menggunakan kode html dan css tanpa menggunakan jquery dan javascript. Dan menu ini mudahuntuk diintegrasikan kedalam website anda. Ikuti langkah-langkah dibawah ini :
Membuat halaman tampilan html
Kode html nya adalah seperti dibawah ini. Copy semua kode dibawah ini dan pastekan, lalu simpan dengan nama index.php
<html>
<head><title>CSS Tutorial</title>
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<div id="menu">
<ul><li><a class="active" href="#">Menu 1</a><ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a>
<ul>
<li><a href="#">Menu 1.2.1</a></li>
<li><a href="#">Menu 1.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a>
<ul>
<li><a href="#">Menu 2.2.1</a></li>
<li><a href="#">Menu 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</ul>
</div>
</body>
</html>
Membuat file cssKode css dibawah ini untuk membuat menu dropdown. Copy file dibawah simpan dengan nama style.css.
Merancang Hover Effect kami
Kode dibawah ini untuk menampilkan menu tingkat kedua ketika menu tingkat pertama diklik.
#menu ul li:hover > ul {
display: block;
}
#menu ul li a:hover > ul {
display: block;
}
Merancang menu tingkat pertamaMenjelaskan tentang kode menu yang menyertakan properti css dari id menu.
#menu{
width: auto;
margin-top: 11px;
}
#menu ul ul {
text-align:left !important;
display: none;
}
#menu ul {
list-style: none outside none;
display: block;
line-height:1px;
padding:0;
}
#menu ul:after {
display: block;
}
#menu ul li {
float: left;
position:relative;
line-height:19px;
}
#menu > ul > li > a:hover {
border-bottom: 4px solid #0097C4 !important;
color:#0097C4;
background-repeat: repeat;
}
#menu ul li a {
color: #666666;
font-size: 12px;
padding: 27px 15px 33px 15px;
text-decoration: none;
text-transform: uppercase;
border-bottom: 4px solid #00FF00 !important;
display: block;
position: relative;
transition: all 0.2s linear 0s;
position:relative;
}
#menu .active{
border-bottom: 4px solid #0097C4 !important;
color:#0097C4;
background-repeat: repeat;
}
Merancang menu tingkat kedua
Salin kode dibawah ini dan pastekan pada style.css. Kode dibawah ini untuk merancang menu tingkat kedua dan juga efek hover untuk menampilkan menu tinggkat ke tiga.
#menu ul ul {
border-top: 1px solid #ECECEC !important;
position: absolute;
z-index:1;
background-color: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-left:-1px !important;
margin-top: 1px !important;
}
#menu ul ul li {
float: none;
position: relative;
margin-right: 0 !important;
width:230px;
line-height:19px;
margin: -1px 0 0;
border-left: medium none;
}
#menu ul ul li a {
font-size: 12px;
padding: 8px 10px !important;
text-transform: uppercase;
border: medium none !important;
border-bottom: 1px solid #ECECEC !important;
}
#menu > ul > li > ul > li > a:hover {
color: #0097C4 !important;
}
Merancang menu tingkat ketiga
Salin dan pastekan pada style.css. Kode ini untuk merancang menu tingkat ketiga.
#menu ul ul ul {
position: absolute; left: 100%; top:0;
width:230px;
}
#menu ul ul ul li a {
padding: 8px 10px;
}
#menu ul ul ul li a:hover {
color: #0097C4 !important;
}
Ringkasan File css
#menu ul li:hover > ul {
display: block;
}
#menu ul li a:hover > ul {
display: block;
}
#menu{
width: auto;
margin-top: 11px;
}
#menu ul ul {
text-align:left !important;
display: none;
}
#menu ul {
list-style: none outside none;
display: block;
line-height:1px;
padding:0;
}
#menu ul:after {
display: block;
}
#menu ul li {
float: left;
position:relative;
line-height:19px;
}
#menu > ul > li > a:hover {
border-bottom: 4px solid #0097C4 !important;
color:#0097C4;
background-repeat: repeat;
}
#menu ul li a {
color: #666666;
font-size: 12px;
padding: 27px 15px 33px 15px;
text-decoration: none;
text-transform: uppercase;
border-bottom: 4px solid #00FF00 !important;
display: block;
position: relative;
transition: all 0.2s linear 0s;
position:relative;
}
#menu .active{
border-bottom: 4px solid #0097C4 !important;
color:#0097C4;
background-repeat: repeat;
}
#menu ul ul {
border-top: 1px solid #ECECEC !important;
position: absolute;
z-index:1;
background-color: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-left:-1px !important;
margin-top: 1px !important;
}
#menu ul ul li {
float: none;
position: relative;
margin-right: 0 !important;
width:230px;
line-height:19px;
margin: -1px 0 0;
border-left: medium none;
}
#menu ul ul li a {
font-size: 12px;
padding: 8px 10px !important;
text-transform: uppercase;
border: medium none !important;
border-bottom: 1px solid #ECECEC !important;
}
#menu > ul > li > ul > li > a:hover {
color: #0097C4 !important;
}
#menu ul ul ul {
position: absolute; left: 100%; top:0;
width:230px;
}
#menu ul ul ul li a {
padding: 8px 10px;
}
#menu ul ul ul li a:hover {
color: #0097C4 !important;
}