Membuat Sliding Icons Menu | Buku Catatan si Ugi

Home › Blogs Tutorial › CSS › Menu Drop-down › Tab Menu › Widgets › Membuat Sliding Icons Menu

Ini adalah sebuah Icon Menu sederhana dengan efek slide, dapat menampilkan Text, sebagai title Icon aktif pada saat hover.


DEMO - Sliding Icons Menu
Letakan kursor pada salah satu Icon...




Kode Lengkap Untuk Membuat Sliding Icons Menu: 

<html>
<head>

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/css3-icon-slide.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.iconMenu {width:600px; background:#700; height:69px; overflow:hidden; border:5px solid #700; position:relative; margin-left:10px;
-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.iconSlide {padding:0; margin:0; list-style:none; width:1000px;}
.iconSlide li {float:left;}
.iconSlide li a {display:block; height:69px; width:140px; overflow:hidden; float:left; font:13px/13px arial,sans-serif; text-decoration:none; color:#fff; margin-right:-75px; background:#700; position:relative; z-index;100;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
}
.iconSlide li a img {display:block; float:left; border:0; padding:5px;}
.iconSlide li a b {display:block; padding-top:22px; position:relative; right:-70px; color:#fff; opacity:0.3;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
}

.iconSlide li a:hover {margin-right:0;}
.iconSlide li a:hover b {right:0; opacity:1;}
.iconSlide li a.blank {cursor:text;}

</style>


</head>
<body>

<div class="iconMenu">
<ul class="iconSlide">
<li><a class="p1" href="#url"><img src=""austerity-icons/com.apple.mobilemail.png" alt="" /><b>Mail</b></a></li>
<li><a class="p2" href="#url"><img src="austerity-icons/com.apple.MobileAddressBook.png" alt="" /><b>Address Book</b></a></li>
<li><a class="p3" href="#url"><img src="austerity-icons/com.apple.mobilecal.png" alt="" /><b>Calendar</b></a></li>
<li><a class="p4" href="#url"><img src="austerity-icons/com.apple.mobilenotes.png" alt="" /><b>Notes</b></a></li>
<li><a class="p5" href="#url"><img src="austerity-icons/com.apple.mobilesafari.png" alt="" /><b>Safari Browser</b></a></li>
<li><a class="p6" href="#url"><img src="austerity-icons/com.apple.MobileStore.png" alt="" /><b>Store</b></a></li>
<li><a class="p7" href="#url"><img src="austerity-icons/com.apple.mobiletimer.png" alt="" /><b>Timer</b></a></li>
<li><a class="p8" href="#url"><img src="austerity-icons/com.apple.Preferences.png" alt="" /><b>Settings</b></a></li>
<li><a class="blank" href="#url"></a></li>
</ul>
</div>


</body>
</html>



More Detail:

  • Tambahkan kode CSS dalam tag <head> template anda dan kode HTML dalam tag <body>, Lihat contoh pemasangannya dalam konten Spoiler diatas.
  • Silahkan gunakan Text dan Gambar Icon milik anda sendiri yang akan di gunakan untuk membuat Sliding Icons Menu, menggantikan Link dan text yang sudah diberi warna kuning dan merah seperti contoh.


sumber: cssplay

0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan