Langsung ke konten utama

CSS"Menu"Icon Hovert Efect

CSS "Menu" Icon Hovert Efect - Melanjutkan postingan sebelumnya tentang membuat menu Blogger CSS3 Sonar Menu untuk blog dan kali ini kesempatan saya untuk melanjutkan tutorial dengan share sebuah menu yang apabila tersentuh mouse memberikan efect slide up simbol/icon didalamnya. Biar brada tidak penasaran silahkan lihat demonya dibawah ini. 

Kustomisasi

  • Masuk pada Edit HTML
  • Cari Kode ]]></b:skin>
  • Masukan kode dibawah tepat diatas kode ]]></b:skin>
/* The CSS Code here*/
#btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #cc6600;}
#btrix-nav li:nth-child(3) a {background: #00cccc;}
#btrix-nav li:nth-child(4) a {background: #00cc66;}
#btrix-nav li:nth-child(5) a {background: #00cc66;}
border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
Simpan , dan sekarang masukan kode HTML dibawah ini , caranya !
  • Add Gadget/HTML Javascript 
  • Masukan kode dibawah ini  
  • Save 
<div id="btrix-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/64/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname">About</span> <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/64/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Author</span> <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/64/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/64/Arrows-Up-circular-icon.png" /> </a> </li> </div>
Catatan :
"#" Ganti dengan link brada

Redesaign : Actionblog//Reshare:Btrix.
Label:

Komentar

  1. GggRabu, Agustus 28, 2013

    keren gan kapan-kapan ane coba...

    btw karya sendiri yah sob????

    BalasHapus
    Balasan
    1. Sopala MultapaKamis, Agustus 29, 2013

      lumayan .. cuma redesign z
      kodenya dapet dari yg lain ...

      Hapus
  2. abitalitaRabu, Agustus 28, 2013

    keren ni mas,,izin simpen dulu ya.. :)

    BalasHapus
  3. AnonimKamis, Agustus 29, 2013

    menu hover memang keren sob, nice post!

    BalasHapus
  4. AnonimKamis, Agustus 29, 2013

    kemarin sonar sekarang hover. ^_^

    BalasHapus
  5. aaaKamis, Agustus 29, 2013

    Lagi malas utak-atik script. ^_^

    hehe..

    BalasHapus
  6. abang ichalKamis, Agustus 29, 2013

    menuu...lagi hihi

    BalasHapus
  7. abang ichalKamis, Agustus 29, 2013

    menuu... lagi hihihi

    BalasHapus
  8. Staff AdministratorJumat, Agustus 30, 2013

    Banyak juga varian menu nya ya kang..
    Kalo ke senggol mouse...bereaksi...hehe :)

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, Agustus 30, 2013

      biar bisa milih mas bud ...
      ya itulah resiko ke senggol hehe

      Hapus
  9. Kang IsmetSabtu, Agustus 31, 2013

    Nuju ngedit sugan? asa aneh tadi tampilana :)

    BalasHapus
    Balasan
    1. Sopala MultapaSabtu, Agustus 31, 2013

      muhun kang .. nuju masang tooltip dina related post na .. hehe

      Hapus
  10. AnonimSelasa, September 03, 2013

    Salam Kunjungan Pertamax,. kanggo pun dulur urang Cianjur
    Sobat Kang @RULY JN,. Sae..bagus nih sobat artikelna idzin
    simak skaligus mencoba di blog saya tentang Menu hovert na

    Terima kasih nya Kang RULY,..Salam sukses sobat
    pami aya waktos linggih ka rorompok abi di karrysta
    http://karristaent.blogspot.com/

    Punten nyimpen link hatur nuhun

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya