November 26, 2013

Konsep Dropdown Menu Berbeda Agar Blog Lebih Cantik



Selamat pagi sob...

Setelah cukup lama rehat dari dunia blogging, kali ini saya akan coba share mengenai konsep dropdown menu yang unik dan berbeda sehingga dapat membuat tampilan blog juga menjadi lebih cantik.

Seperti biasa, dropdown menu ini saya buat dengan komponen warna yang girly, namun bisa diubah sesuai dengan keinginan, yaitu dengan melihat beberapa kode html warna yang sudah saya berikan sebelumnya.

Dropdown menu ini sendiri menggunakan CSS dan kode HTML agar dapat diletakkan pada blog.

.aii:before,
.aii:after {
    content: " ";
    display: table;
}

.aii:after {
    clear: both;
}

.aii {
    *zoom: 1;
}
/* Main level */
.menu {            
    margin: 50px auto;
    width: 800px;
    width: fit-content;    
}

.menu > li {
    background: #FE80DF;
    float: left;
    position: relative;
    transform: skewX(25deg);
}

.menu a {
    display: block;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    font-family: Arial;
    font-size: 13px;
}        

.menu li:hover {
    background: #FE80DF;
}        

.menu > li > a {
    transform: skewX(-25deg);
    padding: 1em 2em;
}

/* Dropdown level*/
.submenu {
    position: absolute;
    width: 200px;
    left: 50%; margin-left: -100px;
    transform: skewX(-25deg);
    transform-origin: left top;
}

.submenu li {
    background-color: #FEBFEF;
    position: relative;
    overflow: hidden;        
}                        

.submenu > li > a {
    padding: 1em 2em;            
}

.submenu > li::after {
    content: '';
    position: absolute;
    top: -125%;
    height: 100%;
    width: 100%;            
    box-shadow: 0 0 50px rgba(0, 0, 0, .9);            
}        

/* Odd stuff */
.submenu > li:nth-child(odd){
    transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
    transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
    right: -50%;
    transform: skewX(-25deg) rotate(3deg);
}                

/* Even stuff */
.submenu > li:nth-child(even){
    transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
    transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
    left: -50%;
    transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
    opacity: 0;
    visibility: hidden;            
}

.submenu li {
    transition: .2s ease-out transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
    opacity: 1;
    visibility: visible;
}        

.menu > li:hover .submenu li:nth-child(even){
    transform: skewX(25deg) translateX(15px);            
}

.menu > li:hover .submenu li:nth-child(odd){
    transform: skewX(-25deg) translateX(-15px);            
}



Lalu, terakhir tambahkan kode HTML nya :

<ul class="menu aii">
    <li><a href="">Menu 1</a></li>
    <li>
        <a href="">Menu 2</a>
        <ul class="submenu">
            <li><a href="">Submenu 1</a></li>
            <li><a href="">Submenu 2</a></li>
            <li><a href="">Submenu 3</a></li>
        </ul>            
    </li>
    <li>
        <a href="">Menu 3</a>
        <ul class="submenu">
            <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>
        </ul>            
    </li>
    <li><a href="">Menu 4</a></li>
    <li><a href="">Menu 5</a></li>
</ul>


DEMO :



Bagaimana, menarik bukan?
Silahkan dicoba dan jangan lupa tinggalkan komentar di kolom komentar...

Terima kasih....

15 comments

  1. lama tak jumpa nyasar dimana aja mbak.. hehe saya juga udah jarang ngeblog kok.
    btw sipp nih mbak menunya, coba ahh

    ReplyDelete
    Replies
    1. hahaha... ga nyasar kemana-mana sob lg sibuk jd jarang ngeblog... spoiled

      Delete
  2. trims kawan sudah berbagi, cuma Demo dengan Image contohnya kenapa nggak sama hasilnya kenapa ya dad

    ReplyDelete
    Replies
    1. sama-sama gan...
      ga sama gimana gan?itu gambar saya ambil nya juga dari demo yg saya buat... pleased

      Delete
  3. wah-wah, keren ini mbsk menu dropdownnya...

    ReplyDelete
  4. serba pink gan...hehe cocok buat blog cewek

    ReplyDelete
    Replies
    1. iya gan, tp bisa di edit2 kok warna nya... happy

      Delete
  5. pa kabar mb?
    lama g ketemu,,,,,,

    nyimak dlu mb,,,,

    ReplyDelete
    Replies
    1. Alhamdulillah baik mba...
      iya, silahkan disimak mba... pleased

      Delete
  6. Bookmark dulu mbak, nanti tak praktekan ya. Makasih ^^

    ReplyDelete
  7. wow kereen banget mbak....
    kunjungan balik ya www.bacawebster.com

    ReplyDelete
  8. Tutor yg saya cari2!!

    ReplyDelete