sliding jquery
HTML
<div class="nav-rotate-a" id="menu">
<a href="#">WORK</a>
</div>
<div class="nav-rotate-b" id="contact">
<a href="#">CONTACT</a>
</div>
<div class="hidden" id="work-menu">
<ul>
<li id="dust"><a href="#">1</a>
</li>
<li id="black"><a href="#">2</a>
</li>
<li id="fatal"><a href="#">3</a>
</li>
<li id="hurt"><a href="#">4</a>
</li>
<li id="youth"><a href="#">5</a>
</li>
</ul>
</div>
<div class="hidden" id="contact-info">
<a href="[email protected]">[email protected]</a>
</div>
CSS
body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: #ffffff;
}
.nav-rotate-a {
position: fixed;
color: #ffffff;
font-size: 24px;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.nav-rotate-b {
position: fixed;
color: #ffffff;
font-size: 24px;
/* Safari */
-webkit-transform: rotate(+90deg);
/* Firefox */
-moz-transform: rotate(+90deg);
/* IE */
-ms-transform: rotate(+90deg);
/* Opera */
-o-transform: rotate(+90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
#menu {
bottom: 67px;
left: 9px;
}
#contact {
right: -5px;
bottom: 86px;
}
#contact-info {
position: fixed;
bottom: 37px;
right: 72px;
font-size: 24px;
}
.hidden {
display: none;
}
#work-menu {
position: fixed;
bottom: 37px;
left: 65px;
font-size: 24px;
width: 183px;
display:
}
#work-menu ul{
float:right;
}
#work-menu li {
display: inline;
margin-right: 9px;
text-align:right;
}
#work-menu a:hover {
opacity: 0.7;
}
#work-menu {
white-space: nowrap;
}
JavaScript
$('#contact').click(function () {
$('#contact-info').animate({
width: 'toggle'
});
//$('#work-menu').fadeOut('100');
});
$('#menu').click(function () {
$('#work-menu').animate({
width: 'toggle'
});
//$('#contact-info').fadeOut('100');
});