Advertisement

Home / Tutorial Blog / Membuat efek pure css3 lava lamp menu

Monday, June 2, 2014

Membuat efek pure css3 lava lamp menu

By Unknown
On
ads

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/AVvXsEgaHYuqAGVR1s2OTfvYyRmWQfZNREn2UFGz3LlPpTo9TUqzE72cPQaXcS6a9xgOBUtffot89iFe-thyg1ksUVJDlv5KR8rDxqbrGaYQxeohKNtNEMgV95Nm70UhmlvBV3Pg0bejobPnUjJ6/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/AVvXsEiV3_k2Ksb6vFmyNORgZTpB4LSiwPNmS7arOCxWBf8WIH9wr8FNt074ucwHKOszXer7Kd6mABQc5_4r8ncFenY2E91UNMBWn0UIxNEg32NWDLmJMq1RjjrY98_lreX_qC7QbrZ6YjGuK1MS/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/AVvXsEgy0nvKugf-epMNFsI0trPab-HCSdhrWPDlkAIEllauFb_ZueSxskDOX7bymN2HxylnWydCVKshfW4rAgtsBSyuM76CVBWqkfbg4KrJgAEQkfkpyJlDfhdipr67ZlhB96auG_MKzdkfcfR3/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

Membuat efek pure css3 lava lamp menu Rating: 4.5 Diposkan Oleh: Unknown
ads

Subscribe to: Post Comments (Atom)

Advertisement

 

Top