Slideout Menu Dengan CSS3

Selamat pagi sobat blogger, Tutorial kali ini masih tentang CSS3 dan tutorialnya adalah tentang pembuatan "Slideout Menu Dengan CSS3" Menu slideout dengan gambar memudar (animasi dengan efek transisi).

Banyak beredar tampilan menu dengan berbagai efek serta transisi manakala kita browsing, semuanya terlihat begitu indah dan ane mencoba untuk menshare kepada sobat blogger salah satunya saja.

slide out menu, css3, menu slide out


Tutorialnya Sebagai Berikut:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Tataletak >>> Add Widget lalu kopas kode dibawah ini

UNTUK KODE NYA
<style type="text/css">

ul.nav {
    list-style:none;
    height:120px;
    margin:0;
    padding:0;
}

ul.nav table {
    border-collapse:collapse;
    width:0;
    height:0;
    margin:-1px 0 -5px -1px;
}

ul.nav > li {
    float:right;
    height:120px;
    width:40px;
    position:relative;
    overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}

* html ul.nav > li {
    width:auto;
}

ul.nav > li a.ie6 {
    float:left;
    height:120px;
    width:39px;
    position:relative;
    overflow:hidden;
}

ul.sub {
    list-style:none;
    height:120px;
    width:600px;
    background:url(http://4.bp.blogspot.com/-WGk-5ljNOsE/UVzkfyrfBEI/AAAAAAAABwM/fl3AW8Bg38U/s1600/panel.png) no-repeat right top;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
}

ul.sub li {
    float:left;
}

ul.sub li:first-child {
    margin-left:45px;
}

ul.sub li a {
    display:block;
    width:110px;
    height:120px;
    float:left;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:#000;
}

ul.sub li a b {
    font-weight:700;
    display:block;
    padding:15px 15px 5px;
}

ul.sub li a p {
    font-size:12px;
    display:block;
    margin:0;
    padding:0 10px;
}

ul.sub li a i {
    display:block;
    width:64px;
    height:64px;
    position:absolute;
    right:10px;
    bottom:10px;
    background:url(http://3.bp.blogspot.com/-KY13VCe6GBI/UVzkngnt-iI/AAAAAAAABwc/AiNY8CjZMyU/s1600/Copy+of+KT+logo.gif);
    opacity:0.1;
    filter:alpha(opacity = 10);
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}

ul.nav > li:hover {
    width:600px;
}

ul.nav > li a.ie6:hover {
    direction:ltr;
    width:600px;
}

ul.sub li a:hover i {
    opacity:1.0;
}

</style>

<ul class="nav">
        <li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
            <ul class="sub">
                <li><a href="http://joens-tutorial.blogspot.com"><b>Home</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://joens-tutorial.blogspot.com"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://joens-tutorial.blogspot.com"><b>Resources</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://joens-tutorial.blogspot.com"><b>About</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://joens-tutorial.blogspot.com"><b>Back</b><p>custom description here</p><i></i></a></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>

3. Klik Save

Note :
Silakan Ganti  http://joens-tutorial.blogspot.com dengan link sobat
Silakan Ganti Icon dibawah dengan icon sobat atau bisa juga dihapus dengan cara mengganti dengan kode "#" ( tanpa tanda kutif ).
http://3.bp.blogspot.com/-KY13VCe6GBI/UVzkngnt-iI/AAAAAAAABwc/AiNY8CjZMyU/s1600/Copy+of+KT+logo.gif
Demikian artikel tentang pembuatan Slideout Menu Dengan CSS3 semoga artikel/tutorial ini dapat membantu sobat blogger dalam mendesign blog/websitenya, terimakasih.

19 Responses to "Slideout Menu Dengan CSS3"

  1. Alhamdulillah dapat ilmu baru lagi disini...
    ini benar benar sangat berguna dan bermanfaat sekali sobat
    Terima kasih sudah berbagi

    ReplyDelete
    Replies
    1. terimaksih banyak mas supportnya dan terimakasih juga udah nyempatin berkunjung.

      Delete
  2. wah asli keren banget ini. thanks banget gan tutorialnya. saya coba terapkan dulu. salam kenal dan salam blogger

    ReplyDelete
    Replies
    1. terimakasih banyak mas atas support serta kunjungannya silakan gan, salam kenal kembali

      Delete
  3. wah kang alex emang jagonya nih soal ginian,,, selamat malam kang ngopi nih buat anget" abis kehujanan

    ReplyDelete
    Replies
    1. pastinya sob, hehhehheheh mantap

      Delete
    2. bisa aja nimas cahyo, maaf mas baru ngeblog lagi nih.

      Delete
  4. Wah cocok nih bwt di blog ane :D

    ReplyDelete
    Replies
    1. Silakan di ambil aja mas, heheh thank kunjungannya.

      Delete
  5. kunjungan dipagi yang mulai mendung kang alex,,,,di temenin secangkir kopi untuk jalan"

    ReplyDelete
    Replies
    1. terimakasih banyak mas kunjungannya. ngopi2,,,, ngopiiiii

      Delete
  6. mantap sob menunya .... lebih mantap kita tos kopi item plus goreng pisang hehe

    ReplyDelete
    Replies
    1. Tosss balik mas kopi item goreng pisang mantap..........

      Delete
  7. wah mantap mas, menu siang kali ini slide out menu dengan css3..
    okee nih tutorialnya, terimakasih mas

    ReplyDelete
    Replies
    1. Hhehheh, teriakasih banyak mas atas support serta kunjungannya.

      Delete
  8. Paling suka nie Bang kalau ketemu menu2 beginian yang pakek css, jadinya gak bikin lemot blog.hehe

    ReplyDelete
    Replies
    1. Sukur deh mas, emang bener CSS lebih enak dibanding JS hehhehe, thank atas kunjungannya.

      Delete
  9. wah keren mas (y)

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat