Simple Tooltip Menu Dropdown CSS3

Discussion in 'HTML & Website Design' started by Virlyz82, May 27, 2014.

  1. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    [​IMG]

    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

    DEMO
    VIEW CODE


    Komponen dasarnya adalah sebagai berikut :

    CSS

    Code:
    @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>
    SOURCE
     
  2. mayzura21

    mayzura21 Member

    Joined:
    Dec 15, 2013
    Messages:
    185
    Likes Received:
    6
    Trophy Points:
    18
    keren nih kalo yang beginian, btw itu kode source nya bikin sendiri apa edit ulang gan ? *flying*
     
  3. Denny Irwansyah

    Denny Irwansyah New Member

    Joined:
    May 23, 2014
    Messages:
    30
    Likes Received:
    0
    Trophy Points:
    6
  4. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    Source sya ambil dari blog saya sendiri...dan kode murni dari saya sendiri makasih...partisipasinya
     
  5. Suranto

    Suranto New Member

    Joined:
    May 28, 2014
    Messages:
    18
    Likes Received:
    1
    Trophy Points:
    3
    em.. thanks sharenya gan..
    jika pengin nambah ilmu atau belajar CSS buka aja CSS Trick
    hanya saja harus bisa english meskipun dikit" .. :)
     
  6. mayzura21

    mayzura21 Member

    Joined:
    Dec 15, 2013
    Messages:
    185
    Likes Received:
    6
    Trophy Points:
    18
    s
    sama sama gan :D
     
  7. ancu

    ancu New Member

    Joined:
    Sep 21, 2016
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    1
    Keren...
    Mksih Den, buat pemula sepertk saya.
     
Loading...

Share This Page