simple tooltip dropdown menu css3
TRANSCRIPT
5/28/14 Simple Tooltip Dropdown Menu CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/05/simple-tooltip-dropdown-menu-css3.html 1/3
SAMSURY SITES Tutorial Blog
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
HOME CSS3 MENU UI Simple Tooltip Dropdown Menu CSS3
5/28/14 Simple Tooltip Dropdown Menu CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/05/simple-tooltip-dropdown-menu-css3.html 2/3
@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{
}
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
Older Post
5/28/14 Simple Tooltip Dropdown Menu CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/05/simple-tooltip-dropdown-menu-css3.html 3/3
Sign out
Notify me
Enter your comment...
Comment as: Virlyz Nyzam (Google)
Publish
Preview
BY SAMSURY SITES