Bagaimana cara membuat menu navigasi melayang CSS3 di blog

Hari ini, saya ingin share dan menunjukkan ke anda tentang menu navigasi yang lain murni menggunakan CSS3, menu navigasi ini menerapkan beberapa efek animasi yang sangat bagus. Penulis pun tidak habis pikir kok bisa ya? submenu nya melayang. Hehehe..:D Tinggal menggulirkan atau menggerakan mouse/krusor anda ke elemen menu tersebut maka animasinya akan bekerja. Jika anda siap, mari kita mulai...

View Demo

KODE HTML

<ul id="nav">
    <li><a href="http://jalu-pangna.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">All about blog</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan triks blog</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Religi</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">Spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Science</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan">Wawasan</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">Wawasan umum</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_14.html">TOC/site map</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">Tukar link</a></li>
    <li><a href="#">Lain-lain</a></li>
    <li><a href="http://jalu-pangna.blogspot.com">Kembali</a></li>
</ul>

LANGKAH-LANGKAHNYA:

Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript atau anda bisa meletakannya di bawah tag <body> pada template

Pastekan kode di atas didalamnya

Simpan Gadget...

Ganti URL/Link, Menu dan Submenu dengan URL/Link, menu dan submenu anda

KODE CSS

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;

/* border radius */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

/* box shadow */
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;

/* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#nav li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#nav li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {
        -webkit-transform: scale(1);
    }
    30% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes animation1 {
    0% {
        -moz-transform: scale(1);
    }
    30% {
        -moz-transform: scale(1.3);
    }
    100% {
        -moz-transform: scale(1);
    }
}
#nav li > a:hover {
    /* css3 animation */
    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

-webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#nav li:hover > a {
    z-index: 4;
}
#nav li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#nav ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
@-moz-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
#nav li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

-webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

/*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#nav li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#nav li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#nav li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#nav li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#nav li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#nav li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#nav li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#nav li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}

LANGKAH SELANJUTNYA:

Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan dalam pencarian
Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag ]]></b:skin>
Simpan template...Selesai

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 07.56

7 Mei 2013

Bagaimana cara membuat menu navigasi melayang CSS3 di blog

Jalupangna

0 komentar:

Popular Posts

Blog Archive

Label

Recent Comment

Followers