Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Facebook Dropdown</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
$('dl.dropdown dt a').click(function() {
​
        $("dl.dropdown dt a").removeClass("selected");
​
            var toggleMenu = $(this).parent().parent().find('dd ul');
            $(toggleMenu).toggle();
            $('dl.dropdown dd ul').not(toggleMenu).hide();
​
            if (toggleMenu.css("display") == "none") {
                $(this).removeClass("selected");
            } else {
                $(this).addClass("selected");
            }
        });
        $("dl.dropdown dd ul li a").click(function(event) {
          event.preventDefault();
​
            $("dl.dropdown dd ul").hide();
            $("dl.dropdown dt a").removeClass("selected");
        });
        $(document).bind('click', function(e) {
            var $clicked = $(e.target);
            if (!$clicked.parents().hasClass("dropdown")) {
                $("dl.dropdown dd ul").hide();
                $("dl.dropdown dt a").removeClass("selected");
            }
        });
    });
</script>
<style type="text/css">
​
.dropdown dd {
    position: relative;
}
​
​
.dropdown dt a {
    background-color:red;
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
​
.dropdown dt a.selected {
    background-color:red;
}
​
.dropdown dt a span {
    cursor: pointer;
    display: block;
    padding: 5px;
}
​
/* UL styles */
.dropdown dd ul {
    background: #EEEEEE none repeat scroll 0 0;
    display: none;
    list-style: none;
    padding: 3px 0;
    position: absolute;
    left: 0px;
    width: 160px;
    left: auto;
    right: 0;
    border: 1px solid #656565;
    cursor: pointer;
}
​
.dropdown dd ul li {
    background-color: #EEEEEE;
    margin: 0;
    width: 160px;
}
​
.dropdown span.value {
    display: none;
}
​
.dropdown dd ul li a {
    display: block;
    font-weight: normal;
    width: 137px;
    text-align: left;
    overflow: hidden;
    padding: 2px 4px 3px 19px;
    color: #111111;
    text-decoration: none;
}
​
.dropdown dd ul li a:hover {
    background: #656565;
    color: white;
    text-decoration: none;
}
​
​
</style>
​
</head>
​
<body>
​
​
            <div style="width: 162px;">
                <dl style="" class="dropdown">
                    <dt>
                        <a class="" id="linkglobal" style="cursor: pointer;"></a>
                    </dt>
                    <dd>
                        <ul style="display: none;" id="ulglobal">
                            <li><a id="1" href="#">One</a>
                            </li>
                            <li><a id="2" href="#">Two</a>
                            </li>
                        </ul>
                    </dd>
                </dl>
​
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers