simple tooltip dropdown menu css3

3
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 : DEM O VIEW CODE Untuk konsep dasarnya sebagai berikut : CSS HOME CSS3 MENU UI Simple Tooltip Dropdown Menu CSS3

Upload: samsury-sites

Post on 13-Jun-2015

173 views

Category:

Internet


3 download

TRANSCRIPT

Page 1: 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 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

Page 2: 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

Page 3: 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 3/3

Sign out

Notify me

Enter your comment...

Comment as: Virlyz Nyzam (Google)

Publish

Preview

BY SAMSURY SITES