Cara Mudah Membuat Menu Horizontal Keren dengan CSS

ditulis Oleh : elqomedia.pw | Hari: Saturday, February 28, 2015 | Kategori :

Menu Horizontal Dengan CSS3 dan HTML5

Cara Mudah Membuat Menu Horizontal Keren dengan CSS
ElqoMediaCreative, 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:

<html>
<head>
<title>Belajar UL Horizontal</title>
<style>

</style>
</head>
<body>
<ul class="float">
<li><a href="https://www.blogger.com/blogger.g?blogID=4737489085422276676#">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4737489085422276676#">About</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4737489085422276676#">Pemrograman</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4737489085422276676#">Hiburan</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4737489085422276676#">Health</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4737489085422276676#">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;
}
4. Simpan file dengan format .html dan save as type: All Files. 

 Hasil nya bisa dilihat di bagian atas menu website ini.


src : Taufan Web
Judul Cara Mudah Membuat Menu Horizontal Keren dengan CSS
Deskripsi Menu Horizontal Dengan CSS3 dan HTML5 ElqoMediaCreative,  Menu seperti ini sering digunakan di Blog sebagai menu navigasi. Tujuannya unt...
Author
Author Rating
4/ 5 Suara


⬆
Top