Simple JQuery Flickr Style Tooltip Menu

January 26th, 2011 by aditia rahman / 8 Comments  

     

In today post I try to create the flickr style tooltip drop down menu, I mean the drop down menu when you see in the detail image page, the challenge creating this feature is the CSS, that contains gradient and manipulating box so that can look like a triangle in the tooltip menu after the main menu clicked.

jquery flickr drop down menu

I’m not creating exactly the same as flickr have, but just to exploring how to creating this cool flickr tooltip menu.

View Demo | Download Source
The HTML Code

There are three main menu in this example, this three will be displayed after the page loaded, and the another three hidden menu inside a box, displayed after the second main menu clicked.

<div id="box">
    <a href="#" class="bt btleft"><span>&#9734;</span> Favorite</a>
    <a href="#" class="bt btmiddle">Actions <span>&#9660;</span></a>
    <a href="#" class="bt btright">Share this <span>&#9660;</span></a>
</div>
<div id="menu">
    <div id="triangle"></div>
    <div id="tooltip_menu">
        <a href="#" class="menu_top">
            <img src="img/1.png"/>
            View all sizes
        </a>
        <a href="#">
            <img src="img/2.png"/>
            View slideshow
        </a>
        <a href="#" class="menu_bottom">
            <img src="img/3.png"/>
            View Exif info
        </a>
    </div>
</div>
The JQuery Code

The JQuery code is very simple just show and hide the hidden menu and change the class of the button that already clicked

$(function() {
    $(".btmiddle").click(function() {
        if ($(".btmiddle").hasClass("bt")) {
            $(".btmiddle").removeClass("bt");
            $(".btmiddle").addClass("clicked");
            $("#menu").show();
        } else {
            $(".btmiddle").removeClass("clicked");
            $(".btmiddle").addClass("bt");
            $("#menu").hide();
        }
    });
});
The CSS Code

I try to separate the CSS code that I feel really important in this example, and on the bottom is the full code section

Creating the gradient

Firefox, Chrome and Safari really easy to creating gradient effect, currently opera cannot support this gradient effect, and for IE you need to declare the height of the element, otherwise it won’t work.

background: -moz-linear-gradient(top,  #fff,  #f3f3f3);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));

height: 20px;
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3)";

Tricking the triangle visiblity

Yes, yes, yes basically this is not the triangle, these are two div with z-index manipulation, I’m just using CSS rotate feature to make look like a triangle, and like always this not working on the IE (just wait for the stable IE 9)

jquery flickr menu triangle

But you can see on the image below, the disadvantage of using this is trick

jquery flickr menu thumb

#triangle {
    border: 1px solid #d9d9d9;
    border-width: 2px 0 0 2px;
    width:10px;
    height:10px;
    /* for firefox, safari, chrome, etc. */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform:rotate(45deg);
    z-index: 1;
    position: relative;
    bottom: -4px;
    margin-left: 25px;
    background: #fff;
}
#tooltip_menu {
    background: #fff;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    width: 220px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
    box-shadow: 0px 0px 3px rgba(0,0,0,.5);
    padding: 2px;
}

The Full CSS Code

* {
    font-family: Arial, "Free Sans";
}
#box {
    margin-top: 20px;
}
.bt, .clicked {
    height: 20px;
    color: #666;
    font-size: 13px;
    padding: 4px 10px;
    text-decoration: none;
    background: #f9f9f9;
}
#box .bt {
    background: -moz-linear-gradient(top,  #fff,  #f3f3f3);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3)";
}
#box .bt:hover {
    background: #f3f3f3;
    background: -moz-linear-gradient(top,  #fff,  #e9e9e9);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e9e9e9);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e9e9e9)";
}
#box .bt:active, .clicked {
    background: #e9e9e9;
    background: -moz-linear-gradient(top,  #e9e9e9,  #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#fff));

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#ffffff);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#ffffff)";
}
.btleft {
    border: 1px solid #e3e3e3;
    -webkit-border-radius: .5em 0 0 .5em;
    -moz-border-radius: .5em 0 0 .5em;
    border-radius: .5em 0 0 .5em;
}
.btleft span {
    font-size: 15px;
}
.btmiddle {
    border: 1px solid #e3e3e3;
    border-width: 1px 0;
    margin: 0 -4px;
}
.btright {
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 0 .5em .5em 0;
    -moz-border-radius: 0 .5em .5em 0;
    border-radius: 0 .5em .5em 0;
}
.btmiddle span, .btright span {
    font-size: 9px;
    position: relative;
    top: -2px;
}
#menu {
    margin: 10px 0 0 100px;
    display: none;
}
#triangle {
    border: 1px solid #d9d9d9;
    border-width: 2px 0 0 2px;
    width:10px;
    height:10px;
    /* for firefox, safari, chrome, etc. */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform:rotate(45deg);
    z-index: 1;
    position: relative;
    bottom: -4px;
    margin-left: 25px;
    background: #fff;
}
#tooltip_menu {
    background: #fff;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    width: 220px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
    box-shadow: 0px 0px 3px rgba(0,0,0,.5);
    padding: 2px;
}
#tooltip_menu a {
    z-index: 2;
    padding: 0 0 7px 2px;
    display: block;
    text-decoration: none;
    color: #0066cc;
    font-size: 13px;
}
#tooltip_menu a:hover {
    background: #0066cc;
    color: #fff;
}
#tooltip_menu a img {
    position: relative;
    top: 5px;
    border: 0;
}
.menu_top {
    -webkit-border-radius: .5em .5em 0 0;
    -moz-border-radius: .5em .5em 0 0;
    border-radius: .5em .5em 0 0;
}
.menu_bottom {
    -webkit-border-radius: 0 0 .5em .5em;
    -moz-border-radius: 0 0 .5em .5em;
    border-radius: 0 0 .5em .5em;
}
View Demo | Download Source
        submit to reddit Delicious

8 Comments Leave a Comment Subscribe RSS

Leave a Comment