Hi,
Following url there is right hand toggle menu which is on flash. I need a Same functionality On jquery. I have try but the problem is to fixing the position. of next div and Image bellow
http://www.junkiesdigital.com/
I have made a use Jquery function but I unable to get the exact animation. Here is the page.
http://www.junkiesdigital.com/html/Index.htm
Any one help me out this problem.
Thanks buddy.... I find the solution..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.menu-activator-arrow').mouseenter(function() {
$(this).next('.menu').show('slow');
$(this).next('.menu').animate({ width: 450, height: 300, zIndex: 50 }, { duration: 'slow', easing: 'easeOutBack' })
}).mouseleave(function() {
$(this).next('.menu').hide('slow');
$(this).stop().animate({ width: 184, height: 170, zIndex: 1 }, { duration: 'slow', easing: 'easeOutBack' });
});
});
</script>
<style>
a
{
color: black;
text-decoration: none;
}
#main
{
margin: 50px auto;
padding: 10px;
width: 350px;
}
.block
{
position: relative;
margin: 0px 0px 10px 0px;
width: 100%;
height: 25px;
background-color: #e0d0d0;
}
.badge
{
position: absolute;
top: 0px;
left: 0px;
width: 21px;
height: 21px;
background-color: white;
border: 2px solid #c0b0b0;
color: #c0b0b0;
line-height: 21px;
text-align: center;
font-size: 13px;
font-weight: bold;
}
.info
{
position: absolute;
top: 0px;
right: 0px;
left: 25px;
bottom: 5px;
padding: 0px 5px;
background-color: #f0e0e0;
border: 1px solid #f0d0d0;
line-height: 18px;
}
a.menu-activator-arrow
{
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 20px;
height: 18px;
background-color: white;
border-left: 1px solid #e0c0c0;
line-height: 18px;
text-align: center;
color: #c0a0a0;
font-weight: bold;
text-decoration: none;
}
a.menu-activator-arrow:hover
{
background-color: #a07070;
color: white;
}
.menu
{
position: absolute;
top: 19px;
right: 0px;
z-index: 10;
background-color: #f0f0f0;
border: 1px solid #a0a0a0;
}
.menu ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
.menu a
{
display: block;
padding: 2px 5px;
}
.menu a:hover
{
background-color: #808080;
color: white;
}
</style>
</head>
<body>
<div id="main">
<div class="block">
<!-- <div class="badge">
</div>-->
<div class="info">
Why Can’t I get a large Facebook Following? <a class="menu-activator-arrow">
v</a>
<div class="menu" style="display: none;">
<hr class="hrline" />
<p>
In order to gain a targeted following on Facebook you need to reach out to a network
beyond your own. We have a team of networkers that are able to launch your brand
into social cyberspace.</p>
<br />
<p>
Facebook pages are one of the most important places to integrate with your consumers
on a social level. We are able to land thousands of targeted individuals on your
page for a very competative rate.</p>
<br />
<p>
Call us on <span class="Color">0161 445 4555 </span>or
</p>
<p>
email <span class="Color">[email protected]</span>
</p>
<p>
for more information.
</p>
</div>
<!-- /menu -->
</div>
<!-- /info -->
</div>
<!-- /block -->
<div class="block">
<!-- <div class="badge">
</div>-->
<div class="info">
Why Can’t I get a large Twitter Following?<a class="menu-activator-arrow" >v</a>
<div class="menu" style="display: none;">
<hr class="hrline" />
<p>
In order to gain a targeted following on Facebook you need to reach out to a network
beyond your own. We have a team of networkers that are able to launch your brand
into social cyberspace.</p>
<br />
<p>
Facebook pages are one of the most important places to integrate with your consumers
on a social level. We are able to land thousands of targeted individuals on your
page for a very competative rate.</p>
<br />
<p>
Call us on <span class="Color">0161 445 4555 </span>or
</p>
<p>
email <span class="Color">[email protected]</span>
</p>
<p>
for more information.
</p>
</div>
<!-- /menu -->
</div>
<!-- /info -->
</div>
<!-- /block -->
<div class="block">
<div class="info">
How do I improve my google search ranking?<a class="menu-activator-arrow" href="javascript://">v</a>
<div class="menu" style="display: none;">
<hr class="hrline" />
<p>
SEO is key in ensuring your site ranks highly in Google search result. There are
a verity of procedures that you need to follow to ensure this happens. We all put
a strategy in place to make sure you improve your search ranking.</p>
<p>
<br />
<br />
Call us on <span class="Color">0161 445 4555 </span>or
</p>
<p>
email <span class="Color">[email protected]</span>
</p>
<p>
for more information.
</p>
</div>
<!-- /menu -->
</div>
<!-- /info -->
</div>
<!-- /block -->
</div>
<!-- /main -->
</body>
</html>
Kind regards, Thanks