CSS3 Fly Out Menu

Terinspirasi dari konsep Beautiful Slide Out Navigation dengan efek slidingnya yang sangat menarik, kali ini Saya akan membuat efek tersebut hanya dengan CSS3. Kabar baik bagi Anda yang tidak suka atau belum mengerti tentang JQuery. Instalasi menu ini sangat mudah dilakukan:

CSS3 Menu

Pertama-tama masuklah ke halaman editor HTML templatemu. Salin kode CSS ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:

ul#navigation {
  position:fixed;
  margin:0px;
  padding:0px;
  top:0px;
  right:10px;
  list-style:none;
  z-index:999999;
  width:735px;
  font:normal 11px Arial,Sans-Serif;
  -webkit-animation:2s fxhompinav ease-in-out;
  -moz-animation:2s fxhompinav ease-in-out;
  -ms-animation:2s fxhompinav ease-in-out;
  animation:2s fxhompinav ease-in-out;
}

ul#navigation li {
  width:103px;
  display:inline;
  float:left;
  margin:0 0 0 2px;
}

ul#navigation li a {
  display:block;
  float:left;
  margin-top:-78px;
  width:100px;
  height:22px;
  background-color:#111;
  background-repeat:no-repeat;
  background-position:50% 150px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-border-radius:0px 0px 10px 10px;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:10px;
  -khtml-border-bottom-right-radius:10px;
  -khtml-border-bottom-left-radius:10px;
  border-radius:0px 0px 10px 10px;
  color:#ccc;
  text-decoration:none;
  text-align:center;
  text-shadow:0 1px 1px #000;
  padding-top:85px;
  -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}

ul#navigation li a:hover {
  margin-top:-3px;
  background-position:50% 10px;
  color:#fff;
  position:relative;
}

ul#navigation li a:hover:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  top:100%;
  left:45%;
  margin-top:-10px;
  border-width:5px;
  border-style:solid;
  border-color:transparent transparent #e6e6e6 transparent;
}

ul#navigation li:nth-child(1) a {
  background-image:url(http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
  background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
  background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png);
}
ul#navigation li:nth-child(4) a {
  background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png);
}
ul#navigation li:nth-child(5) a {
  background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png);
}
ul#navigation li:nth-child(6) a {
  background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png);
}
ul#navigation li:nth-child(7) a {
  background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.png);
}

@-webkit-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-moz-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-ms-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

Berikutnya temukan kode ini:

</body>

Salin kode di bawah ini, kemudian letakkan tepat di atasnya:

<ul id='navigation'>
     <li><a href='#'>Home</a></li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Search</a></li>
     <li><a href='#'>Photos</a></li>
     <li><a href='#'>Rss Feed</a></li>
     <li><a href='#'>Podcasts</a></li>
     <li><a href='#'>Contact</a></li>
</ul>

Klik Simpan Template. Ganti kode # dengan alamat URL. Jika perlu ubah juga nama-nama menu sesuai dengan keinginan.

15 Komentar

  • Unknown

    Keren penggunaan CSS sama keyframes nya..., kpn saya bisa sekreative ini......, :)

  • Pulung

    menu kayak gini jenis kelaminnya cowok kali ya mas? hehe maco banget :)

  • Taufik Nurrohman

    @dadang herdiana: Saya rasa semuanya sama saja kok.
    @pulung udara manggiling: hehe.. iya kali :D

  • Unknown

    menunya keren, mantap ijin pake di blog, sekalian lapor scriptnya saya republish diblog saya

  • Taufik Nurrohman

    @Mas Dalang OK OK

  • Eva Altayany

    mas, gimana kalo ganti posisinya di sebelah kiri ? mohon bantuannya mas :)

  • Taufik Nurrohman

    @Eva Altayany Ganti kode ini:

    ul#navigation {
    position:fixed;
    margin:0px;
    padding:0px;
    top:0px;
    right:10px;
    list-style:none;
    z-index:999999;
    width:735px;
    font:normal 11px Arial,Sans-Serif;
    -webkit-animation:2s fxhompinav ease-in-out;
    -moz-animation:2s fxhompinav ease-in-out;
    -ms-animation:2s fxhompinav ease-in-out;
    animation:2s fxhompinav ease-in-out;
    }

    dengan kode ini:

    ul#navigation {
    position:fixed;
    margin:0px;
    padding:0px;
    top:0px;
    left:10px;
    list-style:none;
    z-index:999999;
    width:735px;
    font:normal 11px Arial,Sans-Serif;
    -webkit-animation:2s fxhompinav ease-in-out;
    -moz-animation:2s fxhompinav ease-in-out;
    -ms-animation:2s fxhompinav ease-in-out;
    animation:2s fxhompinav ease-in-out;
    }
    • M. Hasby AS

      menunya kan ada yg saya buang karena tidak dibutuhkan, cara supaya pas di sisi kiri bagaimana, karena terlihat seperti berada di tengah mas.
      Terima kasih sebelumnya

  • Abimanyu Damarjati

    Mas, klo boleh tanya nama template blog ini apa ya?

  • Ən Yeni Mahnı Sözləri 2

    Mas, punya saya kok, munculnya dibawah kiri ???
    mohon perbaikannya mas...

  • Taufik Nurrohman

    @sabda awal Kalau kerangkanya diletakkan di atas </body> seharusnya tidak masalah.

  • Ən Yeni Mahnı Sözləri 2

    mas, menu yang di atas udah saya ubah n kembang kan, supaya cuma muncul dihalaman depan aja gimana caranya?

    menunya ikut muncul di postingan, saya pake blogezine... mohon bantuannya mas, terimakasih

  • Taufik Nurrohman

    @sabda awal Taruh kerangkanya di dalam tag kondisional halaman muka:

    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <ul id='navigation'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Search</a></li>
    <li><a href='#'>Photos</a></li>
    <li><a href='#'>Rss Feed</a></li>
    <li><a href='#'>Podcasts</a></li>
    <li><a href='#'>Contact</a></li>
    </ul>
    </b:if>
  • Surga Kenari

    Mas Taufik, kalo menunya di sebelah kanan dan vertikal, css nya gmn yah.. hehe?

  • Sikkahoder

    SELAMAT SIANG.. amu tanya mas, kalau link untuk search blog yang mana ya???? kan dimenu yang ditawarkan ada tulisan seach blog....

Komentar telah ditutup.