Round avatar with drop down profiles menu code

Round avatar with drop down profiles menu codeAll of them know the drop down menu in the right side corner in login access sites. Our profile picture and down arrow icon, click to show your profile, setting, logout option, etc.,. How to create the avatar with drop down menu use the below code to create the profile avatar with drop down menu.


In this I will use the css and javascript code to create this avatar drop down menu.


div.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
div.submenu
{
position: absolute;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
}
.dropdown  li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
.dropdown li a:hover{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(images/arrow.png) 80px 32px no-repeat;
cursor:pointer;
}
.root
{
list-style: none;
font-size: 11px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
background: #fff;
padding: 10px 0 10px 0;
border-radius: 5px 5px 5px 5px;
margin: 21px 0 0 0;
}
.root:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: #ffffff;
position: absolute;
color: #ffffff;
top: 54px;
left: 17px;
}
.profile-circle {
width: 45px;
height: 44px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border-radius: 99em;
border: 2px solid #eee;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
vertical-align: middle;
}

  • Just copy and the past the above css code in your style sheet. After copy the css now copy the javascript code. If you want to paste the javascript code internal in your page, which page you want to show the drop down menu. [Or] copy and past the code in a separate text file and save it as. js and give the external link in the page and use the javascript code.


$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0'); 
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}
});
$(".submenu").mouseup(function()
{
return false
});
$(".account").mouseup(function()
{
return false
});
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});

  • Finally, copy the html code and past the where you want to show the drop down menu. And you can change the text and link in the html code for your need.

<div class="dropdown">
<a href=""# class="account" >
<img src="images/avatar.png" class="profile-circle"/>
</a>
<div class="submenu" style="display: none; ">
<ul class="root">
<li >
<a href="#" >Dashboard</a>
</li>
<li >
<a href="#" >Profile</a>
</li>
<li >
<a href="#">Settings</a>
</li>
<li>
<a href="#">Sign Out</a>
</li>
</ul>
</div>
</div>
Copyright Labw3