Script CSS 3 nya seperti ini:
<style>
.float li
{
float: left;
list-style: none;
}
.float li a
{
color:#696969;
text-decoration: none;
font-variant: small-caps;
background:#000;
border: 1px solid lightgrey;
padding: 10px 15px;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}
.float a:hover
{
text-decoration: none;
background:#808080;
color: #000;
}
</style>
Nah, untuk script HTML 5 nya seperti ini:
<ul class="float"> <li><a href="#">HOME</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">PHP</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT US</a></li> </ul>
Setelah kedua script di atas digabungkan, nanti akan seperti ini:
<!DOCTYPE html>
<head>
<title>Membuat Menu Horizontal Dengan Menggunakan CSS 3</title>
</head>
<style>
.float li
{
float: left;
list-style: none;
}
.float li a
{
color:#696969;
text-decoration: none;
font-variant: small-caps;
background:#000;
border: 1px solid lightgrey;
padding: 10px 15px;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}
.float a:hover
{
text-decoration: none;
background:#808080;
color: #000;
}
</style>
<body>
<ul class="float">
<li><a href="#">HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</body>
<html>
Adapun hasilnya akan seperti ini:
Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.
No comments:
Post a Comment