Menu Horizontal Dengan CSS3 dan HTML5
 |
| 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:
Baca Juga
1. WOW! Kata Kunci Ini Akan Membuat Google Menjadi Menakjubkan!
2. WOW! PC dan Laptop Anda Bisa Bicara
3. Memadukan Tabel dengan CSS
4. Hal yang Harus dilakukan Saat Sandal Jepit Putus
5. Ternyata START Bisa Membuat Komputer HANG
6. Manfaat Luar Biasa dari Berjalan Kaki
2. WOW! PC dan Laptop Anda Bisa Bicara
3. Memadukan Tabel dengan CSS
4. Hal yang Harus dilakukan Saat Sandal Jepit Putus
5. Ternyata START Bisa Membuat Komputer HANG
6. Manfaat Luar Biasa dari Berjalan Kaki
16 komentar
komentardemonya mana ?
ReplyItu dia mastah, caranya gmna?
Replymantap gan untuk menu horisontalnya, mohon pencerahannya gimana caranya membuat postingan untuk menu yang telah dibuat, maklum masih newbie....
ReplyMaksudnya gmana gan? pas klik menu langsung ke postingan gitu?
ReplyMantap nih tipsnya,,, makasih ya :)
Replyklo boleh ane pake gaannn buat menu web ane,, :D
Replyterimakasih :D
sma-sama gan :D
Replykalau mau ganti fontnya gimana ?
ReplyTambahin font-family:namafont; di bawah font-variant
Replymas, bagaimana cara menggunakannya bisa kita menggunakan css eksternal?
ReplyBisa mas, tag style nya ganti sama tag link, bisa mas search
Replyoke gan mantap ini makasih
Replymaaf bolehh gak saya minta tolong buat , jelasin membuat menu horizontal gimna . tolong bless secepatnya yya .. mkshh .
Replymas kalo di tambah dropdown harus pke jquery?
ReplyTerima kasih infonya
Replynice min
Replypower supply hp