 |
| Menu Horizontal |
Menu seperti ini sering digunakan di Blog sebagai menu
navigasi. Tujuannya untuk memudahkan pembaca untuk menemukan artikel
di suatu Blog. Mungkin Anda ingin mengetahui cara membuat menu horizontal seperti itu. Berikut caranya:
1. Buka Notepad.
2. Paste script HTML di bawah ini:
<!doctype html>
<html>
<head>
<title>Belajar UL Horizontal</title>
<style>
</style>
</head>
<body>
<ul class="float">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href="#">Hiburan</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Daftar Isi</a></li>
</ul>
</body>
</html>
3. Taruh script CSS di bawah ini di dalam tag 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;
}
{
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;
}
4. Simpan file dengan format .html dan save as type: All Files.
Hasilnya:
- Home
- About
- Pemrograman
- Hiburan
- Health
- Daftar Isi
Postingan
0 Comments
Bagaimana Pendapat Anda ?