Facebook Style Drop Down Log out Menu

i have tried to facebook style drop down menu list. i used some few line simple jquery function. click down arrow drop down menu list display here i use div show and hide based on jquery code. i make some own css to designed the drop down menu.

Live Demo Download

HTML

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript">
function show_hide(id){ 
ID=document.getElementById(id); 
if(ID.style.display == '') { 
ID.style.display = 'none'; 
} else {
ID.style.display = ''; 
$('#'+id).focus(); 
}
} 
</script>
</head>

<body>
<section class="jtr">
<span class="lgin" style="display:block;" >
<span class="cp" onclick="show_hide('acc_opt')";">
<b>Click Here</b> <span class="opt"></span></span> 
<section id="acc_opt" style="display:none;">
<a>Karthick Muthu</a>
<a>My Friends Ratings</a>
<a>Tag Your Friends</a>
<a>Create page</a>
<a>Edit Profile</a>
<a>Change Password</a>
<a>Logout</a>
</section></section>
</body>
</html>

Css

<style>
Body
{
background-color:#f7f7f7;
}
.jtr .cp {
    cursor:pointer;
    float:left;
    margin-right:180px;
    margin-bottom:1px;
    }
.jtr #acc_opt{
    background-color:#fff;
    border:1px solid #cbcbcb;
    color:#2a54ce;
    line-height:10px;
    padding:1px 0;
    position:absolute;
    text-align:left;
    width:202px;
    z-index:999;
    background: rgba(255,255,255,.98);
    -webkit-background-clip: padding-box;
    background-color: #fff;
    border: 1px solid #c5c5c5;
    border: 1px solid rgba(100, 100, 100, .4);
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    top: 25px;
  }

.jtr #acc_opt a
{
    float:left;
    font-size:11px;
    font-weight:normal;
    padding:7px 5px 10px 20px;
        width:181px;
    color:#141823;
    position:relative;
        line-height: 20px;
    font-weight:100;
    border-bottom:solid #d3d7dc 1px;
        text-decoration:none;
    font-family:font-family: Helvetica;
}

.jtr #acc_opt a:hover
{
      background:#6D84B4
}

.opt
{
    background:url("http://images.jdmagicbox.com/icontent/HP_Header_Sprite.gif")
    no-repeat;display:inline-block; 
    background-position:-3px -89px;
    cursor:pointer;
    height:17px;
    width:20px;
    vertical-align:middle
}
</style>

Menu Link

14 May, 2014

Facebook Style Drop Down Log out Menu

HTML

1 comment: