Biomod/2011/IITM/AcidArtists/new page: Difference between revisions
No edit summary |
No edit summary |
||
Line 133: | Line 133: | ||
$("span",this).animate({marginRight: '0'}); | $("span",this).animate({marginRight: '0'}); | ||
}); | }); | ||
$('#menu_desc').toggle(function(){ | $('#menu_desc').toggle(function(){ |
Revision as of 16:00, 1 November 2011
<html> <head> <style> /*
- bodyContent{text-align:center;}
- /
- content{
color:#333; background:none; border:none; } .portlet .pBody { border:none; background:none; z-index:100; } .portlet a{color:#white;} .pBody a{color:#white;}
- footer{background:none; border:none;}
- footer li{color:#333;;}
- footer li a {color:#333;;}
body{
background:url('http://openwetware.org/images/2/23/Grunge_Backgrounds.png');
color:#333;;
}
h1, h2, h3, h4, h5, h6, p, a, pre{color:#333;; font-family: 'Trebuchet MS', Helvetica, sans-serif;}
- menu ul{list-style:none;}
- menu ul li{float:left; width:125px; text-align:center; background:#234ade; margin:5px; cursor:pointer}
- content_container{width:1%;height:10px; background:#333; position:absolute; top:260px; display:none; left:495%; opacity:0.8;
border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; border:1px #AAA solid; }
- close_container{position:absolute;left:98.5%;top:5px;,cursor:pointer;}
.contents{float:none; position:absolute; width:89%; text-align:justify; top:280px; display:none; height:316px; overflow:auto; padding:16px;}
.slide_show_pic{ position:absolute; top:-40px; left:160px; display:none; height:400px; }
/*stack*/
.stack { position: fixed; bottom: 60px; right: 60px; } .stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; left:20px;} .stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; } .stack ul li { position: absolute; } .stack ul li img { border: 0; } .stack ul li span { display: none; } .stack .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif; display:block; height: 14px; position:absolute; top: 17px; right:60px; line-height: 14px; border: 0; background-color:#000; padding: 3px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #fcfcfc; text-align: center; text-shadow: #000 1px 1px 1px; opacity: .85; filter: alpha(opacity = 85);
}
.stack img{width:50px;}
/* IE Fixes */ .stack { _position: absolute; } .stack ul { _z-index:-1; _top:-15px; } .stack ul li { *right:5px; }
/*stack close*/
- sidebar_bg{
width:150px; background:#000; opacity:0.6; height:830px; display:block; position:absolute; left:-156px; top:-50px; z-index:-100; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/></script>
<script>
jQuery(function () {
// Stack initialize var openspeed = 300; var closespeed = 300; $('.stack>img').toggle(function(){ var vertical = 0; var horizontal = 0; var $el=$(this); $el.next().children().each(function(){ $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed); vertical = vertical + 55; horizontal = (horizontal+.65)*2; }); $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack') .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed); $el.animate({paddingTop: '0'}); }, function(){ //reverse above var $el=$(this); $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed); $el.next().find('li a>img').animate({width: '50px', marginLeft: '0'}, closespeed); $el.animate({paddingTop: '35'}); }); // Stacks additional animation $('.stack li a').hover(function(){ $("img",this).animate({width: '56px'}, 100); $("span",this).animate({marginRight: '30px'}); },function(){ $("img",this).animate({width: '50px'}, 100); $("span",this).animate({marginRight: '0'}); });
$('#menu_desc').toggle(function(){
var vertical = 0; var horizontal = 0; var $el=$(this); $el.next().children().each(function(){ $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed); vertical = vertical + 55; horizontal = (horizontal+.65)*2; }); $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack') .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed); $el.animate({paddingTop: '0'}); }, function(){ //reverse above var $el=$(this); $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed); $el.next().find('li a>img').animate({width: '50px', marginLeft: '0'}, closespeed); $el.animate({paddingTop: '35'}); }); // Stacks additional animation $('.stack li a').hover(function(){ $("img",this).animate({width: '56px'}, 100); $("span",this).animate({marginRight: '30px'}); },function(){ $("img",this).animate({width: '50px'}, 100); $("span",this).animate({marginRight: '0'}); });
});
</script>
</head>
<body>
<div class="stack">
<img src="http://openwetware.org/images/9/9f/Stack.png" alt="stack">
<ul id="stack">
<li><a href=""><span>Reference Papers</span><img src="http://openwetware.org/images/1/13/Papers.png" alt="Papers"></a></li>
<li><a href=""><span>Brain Stroming</span><img src="http://openwetware.org/images/3/3f/Brain.png" alt="Brain Storming"></a></li>
<li><a href=""><span>Work Diary</span><img src="http://openwetware.org/images/2/2a/Diary.png" alt="Work diary"></a></li>
<li><a href=""><span>Team</span><img src="http://openwetware.org/images/6/62/Team_iitm.jpg" alt="Team"></a></li>
<li><a href=""><span>Project</span><img src="http://openwetware.org/images/f/f0/Home-sm.png" alt="Project"></a></li>
</ul>
</div>
<div id="menu_desc" style="position:fixed; right:-29px; width:200px; text-align:center; bottom:20px; color:white;">Click here to see<br/>the menu</div>
</body>
</html>