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 Virlyz82, May 27, 2014 #1 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 ? mayzura21, May 28, 2014 #2 Denny Irwansyah New Member Joined: May 23, 2014 Messages: 30 Likes Received: 0 Trophy Points: 6 ok thanks gan tambah ilmu Denny Irwansyah, May 28, 2014 #3 Virlyz82 Member Joined: Jan 23, 2014 Messages: 67 Likes Received: 2 Trophy Points: 8 Google+: Author Source sya ambil dari blog saya sendiri...dan kode murni dari saya sendiri makasih...partisipasinya Virlyz82, May 28, 2014 #4 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" .. Suranto, May 29, 2014 #5 mayzura21 Member Joined: Dec 15, 2013 Messages: 185 Likes Received: 6 Trophy Points: 18 s sama sama gan mayzura21, May 30, 2014 #6 ancu New Member Joined: Sep 21, 2016 Messages: 1 Likes Received: 0 Trophy Points: 1 Keren... Mksih Den, buat pemula sepertk saya. ancu, Sep 24, 2016 #7 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - Simple Tooltip Menu Simple Flat UI Menu Modal Dialog Virlyz82, Jun 22, 2014, in forum: HTML & Website Design Replies: 2 Views: 1,279 indra.w.m Jun 24, 2014 Simple Flat UI Subscribe Email Virlyz82, Jun 12, 2014, in forum: HTML & Website Design Replies: 2 Views: 1,211 Abid Rakhmansyah Jun 13, 2014 Simple Menu Efek Flip CSS3 Virlyz82, Jun 6, 2014, in forum: HTML & Website Design Replies: 1 Views: 1,034 reyichii-v3 Jul 6, 2014 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
em.. thanks sharenya gan.. jika pengin nambah ilmu atau belajar CSS buka aja CSS Trick hanya saja harus bisa english meskipun dikit" ..