Cara Mudah Membuat Menu CSS
Menu seperti itu
sering digunakan diblog sebagai menu navigasi supaya memudahkan pembaca untuk
menemukan artikel di suatu blog. Sekarang saya akan mencontohkannya. Anda boleh
menggunakan notepad, dreamweaver , atau yang lainnya.
Ketikan script dibawah ini :
<!doctype html>
<html>
<head>
<title>Mendesain Menu
CSS</title>
<style>
.float li
{
float: left;
list-style: none;
}
.float li a
{
color:#fff;
text-decoration: none;
font-variant: small-caps;
background:#000;
border: 1px solid black;
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: #FFF;
color: #000;
}
</style>
</head>
<body>
<ul class="float">
<li><a
href="#">Home</a></li>
<li><a
href="#">Services</a></li>
<li><a
href="#">Support</a></li>
<li><a
href="#">About</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</body>
</html>
Berikut hasilnya :
http://taufan-web.blogspot.com/
0 komentar:
Posting Komentar