Team:XMU-China/CSS/SpryMenuBarHorizontal/css

From 2012.igem.org

(Difference between revisions)
 
(37 intermediate revisions not shown)
Line 1: Line 1:
-
<html >
+
<html>  
-
<head>
+
<style type="text/css">
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
 
-
<title>无标题文档</title>
+
 
-
<style type="text/css">
+
@charset "UTF-8";
-
#leftbar {
+
 
-
position:fixed;
+
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
-
width:181px;
+
 
-
height:115px;
+
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
-
z-index:1;
+
 
-
left: 70px;
+
/*******************************************************************************
-
top: 55px;
+
 
 +
LAYOUT INFORMATION: describes box model, positioning, z-order
 +
 
 +
*******************************************************************************/
 +
 
 +
/* 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 */
 +
ul.MenuBarActive
 +
{
 +
z-index: 1000;
 +
}
 +
/* Menu item containers, position children relative to this container and are a fixed width */
 +
ul.MenuBarHorizontal li
 +
{
 +
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) */
 +
ul.MenuBarHorizontal li ul
 +
{
 +
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 li ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
}
 +
/* Menu item containers are same fixed width as parent */
 +
ul.MenuBarHorizontal li ul li
 +
{
 +
width: 8.2em;
 +
}
 +
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
 +
ul.MenuBarHorizontal li ul ul
 +
{
 +
position: absolute;
 +
margin: -5% 0 0 95%;
 +
}
 +
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
 +
ul.MenuBarHorizontal li ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
top: 0;
}
}
-
#navigbar {
+
/*******************************************************************************
-
position:absolute;
+
 
-
width:200px;
+
DESIGN INFORMATION: describes color scheme, borders, fonts
-
height:21px;
+
 
-
z-index:2;
+
*******************************************************************************/
-
left: 258px;
+
 
-
top: 55px;
+
/* Submenu containers have borders on all sides */
 +
ul.MenuBarHorizontal li ul
 +
{
 +
border: 1px solid #CCC;
}
}
-
#photo {
+
/* Menu items are a light gray block with padding and no text decoration */
-
position:absolute;
+
ul.MenuBarHorizontal a
-
width:531px;
+
{
-
height:131px;
+
display: block;
-
z-index:3;
+
cursor: pointer;
-
left:258px;
+
background-color: #EEE;
-
top:80px;
+
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;
}
}
-
#schoolbadge {
 
-
position:absolute;
 
-
width:250px;
 
-
height:52px;
 
-
z-index:4;
 
-
left:70px;
 
-
top:3px;
 
-
padding-left:20px;
 
-
font-size:30px;
 
-
color: #006dab;
 
-
font-family:Tahoma, Geneva, sans-serif;
 
-
text-align:center;
 
 +
/*******************************************************************************
 +
 +
SUBMENU INDICATION: styles if there is a submenu under a given menu item
 +
 +
*******************************************************************************/
 +
 +
/* 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 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 li 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 li ul a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarRightHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
}
}
-
</style>
 
-
</head>
 
-
<body>
+
/*******************************************************************************
-
<div id="leftbar" >
+
 
-
  <table width="189" border="0" cellspacing="0" cellpadding="0" >
+
BROWSER HACKS: the hacks below should not be changed unless you are an expert
-
    <tr>
+
 
-
      <td><img src="pictures/left-navigbar1.png" width="100%" /></td>
+
  *******************************************************************************/
-
    </tr>
+
 
-
    <tr>
+
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
-
      <td><img src="pictures/left-navigbar2.png" width="100%" /></td>
+
ul.MenuBarHorizontal iframe
-
    </tr>
+
{
-
    <tr>
+
position: absolute;
-
      <td><img src="pictures/left-navigbar3.png" width="100%"  /></td>
+
z-index: 1010;
-
    </tr>
+
filter:alpha(opacity:0.1);
-
    <tr>
+
}
-
      <td><img src="pictures/left-navigbar4.png" width="100%"  /></td>
+
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
-
    </tr>
+
@media screen, projection
-
    <tr>
+
{
-
      <td><img src="pictures/left-navigbar5.png" width="100%" /></td>
+
ul.MenuBarHorizontal li.MenuBarItemIE
-
    </tr>
+
{
-
    <tr>
+
display: inline;
-
      <td><img src="pictures/left.png" width="189" /></td>
+
f\loat: left;
-
    </tr>
+
background: #FFF;
-
  </table>
+
}
-
</div>
+
}
-
<div id="schoolbadge"><img src="pictures/校徽.gif" width="50" height="50" /> XMU-China</div>
+
</style>  
-
<p>&nbsp;</p>
+
-
<div id="navigbar"><img src="pictures/navigbar.png" width="528" height="17" /></div>
+
-
<div id="photo"><img src="pictures/photo.png" width="458" height="74" hspace="35" vspace="10"/></div>
+
-
</body>
+
</html>
</html>

Latest revision as of 04:55, 6 August 2012

Retrieved from "http://2012.igem.org/Team:XMU-China/CSS/SpryMenuBarHorizontal/css"