Simple tooltip dropdown menu css3

Simple tooltip dropdown menu css3
Simple tooltip dropdown menu css3
Simple tooltip dropdown menu css3
download Simple tooltip dropdown menu css3

of 3

  • date post

    13-Jun-2015
  • Category

    Internet

  • view

    160
  • download

    3

Embed Size (px)

Transcript of Simple tooltip dropdown menu css3

  • 1. 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

2. 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

  • MENU 1
    • Settings
    • Contact Me
    • Tag
    • About Me
    • menu seterusnya.....

Anda cukup mengganti tanda # dengan url yang ingin anda masukkan, baca juga drop down menu metro ui awesome dan modern dropdown menu button css3 OlderPost 3. 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