Simple Tooltip Dropdown Menu CSS3

Simple Tooltip Dropdown Menu CSS3 - Efek tooltip selain untuk link dan gambar bisa juga kita terapkan dalam bentuk menu dropdown agar tampilan lebih kreatif dan cantik tentunya. Banyak cara untuk membuat efek tooltip mulai menggunakan gambar, CSS maupun efek Jquery UI, namun kali saya hanya akan memberikan contoh simplenya menggunakan efek hover pseudo element ( before: after: ) dengan CSS3.

Sebagai gambaranya bisa lihat demonya dibawah ini :

• DEMO

• VIEW CODE

Untuk konsep dasarnya sebagai berikut :

CSS

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
#menu{
    width: 100%;
    padding:10px 0 0 0;
    list-style: none;
    background: #34495e;border-left:30px solid #34495e;border-radius:3px
}

#menu li{
    float: left;
    padding:0 0 10px 0;
    position: relative;
}

#menu a{
    float: left;
    height: 25px;
    padding:0 12px 0 12px;
    color: #fff;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
}

#menu li:hover > a{background:#16a085;
    color: #fff;
}

*html #menu li a:hover{ /* IE6 */
    color: #fff;
}

#menu li:hover > ul{
    display: block;
}

/* Sub-menu */
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #2c3e50;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin:0;
    padding: 0;
    display: block;
}

#menu ul li:last-child{
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
    height: 10px;
    width: 150px;
}

#menu ul a:hover{
        background: #16a085;
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #2c3e50;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #2c3e50;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

HTML

<ul id="menu">
    <li>
        <a href="#"><i class="fa fa-cogs"></i> MENU 1</a>
        <ul>
            <li><a href='#'> <i class="fa fa-cogs"></i> Settings</a></li>
            <li><a href='#'> <i class="fa fa-envelope-o"></i> Contact Me</a></li>
            <li><a href='#'> <i class="fa fa-tag"></i> Tag</a></li>
            <li><a href='#'> <i class="fa fa-user"></i> About Me</a></li>
        </ul>
    </li>
<li>
<ul>
menu seterusnya.....
</ul>
</li>
</ul>

Anda cukup mengganti tanda # dengan url yang ingin anda masukkan, baca juga drop down menu metro ui awesome dan modern dropdown menu button css3 

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku