Membuat Animasi Multi Level Drop Down menu CSS3

Membuat Animasi Multi Level Drop Down menu CSS3

Membuat Animasi Multi Level Drop Down menu CSS3. Dalam perkembangan web design yang begitu cepat membuat para developer terus bekerja keras... 15.14.00

Membuat Animasi Multi Level Drop Down menu CSS3. Dalam perkembangan web design yang begitu cepat membuat para developer terus bekerja keras untuk menghasilkan tampilan yang lebih menarik. HTML5 dan CSS3 telah benar-benar merevolusi desain. Sekarang desainer dan pengembang web mampu membuat website lebih fungsional dan menarik secara visual karena HTML5 dan CSS3 menawarkan banyak fitur dan beberapa teknik yang Anda dapat membuat website yang menarik dan kreatif. Ini hal penting karena membuat menu navigasi Super benar-benar dapat meningkatkan website Anda. Navigasi yang didukung oleh hampir semua web browser utama dan akan fungsional pada browser diperbarui. Dalam menu ini Anda dapat melihat sedikit 3d efek ketika mouse di atas pada Kategori.

1. Masuk ke Blogger Dashboard >> Template >> Edit HTML
2. dan Carilah kode berikut :  ]]></b:skin>
3. Paste kode berikut tepat di atas sebelum ]]></b:skin>:

#css3_menu {
        width: 960px;
        margin: 0px auto;
        border: 1px solid #333;
        border-top:none!important;
        background-color: #333;
        -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }
   
    #css3_menu, #css3_menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
   
    #css3_menu:before,
    #css3_menu:after {
        content: "";
        display: table;
    }
   
    #css3_menu:after {
        clear: both;
    }
     
    #css3_menu li {
        float: left;
        border-right: 1px solid #111;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;
        position: relative;
    }
   
    #css3_menu a {
        float: left;
        padding: 15px 30px;
        color: #979797;
        letter-spacing: 4;
        text-transform:inherit;
        font-family: Verdana, Helvetica;
        font-size: 14px;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
    }
   
    #css3_menu li a:hover {
        background: #333;
    }
   
    #css3_menu li:hover > a {
        color: #fafafa;
    }
   
    *html #css3_menu li a:hover { /* IE6 only */
        color: #fafafa;
    }
   
    #css3_menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 47px;
        left: 0;
        z-index: 1;   
        background: #333;
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);   
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; 
    }
    #css3_menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }
   
    #css3_menu ul ul {
        top: 0;
        left: 174px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
        -moz-box-shadow: -1px 0 0 rgba(210,210,210,.2);
        -webkit-box-shadow: -1px 0 0 rgba(210,210,210,.2);
        box-shadow: -1px 0 0 rgba(210,210,210,.2);       
    }
   
    #css3_menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    }
    
     #css3_menu ul a {   
        padding: 12px;
        width: 150px;
        color: #979797;
        _height: 12px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
   
    #css3_menu ul a:hover {
        background-color:#3d3d3d;
        color: #fff;
     }

4. Klik tombol simpan dan Anda selesai langkah pertama.

Menambahkan widget ke blog

1. Masuk ke Layout> Add A Gadget dan pilih HTML / JavaScript gadget.
2. Copy link HTML dan paste di dalam kotak konten.

<ul id="css3_menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blogger</a>
        <ul>
        <li><a href="#">Widgets</a></li>
        <li><a href="#">Plugin</a>
        <ul>
        <li> <a href="#">Facebook</a></li>
        <li> <a href="#">Twitter</a></li>
        <li> <a href="#">Pinterest</a></li>
        <li> <a href="#">Google Plus</a></li>
        <li> <a href="#">Adsense</a></li>
        <li> <a href="#">Custom</a>
        <ul>
        <li> <a href="#">Hello Bar</a></li>
        <li> <a href="#">Earning Boster</a></li>
        <li> <a href="#">Clock</a></li>
        </ul>
        </li>
        </ul>
        </li>
        <li><a href="#">Tips Tricks</a></li>
        <li><a href="#">Blogger News</a></li>
        <li><a href="#">Blogger Help</a></li>
        </ul>   
        </li>
        <li><a href="#">Template</a>
        <ul>
        <li><a href="#">Blogger</a>
        <ul>
        <li><a href="#">By Column</a>
        <ul>
        <li><a href="#">1 Column</a></li>
        <li><a href="#">2 Column</a></li>
        <li><a href="#">3 Column</a></li>
        </ul>
        </li>
        <li><a href="#">By Color</a>
        <ul>
        <li><a href="#">Red</a></li>
        <li><a href="#">Blue</a></li>
        <li><a href="#">Orange</a></li>
        </ul>
        </li>
        <li><a href="#">By Width</a></li>
        </ul>
        </li>
       
        <li><a href="#">WordPress</a></li>
        </ul>
        </li>
        <li><a href="#">Faqs</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

3. Klik Simpan.
4. Drag ke posisi gadget di bawah header. Lalu klik simpan dan melihat blog Anda.

Mengganti nama dan menambahkan link seperti yang anda lihat, dropdown menu HTML terutama terdiri dari daftar unordered (ul) dan daftar item (li).

<li> <a href="#"> Home </ a> </ li>

Untuk mengubah nama Home sesuai dengan menu yang anda mau. Adapun link, hanya mengganti # dengan Alamat yang dimaksudkan URL.

[source]