XMU-CHINA/Temp/titlebar

From 2012.igem.org

(Difference between revisions)
(SpryMenuBarHorizontal.css)
 
(25 intermediate revisions not shown)
Line 1: Line 1:
-
@charset "UTF-8";
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
 
+
<head>
-
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
 
+
<script type=text/javascript><!--//--><![CDATA[//><!--
-
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
+
function menuFix() {
-
 
+
var sfEls = document.getElementById("menu").getElementsByTagName("li");
-
/*******************************************************************************
+
for (var i=0; i<sfEls.length; i++) {
-
 
+
sfEls[i].onmouseover=function() {
-
LAYOUT INFORMATION: describes box model, positioning, z-order
+
this.className+=(this.className.length>0? " ": "") + "sfhover";
-
 
+
-
*******************************************************************************/
+
-
 
+
-
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
+
-
ul.MenuBarHorizontal
+
-
{
+
-
margin: 0;
+
-
padding: 0;
+
-
list-style-type: none;
+
-
font-size: 100%;
+
-
cursor: default;
+
-
width: auto;
+
}
}
-
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
+
sfEls[i].onMouseDown=function() {
-
ul.MenuBarActive
+
this.className+=(this.className.length>0? " ": "") + "sfhover";
-
{
+
-
z-index: 1000;
+
}
}
-
/* Menu item containers, position children relative to this container and are a fixed width */
+
sfEls[i].onMouseUp=function() {
-
ul.MenuBarHorizontal li
+
this.className+=(this.className.length>0? " ": "") + "sfhover";
-
{
+
-
margin: 0;
+
-
padding: 0;
+
-
list-style-type: none;
+
-
font-size: 100%;
+
-
position: relative;
+
-
text-align: left;
+
-
cursor: pointer;
+
-
width: 8em;
+
-
float: left;
+
}
}
-
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
+
sfEls[i].onmouseout=function() {
-
ul.MenuBarHorizontal ul
+
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
-
{
+
"");
-
margin: 0;
+
-
padding: 0;
+
-
list-style-type: none;
+
-
font-size: 100%;
+
-
z-index: 1;
+
-
cursor: default;
+
-
width: 8.2em;
+
-
position: absolute;
+
-
left: -1000em;
+
}
}
-
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
 
-
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
 
-
{
 
-
left: auto;
 
}
}
-
/* Menu item containers are same fixed width as parent */
 
-
ul.MenuBarHorizontal ul li
 
-
{
 
-
width: 8.2em;
 
}
}
-
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
+
window.onload=menuFix;
-
ul.MenuBarHorizontal ul ul
+
//--><!]]></script>
-
{
+
<title>XMU</title>
-
position: absolute;
+
 
-
margin: -5% 0 0 95%;
+
<style type="text/css">
-
}
+
body {font-family: Verdana; font-size: 12px; line-height: 1.5;  
-
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
+
background:#FFF;width:1280px auto;
-
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
+
height:720px auto;}
-
{
+
a:link {
-
left: auto;
+
text-decoration: none;text-shadow:#999999;
-
top: 0;
+
}
}
-
/*******************************************************************************
 
-
DESIGN INFORMATION: describes color scheme, borders, fonts
 
-
*******************************************************************************/
+
#menu { position:relative;
 +
z-index:2;
 +
margin:0 ;
 +
margin-left:0px;
 +
margin-top:0px;
 +
width:900px ; height:28px;
 +
background-color:#0099cc;
 +
font-family:Raavi;
 +
}
 +
 +
#menu ul { list-style: none; margin: 0px; padding: 0px; }
-
/* Submenu containers have borders on all sides */
+
#menu ul li { float:left; margin-left:0px;list-style:none;}
-
ul.MenuBarHorizontal ul
+
-
{
+
-
border: 1px solid #CCC;
+
-
}
+
-
/* Menu items are a light gray block with padding and no text decoration */
+
-
ul.MenuBarHorizontal a
+
-
{
+
-
display: block;
+
-
cursor: pointer;
+
-
background-color: #EEE;
+
-
padding: 0.5em 0.75em;
+
-
color: #333;
+
-
text-decoration: none;
+
-
}
+
-
/* Menu items that have mouse over or focus have a blue background and white text */
+
-
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
+
-
{
+
-
background-color: #33C;
+
-
color: #FFF;
+
-
}
+
-
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
+
-
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
+
-
{
+
-
background-color: #33C;
+
-
color: #FFF;
+
-
}
+
-
/*******************************************************************************
+
#menu ul li a { display:block;  height:28px auto; line-height:35px; text-align:left; font-size:19px;color:#fff;}
-
SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
-
*******************************************************************************/
+
#menu ul li a:hover {text-align:center;}
-
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
+
#menu ul li a#current {text-align:center;color:#fff;}
-
ul.MenuBarHorizontal a.MenuBarItemSubmenu
+
-
{
+
-
background-image: url(SpryMenuBarDown.gif);
+
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
-
}
+
-
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
+
-
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
+
-
{
+
-
background-image: url(SpryMenuBarRight.gif);
+
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
-
}
+
-
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
+
-
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
+
-
{
+
-
background-image: url(SpryMenuBarDownHover.gif);
+
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
-
}
+
-
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
+
-
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
+
-
{
+
-
background-image: url(SpryMenuBarRightHover.gif);
+
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
-
}
+
-
/*******************************************************************************
+
#menu ul li ul { border:0px solid #ccc; display:none; position:absolute;margin-top:0px;height:50px auto;}
-
BROWSER HACKS: the hacks below should not be changed unless you are an expert
+
#menu ul li ul li { float:none; background:#0099cc; margin:0;height:20px auto;}
-
*******************************************************************************/
+
#menu ul li ul li a {background:none;font-size:14px;height:20px auto;line-height: 15px none; text-align:left;border:1px solid #fff;}
-
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
+
#menu ul li ul li a:hover {background:#004f7c; color:#fff;font-size:18px;height:20px auto;}
-
ul.MenuBarHorizontal iframe
+
 
-
{
+
#menu ul li:hover ul { display:block;}
-
position: absolute;
+
 
-
z-index: 1010;
+
#menu ul li.sfhover ul { display:block;}
-
filter:alpha(opacity:0.1);
+
 
-
}
+
 
-
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
+
</style>
-
@media screen, projection
+
 
-
{
+
</head>
-
ul.MenuBarHorizontal li.MenuBarItemIE
+
<body>
-
{
+
<div id="menu">
-
display: inline;
+
<ul>
-
f\loat: left;
+
<li><a id="current" href="#">&ensp;&ensp;HOME&ensp;&ensp;|</a></li>
-
background: #FFF;
+
 
-
}
+
<li><a href="#">&ensp;&ensp;TEAM&ensp;&ensp;|</a>
-
}
+
<ul>
 +
      <li><a href="#">Instructors</a></li>
 +
      <li><a href="#">Advisors</a></li>
 +
      <li><a href="#">Team members</a></li>
 +
      <li><a href="#">Acknowledgement</a></li>
 +
      <li><a href="#">Collaborations</a></li>
 +
      <li><a href="#">Our city & <p>Our university</a></li>
 +
    </ul>
 +
</li>
 +
 
 +
<li><a href="#">&ensp;&ensp;PROJECT&ensp;&ensp;|</a>
 +
<ul>
 +
      <li><a href="#">Background <p>(Approach/
 +
      Program)</a></li>
 +
      <li><a href="#">Section A</a></li>
 +
      <li><a href="#">Section B</a></li>
 +
      <li><a href="#">Accomplishment</a></li>
 +
      <li><a href="#">Data page</a></li>
 +
      <li><a href="#">Future plan</a></li>
 +
      <li><a href="#">Reference</a></li>
 +
    </ul>
 +
</li>
 +
 
 +
<li><a href="#">&ensp;&ensp;PARTS&ensp;&ensp;|</a>
 +
    <ul>
 +
      <li><a href="#">Parts submitted</a></li>
 +
      <li><a href="#">Attrivutions</a></li>
 +
    </ul>
 +
</li>
 +
 
 +
<li><a href="#">&ensp;&ensp;NOTEBOOK&ensp;&ensp;|</a>
 +
<ul>
 +
      <li><a href="#">Brainstorm</a></li>
 +
      <li><a href="#">Wet lab journal</a></li>
 +
      <li><a href="#">Protocols</a></li>
 +
    </ul>
 +
</li>
 +
 
 +
<li><a href="#">&ensp;&ensp;SAFETY&ensp;&ensp;|</a></li>
 +
 
 +
<li><a href="#">&ensp;&ensp;HUMANPRACTICE&ensp;&ensp;|</a>
 +
    <ul>
 +
      <li><a href="#">Exhibition</a></li>
 +
      <li><a href="#">Communication</a></li>
 +
    </ul>
 +
</li>
 +
 
 +
<li><a href="#https://2012.igem.org">&ensp;&ensp;iGEM</a></li>
 +
 
 +
</ul>
 +
</div>
 +
 
 +
 
 +
</body>
 +
 
 +
</html>

Latest revision as of 13:11, 24 August 2012

XMU