Biomod/2011/IITM/AcidArtists/new page: Difference between revisions
mNo edit summary |
No edit summary |
||
| Line 32: | Line 32: | ||
#menu ul li{float:left; width:125px; text-align:center; background:#234ade; margin:5px;} | #menu ul li{float:left; width:125px; text-align:center; background:#234ade; margin:5px;} | ||
#content_container{width:1%;height:10px; background:# | #content_container{width:1%;height:10px; background:#AAA; position:absolute; top:260px; display:none; left:495%; opacity:0.8} | ||
#close_container{position:absolute;left:100%;top:-30px;} | #close_container{position:absolute;left:100%;top:-30px;} | ||
Revision as of 10:01, 29 October 2011
<html> <head> <style>
- bodyContent{text-align:center;}
- content{
color:white; background:black; border:none; } .portlet .pBody { border:none; background-color: black; } .portlet a{color:white;} .pBody a{color:white;}
- footer{background:black; border:none;}
- footer li{color:white;}
- footer li a {color:white;}
body{
background:black;
color:white;
}
h1, h2, h3, h4, h5, h6, p, a, pre{color:white;}
- menu ul{list-style:none;}
- menu ul li{float:left; width:125px; text-align:center; background:#234ade; margin:5px;}
- content_container{width:1%;height:10px; background:#AAA; position:absolute; top:260px; display:none; left:495%; opacity:0.8}
- close_container{position:absolute;left:100%;top:-30px;}
</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/></script> <script type="text/javascript"> jQuery(document).ready(function($){ var flag=0;
$(".link").mouseover(function(){ if(flag==0){ $("#content_container").show().animate({"width":"95%","left":0}).animate({"height":"400px"}); $("#close_container").show(); flag=1; } });
$("#close_container").click(function(){ if(flag==1){ $("#content_container").animate({"width":"0px"}); $("#close_container").hide(); flag=0; } });
}); </script>
</head> <body> <img src="http://openwetware.org/images/0/09/Iitm-acidartists-banner.jpg"/> <h1>Acid Artists</h1> <div id="menu"> <ul> <li id="l1" class="link">Project</li> <li id="l2" class="link">Team</li> <li id="l3" class="link">Work diary</li> <li id="l4" class="link">Brain storming</li> <li id="l5" class="link">Reference papers</li> <li id="l6" class="link">To do list</li> <li id="l7" class="link">Resources</li> </ul> </div>
<div id="content_container"><div id="close_container">close <b>X</b></div></div>
<div id="project" class="contents"></div> <div id="team" class="contents"></div> <div id="work_diary" class="contents"></div> <div id="brain_storming" class="contents"></div> <div id="ref_papers" class="contents"></div> <div id="to_do" class="contents"></div> <div id="resources" class="contents"></div>
</body>
</html>
