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.
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>
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>
Posts
![IVRAMANA](https://draft.blogger.com/img/profile_blank_gray.jpg" title="IVRAMANA)
0 comments:
Post a Comment