Template:Osaka/Header

From 2010.igem.org

(Difference between revisions)
 
(8 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Osaka/Css}}
<html>
<html>
<head><title>osaka</title>
<head><title>osaka</title>
-
<style type="text/css">
 
-
@charset "UTF-8";
 
-
.CollapsiblePanel {
 
-
margin: 0px;
 
-
padding: 0px;
 
-
}
 
-
.CollapsiblePanel *{
 
-
margin: 0px;
 
-
padding: 0px;
 
-
}
 
-
.CollapsiblePanelTab {
 
-
margin: 0px;
 
-
padding: 0px;
 
-
cursor: pointer;
 
-
-moz-user-select: none;
 
-
-khtml-user-select: none;
 
-
background-image: url(https://static.igem.org/mediawiki/2009/d/da/Up.png);
 
-
background-repeat: no-repeat;
 
-
background-position: right;
 
-
border: none;
 
-
}
 
-
.CollapsiblePanelContent {
 
-
margin: 0px;
 
-
padding-top: 0px;
 
-
padding-right: 0px;
 
-
padding-bottom: 0px;
 
-
padding-left: 12px;
 
-
}
 
-
.CollapsiblePanelTab a {
 
-
color: black;
 
-
text-decoration: none;
 
-
}
 
-
.CollapsiblePanelOpen .CollapsiblePanelTab {
 
-
background-image: url(https://static.igem.org/mediawiki/2009/f/f9/Down.png);
 
-
}
 
-
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
 
-
/*border: thin solid #FFF;*/
 
-
}
 
-
 
-
 
-
/* This is an example of how to change the appearance of the panel tab when the
 
-
* CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
 
-
* whenever the CollapsiblePanel is closed.
 
-
*/
 
-
 
-
.CollapsiblePanelClosed .CollapsiblePanelTab {
 
-
/*background-image: url(../coimage/down.png);*/
 
-
}
 
-
 
-
/* This is an example of how to change the appearance of all the panel tabs when the
 
-
* CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 
-
* whenever the CollapsiblePanel gains or loses keyboard focus.
 
-
*/
 
-
.CollapsiblePanelFocused .CollapsiblePanelTab {
 
-
background-repeat: no-repeat;
 
-
background-position: right;
 
-
}
 
-
 
-
 
-
 
-
 
-
 
-
/*html{
 
-
overflow:hidden;
 
-
height:100%;}
 
-
body{
 
-
overflow:hidden;
 
-
height:100%;}
 
-
*/
 
-
 
-
 
-
 
-
div#wrap{
 
-
height: 100%;
 
-
width: 1000px;
 
-
margin:0 auto;
 
-
border:0px;
 
-
background-color:#FFFFFF;
 
-
/*overflow:hidden;*/
 
-
}
 
-
div#left{
 
-
padding:10px 0px 0px 10px;
 
-
border:0px;
 
-
background-color:#FFFFFF;
 
-
width:300px;
 
-
position:absolute;
 
-
top:0px;
 
-
left:0px;
 
-
height:100%;
 
-
}
 
-
div#header{
 
-
margin:0px;
 
-
padding:0px;
 
-
width:200px;
 
-
background-color:#FFFFFF;
 
-
border:0px ;
 
-
}
 
-
.menu_sb1 ul{
 
-
margin: 0;
 
-
padding: 0;
 
-
list-style-type: none;
 
-
font: bold 13px Verdana;
 
-
width: 150px; /* Main Menu Item widths */
 
-
border-bottom: 1px solid #ccc;
 
-
}
 
-
 
-
.menu_sb1 ul li{
 
-
position: relative;
 
-
}
 
-
 
-
/* Top level menu links style */
 
-
.menu_sb1 ul li a{
 
-
display: block;
 
-
overflow: auto; /*force hasLayout in IE7 */
 
-
color: white;
 
-
text-decoration: none;
 
-
padding: 7px;
 
-
text-indent: 10px;
 
-
border-bottom: 1px solid #778;
 
-
border-right: 1px solid #778;
 
-
}
 
-
 
-
.menu_sb1 ul li a:link, .menu_sb1 ul li a:visited, .menu_sb1 ul li a:active{
 
-
background-color: #0255a8; /* メニュー カラー コード */
 
-
}
 
-
 
-
.menu_sb1 ul li a:visited{
 
-
color: white;
 
-
}
 
-
 
-
.menu_sb1 ul li a:hover{
 
-
background-color: black;/* メニュー マウスオーバー カラー コード */
 
-
}
 
-
 
-
/*Sub level menu items */
 
-
.menu_sb1 ul li ul{
 
-
position: absolute;
 
-
width: 150px; /*Sub Menu Items width */
 
-
top: 0;
 
-
visibility: hidden;
 
-
}
 
-
 
-
.menu_sb1 a.subfolderstyle{
 
-
background: url(images/right.gif) no-repeat 97% 50%;
 
-
}
 
-
 
-
 
-
/* Holly Hack for IE \*/
 
-
* html .menu_sb1 ul li { float: left; height: 1%; }
 
-
* html .menu_sb1 ul li a { height: 1%; }
 
-
/* End */
 
-
 
-
 
-
div#right{
 
-
position:absolute;
 
-
left:300px;
 
-
padding:0px 10px 0px 10px ;
 
-
width:700px;
 
-
height:100%;
 
-
background-color:#FFFFFF;
 
-
 
-
overflow:auto;
 
-
 
-
 
-
}
 
-
div#contents-outer{
 
-
margin:0px;
 
-
padding:0px 0px 10px 0px;
 
-
background-color:#FFFFFF;
 
-
 
-
border-left:solid 3px #000000;
 
-
border-right:solid 3px #000000;
 
-
 
-
}
 
-
div#contents{
 
-
margin:0px;
 
-
padding:0px 0px 10px 0px;
 
-
background-color:#FFFFFF;
 
-
 
-
 
-
}
 
-
 
-
h1{ padding:0px 0px 5px 5px;
 
-
border-bottom:solid 3px #FFA500;
 
-
border-left:solid 5px #FFA500;
 
-
}
 
-
h2{ padding:0px 0px 0px 5px;
 
-
}
 
-
p{ padding:0px 10px 0px 10px;
 
-
}
 
-
 
-
 
-
table{ border:solid 1px #FF00AA;
 
-
}
 
-
.block{ display:block;
 
-
}
 
-
.right{ float:right;
 
-
}
 
-
.left{ float:left;
 
-
}
 
-
.release{ clear:both;
 
-
}
 
-
.picture{ padding:0px 0px 0px 10px;
 
-
display:block;
 
-
}
 
-
 
-
 
-
 
-
</style> 
 
-
<script type="text/javascript" src="side_bar1.js"></script>
 
  <script type="text/javascript"  
  <script type="text/javascript"  
Line 225: Line 16:
<div id="left">
<div id="left">
<div id="header">
<div id="header">
-
<img src="https://2010.igem.org/Image:Osaka_logo.png" width="260" height="250" alt="iGEM OSAKA">
+
<img src="https://static.igem.org/mediawiki/2010/3/3c/Osaka_logo.png" width="260" height="250" alt="iGEM OSAKA">
</div><!-- header -->  
</div><!-- header -->  
Line 244: Line 35:
<li><a href="#">Continuous Greening Cycle</a></li>
<li><a href="#">Continuous Greening Cycle</a></li>
</ul></li>
</ul></li>
-
<li><a href="parts">Submitted Parts</a></li>
+
<li><a href="Parts">Submitted Parts</a></li>
-
<li><a href="modeling">Modeling</a></li>
+
<li><a href="Modeling">Modeling</a></li>
-
<li><a href="protocols">Protocols</a></li>
+
<li><a href="Protocols">Protocols</a></li>
-
<li><a href="notebook">Notebook</a></li>
+
<li><a href="Notebook">Notebook</a></li>
-
<li><a href="safety">Safety</a></li>
+
<li><a href="Safety">Safety</a></li>
</ul>
</ul>
</div> <!-- menu_sub1 -->
</div> <!-- menu_sub1 -->
-
+
 
 +
 
 +
 
</div><!-- left -->  
</div><!-- left -->  
Line 308: Line 101:
</div><!-- contentsouter -->
</div><!-- contentsouter -->
</div><!-- right -->  
</div><!-- right -->  
 +
<div class="release"><hr></div>
</div><!-- wrap -->  
</div><!-- wrap -->  
-
<script  
+
<script type="text/javascript"> var CollapsiblePanel1 = new  
-
type="text/javascript"> var CollapsiblePanel1 = new  
+
Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false,enableAnimation: false});
-
Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false,enableAnimation: false});</script>  
+
</script>
 +
<script type="text/javascript">
 +
 
 +
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
 +
 
 +
function initsidebarmenu(){
 +
for (var i=0; i<menuids.length; i++){
 +
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
 +
    for (var t=0; t<ultags.length; t++){
 +
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
 +
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
 +
  ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
 +
  else //else if this is a sub level submenu (ul)
 +
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
 +
    ultags[t].parentNode.onmouseover=function(){
 +
    this.getElementsByTagName("ul")[0].style.display="block"
 +
    }
 +
    ultags[t].parentNode.onmouseout=function(){
 +
    this.getElementsByTagName("ul")[0].style.display="none"
 +
    }
 +
    }
 +
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
 +
  ultags[t].style.visibility="visible"
 +
  ultags[t].style.display="none"
 +
  }
 +
  }
 +
}
 +
 
 +
if (window.addEventListener)
 +
window.addEventListener("load", initsidebarmenu, false)
 +
else if (window.attachEvent)
 +
window.attachEvent("onload", initsidebarmenu)
 +
 
 +
 
 +
</script>
</body>
</body>
</html>
</html>

Latest revision as of 11:48, 8 September 2010

osaka

Retrieved from "http://2010.igem.org/Template:Osaka/Header"