Template:Caltech Menubar

From 2012.igem.org

(Difference between revisions)
Line 7: Line 7:
<style type="text/css">
<style type="text/css">
/* This is a comment in css */
/* This is a comment in css */
 +
/*Don't display the page title.  It is irrelevant.*/
-
/* Remove wiki formatting */
+
/* Removing wiki-like stuff */
/****************************/
/****************************/
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
Line 94: Line 95:
margin-left: 0; padding-left: 20px;  
margin-left: 0; padding-left: 20px;  
}
}
 +
.clear {
.clear {
Line 102: Line 104:
     border: none;
     border: none;
     visibility: hidden;}
     visibility: hidden;}
 +
.
.tab {text-indent: 30pt;}
.tab {text-indent: 30pt;}
-
/* Original from Uppsala site */
 
-
/*-----------------------------------------------------------------------------------------------*/
 
-
div.MenuBar ul li ul.DropDownMenu {
 
-
  display: none; /* Hides all drop-down menus. */
 
-
}
+
/************************************************************/
-
/*
+
-
li:hover works in IE7 and FF2.
+
-
a:hover works in IE6 and FF2.
+
-
a:hover breaks li:hover in FF2.
+
-
*/
+
-
div.MenuBar ul li:hover ul.DropDownMenu li ul.SideMenu,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a ul.SideMenu {
+
-
  display: none; /* Hides all side menus. */
+
-
}
+
-
/*------------------------------------------------------------------------------------- Menu Bar */
+
-
div.MenuBar {
+
-
  font: arial, helvetica, sans-serif;
+
-
  height: 30px;
+
-
  width: 910px;
+
-
  margin: 0;
+
-
  border-top: 0;
+
-
  border-right: 0;
+
-
  border-left: 0;
+
-
  padding: 0;
+
-
  background: black;
+
-
  position:center;
+
-
 
+
-
}
+
-
div.MenuBar ul {
+
-
  font: arial, helvetica, sans-serif;
+
-
  text-align: center;
+
-
  list-style-type: none;
+
-
  margin: 0.5em auto;
+
-
  border: 0;
+
-
  padding: 0;
+
-
  background: black;
+
-
}
+
-
div.MenuBar ul li {
+
-
  font: arial, helvetica, sans-serif;
+
-
  display: block;
+
-
  padding: 0;
+
-
  margin: 0;
+
-
  font-size: 1.3em;
+
-
  float: left;
+
-
  background: black;
+
-
  text-align: center;
+
-
  width: 107px;
+
-
  position: relative; /* Sets the positioning context for each drop-down menu. */
+
-
}
+
-
div.MenuBar ul li a {
+
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
-
  font: arial, helvetica, sans-serif;
+
/*------------------------------------*\
-
  display: block;
+
NAV
-
  background: black;
+
\*------------------------------------*/
-
  height: 22px; /* Keep height + padding-top + padding-bottom sync with the menu bar height. */
+
#nav{
-
  color: #ffffff;
+
list-style:none;
-
  padding-top: 4px;
+
margin-bottom:0px;
-
  padding-bottom: 4px;
+
/* Clear floats */
-
  padding-left: 1em; /* Sets the left space between top-level items. */
+
float:left;
-
  padding-right: 1em; /* Sets the right space between top-level items. */
+
width:100%;
-
  text-decoration: none;
+
/* Bring the nav above everything else--uncomment if needed.
 +
position:relative;
 +
z-index:5;
 +
*/
}
}
-
 
+
#nav li{
-
/*------------------------------------------------------------------------------ Drop-Down Menus */
+
float:left;
-
div.MenuBar ul li:hover ul.DropDownMenu,
+
margin-right:0px;
-
div.MenuBar ul li a:hover ul.DropDownMenu {
+
position:relative;
-
  display: block;
+
-
  width: 12em; /* Drop-down menu width.
+
-
                  Use MenuTailor.css to customize. */
+
-
  height: 1em;
+
-
  padding: 1px; /* Sets the drop-down menu "effective border" width. */
+
-
  position: absolute;  
+
-
  top: 23px; /* Places the drop-down menu under the menu bar.
+
-
                Keep it sync with the menu bar height. */
+
-
  left: 0; /* Aligns the drop-down menu to its top-level item. */
+
-
  background-color: black; /* Selected item. */
+
-
  color: #FFFFFF;
+
-
 
+
}
}
-
div.MenuBar ul li:hover ul.DropDownMenu li a,
+
#nav a{
-
div.MenuBar ul li a:hover ul.DropDownMenu li a {
+
display:block;
-
  width: 10em; /* Keep it sync with the drop-down menu width.
+
padding:12px;
-
                            Use MenuTailor.css to customize. */
+
background:#000000;
-
  height: 1em;
+
text-decoration:none;
-
  padding-left: 0;
+
-
  padding-right: 0;
+
-
  background-color: black; /* Selected item. */
+
-
  color: #FFFFFF;
+
}
}
-
ul.DropDownMenu li a span {
+
#nav a:hover{
-
  display: block;
+
background:#000000;
-
  padding-left: 0.75em; /* Sets the left space of each drop-down menu item. */
+
text-decoration:underline;
-
  padding-right: 0.25em; /* Sets the right space of each drop-down menu item. */
+
-
  text-align: right; /* Aligns the >> symbol to the right. */
+
-
}
+
-
ul.DropDownMenu li a span span {
+
-
  float: left; /* Aligns the text (back) to the left. */
+
-
  font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
+
-
  height: 20px;
+
-
  color: #FFFFFF;
+
-
}
+
-
/*----------------------------------------------------------------------------------- Side Menus */
+
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu {
+
-
  display: block;
+
-
  width: 10em; /* Side menu width.
+
-
                  Use MenuTailor.css to customize. */
+
-
  padding: 1px; /* Sets the side menu "effective border" width. */
+
-
  position: absolute;
+
-
  top: -1px; /* Aligns the side menu to its drop-down menu item.
+
-
                Keep it sync with the side menu "effective border" width. */
+
-
  left: 13em; /* Places the side menu to the right of the drop-down menu.
+
-
                            Keep it sync with the drop-down menu width.
+
-
                            Use MenuTailor.css to customize. */
+
-
}
+
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a {
+
-
  width: 11em; /* Keep it sync with the side menu width.
+
-
                            Use MenuTailor.css to customize. */
+
-
  font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
+
-
  left: 13em; /* Places the side menu to the right of the drop-down menu.
+
-
                            Keep it sync with the drop-down menu width.
+
-
                            Use MenuTailor.css to customize. */
+
-
}
+
-
div.MenuBar ul li ul.DropDownMenu li ul.SideMenu li a span {
+
-
  padding-left: 1.5em; /* Sets the left space of each side menu item. */
+
-
  padding-right: 0.5em; /* Sets the right space of each side menu item. */
+
-
  text-align: left;
+
-
  font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
+
-
  left: 13em; /* Places the side menu to the right of the drop-down menu.
+
-
                            Keep it sync with the drop-down menu width.
+
-
                            Use MenuTailor.css to customize. */
+
-
}
+
-
/*----------------------------------------------------------------------------- Browser Specific */
+
-
* html div.MenuBar ul li a {
+
-
  float: left; /* Required for IE55 and IE6.
+
-
                            Breaks O9.
+
-
                            Hidden (* html) from non-IE browsers. */
+
-
}
+
-
* html ul.DropDownMenu li a:hover {
+
-
  cursor: hand; /* Required for IE55.
+
-
                  Hidden (* html) from non-IE browsers. */
+
-
}
+
-
ul.DropDownMenu li a:hover {
+
-
  cursor: pointer; /* Required for IE6 and IE7.
+
-
                      Hidding it (* html) from non-IE browsers breaks IE7!
+
-
}
+
-
* html div.MenuBar a:hover {
+
-
  text-decoration: none; /* Required for IE55 and IE6.
+
-
                            Hidden (* html) from non-IE browsers. */
+
-
}
+
-
* html div.MenuBar ul li table,
+
-
* html div.MenuBar ul li table td {
+
-
  border: 0; /* Required for IE55 and IE6.
+
-
                Hidden (* html) from non-IE browsers. */
+
-
}
+
-
/*------------------------------------------------------------------------------- Default Colors */
+
-
div.MenuBar {
+
-
  background-color: Menu;
+
-
  border-bottom: 1px solid ButtonShadow;
+
-
}
+
-
div.MenuBar a {
+
-
  background-color: Menu; /* Top-level unselected items. */
+
-
  color: MenuText;
+
-
}
+
-
div.MenuBar ul li:hover a,
+
-
div.MenuBar ul li a:hover {
+
-
  color: #ea7f16;
+
-
  background-color: Highlight; /* Top-level selected item. */
+
-
  color: HighlightText;
+
-
}
+
-
/*...............................................................................................*/
+
-
div.MenuBar ul li:hover ul.DropDownMenu,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu {
+
-
  background-color: ButtonShadow; /* Sets the drop-down menu "effective border" color. */
+
-
}
+
-
div.MenuBar ul li:hover ul.DropDownMenu li a,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a {
+
-
  background-color: Menu;  Drop-down menu unselected items.
+
-
                            Sets the drop-down menu "effective background" color. */
+
-
  color: MenuText;
+
-
}
+
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover a,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover {
+
-
  background-color: Highlight; /* Drop-down menu selected item. */
+
-
  color: HighlightText;
+
-
}
+
-
/*...............................................................................................*/
+
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu {
+
-
  background-color: ButtonShadow; /* Sets the side menu "effective border" color. */
+
-
}
+
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a {
+
-
  background-color: Menu; /* Side menu unselected items.
+
-
                            Sets the side menu "effective background" color. */
+
-
  color: MenuText;
+
-
}
+
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a:hover,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover {
+
-
  background-color: Highlight; /* Side menu selected item. */
+
-
  color: HighlightText;
+
-
}
+
-
/*-----------------------------------------------------------------------------------------------*/
+
-
/*Script-Free 3-Level Menu 1.2 Tailor
+
-
  www.CesarDaniel.info
+
-
/*-------------------------------------------------------------------------------------- General */
+
-
body {
+
-
  background:  style="color:#bb4400";
+
-
  color: black;
+
-
  margin: 0;
+
-
  border: 0;
+
-
  padding: 0;
+
}
}
-
 
+
/*--- DROPDOWN ---*/
-
div.MenuBar {
+
#nav ul{
-
  font: 13px arial, helvetica, sans-serif;
+
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). */
 +
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... */
 +
list-style:none;
 +
position:absolute;
 +
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
}
-
div.MenuBar ul {
+
#nav ul li{
-
  font: 13px arial, helvetica, sans-serif; /* Required for IE55. */
+
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
 +
float:none;
}
}
-
/*--------------------------------------------------------------------------------------- Colors */
+
#nav ul a{
-
div.MenuBar {
+
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
-
  background-color: black; /* Selected item. */
+
-
  color: #FFFFFF;
+
-
  border-bottom: 1px solid ButtonShadow;
+
}
}
-
div.MenuBar a,
+
#nav li:hover ul{ /* Display the dropdown on hover */
-
div.MenuBar ul li:hover ul.DropDownMenu li a,
+
left:0; /* Bring back on-screen when needed */
-
div.MenuBar ul li a:hover ul.DropDownMenu li a,
+
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a {
+
-
  background-color: black; /* Selected item. */
+
-
  color: #FFFFFF;
+
}
}
-
div.MenuBar ul li:hover a,
+
#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. */
-
div.MenuBar ul li a:hover,
+
background:#000000;
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover a,
+
text-decoration:none;
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover,
+
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a:hover,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover {
+
-
  background-color: #00b0e6; /* Selected item. */
+
-
  color: #FFFFFF;
+
}
}
-
div.MenuBar ul li:hover ul.DropDownMenu,
+
#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. */
-
div.MenuBar ul li a:hover ul.DropDownMenu,
+
text-decoration:none;
-
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu,
+
-
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu {
+
-
  background-color: ButtonShadow; /* Sets the drop-down and side menus "effective border" color. */
+
}
}
-
/*--------------------------------------------------------------------------------------- Widths */
+
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
-
/*
+
background:#000000;
-
 
+
-
/*
+
-
Menu Bar 1
+
-
Drop-Down Menu #2
+
-
*/
+
-
div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM4,
+
-
div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM4,
+
-
div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM4 li a,
+
-
div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM4 li a {
+
-
  width: 11em; /* Drop-down menu width. */
+
}
}
-
div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM5,
 
-
div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM5,
 
-
div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM5 li a,
 
-
div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM5 li a {
 
-
  width: 12em; /* Drop-down menu width. */
 
-
}
 
-
 
</style>
</style>
</head>
</head>
 +
</html>
</html>

Revision as of 01:35, 18 July 2012

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