|
|
(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="#">  HOME  |</a></li> |
- | background: #FFF;
| + | |
- | } | + | <li><a href="#">  TEAM  |</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="#">  PROJECT  |</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="#">  PARTS  |</a> |
| + | <ul> |
| + | <li><a href="#">Parts submitted</a></li> |
| + | <li><a href="#">Attrivutions</a></li> |
| + | </ul> |
| + | </li> |
| + | |
| + | <li><a href="#">  NOTEBOOK  |</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="#">  SAFETY  |</a></li> |
| + | |
| + | <li><a href="#">  HUMANPRACTICE  |</a> |
| + | <ul> |
| + | <li><a href="#">Exhibition</a></li> |
| + | <li><a href="#">Communication</a></li> |
| + | </ul> |
| + | </li> |
| + | |
| + | <li><a href="#https://2012.igem.org">  iGEM</a></li> |
| + | |
| + | </ul> |
| + | </div> |
| + | |
| + | |
| + | </body> |
| + | |
| + | </html> |