Template:Caltech Menubar

From 2012.igem.org

(Difference between revisions)
Line 103: Line 103:
/************************************************************/
/************************************************************/
 +
/* Main menu settings */
 +
#centeredmenu {
 +
  clear:both;
 +
  float:left;
 +
  margin:0;
 +
  padding:0;
 +
  border-bottom:1px solid #000; /* black line below menu */
 +
  width:100%;
 +
  font-family:Verdana, Geneva, sans-serif; /* Menu font */
 +
  font-size:90%; /* Menu text size */
 +
  z-index:1000; /* This makes the dropdown menus appear above the page content below */
 +
  position:relative;
 +
}
-
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
+
/* Top menu items */
-
/*------------------------------------*\
+
#centeredmenu ul {
-
NAV
+
  margin:0;
-
\*------------------------------------*/
+
  padding:0;
-
#nav{
+
  list-style:none;
-
list-style:none;
+
  float:right;
-
margin-bottom:0px;
+
  position:relative;
-
/* Clear floats */
+
  right:50%;
-
float:center;
+
-
 
+
-
  font: arial, helvetica, sans-serif;
+
-
  height: 10px;
+
-
  width: 910px; /* auto */
+
-
  margin: 0 auto;
+
-
  /*border-top: 0;
+
-
  border-right: 0;
+
-
  border-left: 0;*/
+
-
  padding: 0;
+
-
  background: black;
+
-
  position:center;
+
-
Text-Align:center;
+
-
+
}
}
-
ul, li
+
#centeredmenu ul li {
-
{
+
  margin:0 0 0 1px;
-
margin:0;
+
  padding:0;
-
padding:0;
+
  float:left;
-
padding-top:5px;
+
  position:relative;
 +
  left:50%;
 +
  top:1px;
}
}
-
#nav li{
+
#centeredmenu ul li a {
-
float:left;
+
  display:block;
-
margin-right:0px;
+
  margin:0;
-
position:relative;
+
  padding:.6em .5em .4em;
-
  font: arial, helvetica, sans-serif;
+
  font-size:1em;
-
  text-align: left;
+
  line-height:1em;
-
  list-style-type: none;
+
  background:#ddd;
-
  border: 0;
+
  text-decoration:none;
-
  padding: 10px;
+
  color:#444;
-
  background: black;
+
  font-weight:bold;
 +
  border-bottom:1px solid #000;
}
}
-
#nav a{
+
#centeredmenu ul li.active a {
-
        display:inline-block;
+
  color:#fff;
-
padding-below:0px; /* 12px */
+
  background:#000;
-
background:#000000;
+
-
text-decoration:none;
+
}
}
-
#nav a:hover{
+
#centeredmenu ul li a:hover {
-
background:#000000;
+
  background:#36f; /* Top menu items background colour */
-
text-decoration:underline;
+
  color:#fff;
 +
  border-bottom:1px solid #03f;
 +
}
 +
#centeredmenu ul li:hover a,
 +
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
 +
  background:#36f; /* Top menu items background colour */
 +
  color:#fff;
 +
  border-bottom:1px solid #03f;
}
}
-
/*--- DROPDOWN ---*/
+
/* Submenu items */
-
#nav ul{
+
#centeredmenu ul ul {
-
background:#000000; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
+
  display:none; /* Sub menus are hiden by default */
-
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
+
  position:absolute;
-
list-style:none;
+
  top:2em;
-
position:absolute;
+
  left:0;
-
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
+
  right:auto; /*resets the right:50% on the parent ul */
 +
  width:10em; /* width of the drop-down menus */
}
}
-
#nav ul li{
+
#centeredmenu ul ul li {
-
padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
+
  left:auto; /*resets the left:50% on the parent li */
-
float:none;
+
  margin:0; /* Reset the 1px margin from the top menu */
 +
  clear:left;
 +
  width:100%;
}
}
-
#nav ul a{
+
#centeredmenu ul ul li a,
-
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
+
#centeredmenu ul li.active li a,
 +
#centeredmenu ul li:hover ul li a,
 +
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
 +
  font-size:.8em;
 +
  font-weight:normal; /* resets the bold set for the top level menu items */
 +
  background:#eee;
 +
  color:#444;
 +
  line-height:1.4em; /* overwrite line-height value from top menu */
 +
  border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
}
}
-
#nav li:hover ul{ /* Display the dropdown on hover */
+
#centeredmenu ul ul li a:hover,
-
left:0; /* Bring back on-screen when needed */
+
#centeredmenu ul li.active ul li a:hover,
 +
#centeredmenu ul li:hover ul li a:hover,
 +
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
 +
  background:#36f; /* Sub menu items background colour */
 +
  color:#fff;
}
}
-
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
+
 
-
background:#000000;
+
/* Flip the last submenu so it stays within the page */
-
text-decoration:none;
+
#centeredmenu ul ul.last {
 +
  left:auto; /* reset left:0; value */
 +
  right:0; /* Set right value instead */
}
}
-
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
+
 
-
text-decoration:none;
+
/* Make the sub menus appear on hover */
-
}
+
#centeredmenu ul li:hover ul,
-
#nav li:hover ul li a:hover{ /* Here is the background for hovering over each individual link. */
+
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
-
background:#000000;
+
  display:block; /* Show the sub menus */
}
}
 +
</style>
</style>

Revision as of 03:06, 19 September 2012

Retrieved from "http://2012.igem.org/Template:Caltech_Menubar"