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.

VIEW A DEMO

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYp7cYNH4Pv1MwgPxlkKBmuMlSIaPAmKmfloDi4m7xFG6qAy3rMHgawv6xDRemxjG0kU2ZDLrzxx3rmZOI2fA4tysvftmYJRju_7h3zrO0heFphMxfpoqF9r9GEEQQmOC2T5c3wR1x6HFL/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTRnKUKo45fnVjn4GHM6oKlXdswqCXsxqTKNJUm6HLaELf3rsnBXOTWsQXrip5UHA2nk4DwMwnSr5HcX1Vbo2rCVSbKSg3pwB4WEZxwU7331twaFwP1x0hAA3wbuz5LBMDQ1CzAm25gWte/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 ).

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTRnKUKo45fnVjn4GHM6oKlXdswqCXsxqTKNJUm6HLaELf3rsnBXOTWsQXrip5UHA2nk4DwMwnSr5HcX1Vbo2rCVSbKSg3pwB4WEZxwU7331twaFwP1x0hAA3wbuz5LBMDQ1CzAm25gWte/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.

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post