Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template
» » Membuat efek pure css3 lava lamp menu

Membuat efek pure css3 lava lamp menu

Tutorial Blog
Monday 2 June 2014
Belum ada komentar
Hay sobat selamat pagi,... salam olahraga,.. ckcckckkk
Setelah kemarin saya belajar mengenai Efek Lava Lamp dari mas Andrey sekarang saya akan menerapkan nya disini sebelum nya saya ucapkan terima kasih babyak buat Mas Andrey.
Saya berpikir bahwa sobat telah melihat menu animasi dengan efek Lava Lamp (berdasarkan jQuery plugin). Hari ini saya ingin sobat untuk memberitahu bagaimana untuk mengulangi perilaku yang sama hanya dengan CSS3 (tanpa javascript). Saya harus menggunakan transisi CSS3 dalam menu ini untuk menghidupkan elemen tersebut.
Silahkan sobat lihat dulu DEMO nya disini !!! atau klik tombol di bawah ini...




Gimana setelah sobat lihat Live Demo nya,..?? apakah sobat minat dengan Efek Lava Lamp tersebut?? Jika sobat minat langsung ajah sobat ambil script dibawah ini kemudian letakkan sesuai di template sobat masing2

CSS

Berikut adalah script CSS menu Lava Lamp nya.

CSS Layout

*{
    margin:0;
    padding:0;
}
body {
    font:14px/1.3 Arial,sans-serif;
    background-color:#212121;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    color:#fff;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    height: 571px;
    margin: 30px auto;
    width: 957px;
}

CSS Menu

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9F8msbY2gcVxZQNT-u2ej_FsigOXLVs_jD09IdGBVIWzp3gUYvwIEk4SfwRsWOOYX9qo4rJb1MZm-tkFK7bO8eEpgnPQMTfVZv74d6vK8h4_PtLsJulXLFQZgUfUcm5rHv44zfDM2ByH/s1600/menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 957px;
}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    /*-moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;*/
}
#nav li {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKD0KZRVY6NYA-2aSD9FmXMx7x6Lw5jJWW2C1GMBjhpEEAsm6A6pGaB_PqeVWsp2CSwTKtricODc2P1xxOsCr2s6G4O-3UlKAkFIom7sqL1fkFMVt5cPh6M73zzbtfcl0-68e13dnXVieQ/s1600/menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
    color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#nav ul li {
    background: none;
    width: 100%;
}
#nav ul li a {
    float: none;
}
#nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9qLdrjqMQkEEAXO6Re7zRGLpbAC6g2W7NVu5k4Ygdke3oHfDNawbKEvDVS_-FnMKpgAuL0_hgIPEVZOxaCbsD7wWDWwfutbawyTZnoCpkuj0FIG-mnl_WupVkxZ-9wNb90N-tjW2FR4TQ/s1600/lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}

#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}

HTML

Berikut adalah kode html dari menu kami seperti biasa ini lagi tag UL-LI adalah menu navigasi berbasis.
Hal yang paling menarik akan gaya CSS tentu saja,...
       <div class="container">

            <ul id="nav">
                <li><a href="http://irvan-efendy.blogspot.com">Home</a></li>
                <li><a class="hsubs" href="#">Menu 1</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 2</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 3</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 3-1</a></li>
                        <li><a href="#">Submenu 3-2</a></li>
                        <li><a href="#">Submenu 3-3</a></li>
                        <li><a href="#">Submenu 3-4</a></li>
                        <li><a href="#">Submenu 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="#">Menu 6</a></li>
                <li><a href="http://irvan-efendy.blogspot.com">Back</a></li>
                <div id="lavalamp"></div>
            </ul>

        </div>

Semoga bermanfaat dan silahkan kreasikan lagi seindah mungkin menurut sobat masing2,..
-> Baca juga Cara Membuat efek pure css3 pada gambar
Terima kasih telah membaca artikel tentang Membuat efek pure css3 lava lamp menu di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template