Template:Caltech Menubar

From 2012.igem.org

(Difference between revisions)
Line 109: Line 109:
http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/,
http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/,
and the comment sections */
and the comment sections */
-
#nav,
+
#nav {
 +
  /* clear:both; */
 +
  float:left;
 +
  margin:0;
 +
  padding:0;
 +
  border-bottom:1px solid #000; /* black line below menu */
 +
  width: auto;
 +
  /* width:100%; */
 +
  /* font-family: Verdana, Geneva, sans-serif;  Menu font */
 +
  /* font-size:100%;  Menu text size */
 +
  z-index:1000; /* This makes the dropdown menus appear above the page content below */
 +
  position:relative;
 +
}
 +
 
 +
/* Top menu items */
#nav ul {
#nav ul {
-
    list-style: none;
+
  margin:0;
 +
  padding:0;
 +
  list-style:none;
 +
  float:right;
 +
  position:relative;
 +
  right:50%;
}
}
-
#nav {
+
#nav ul li {
-
    float: left;
+
  margin:0 0 0 5px;
 +
  padding:0;
 +
  float:left;
 +
  position:relative;
 +
  left:50%;
 +
  top:1px;
 +
  display: block;
}
}
-
#nav > li {
+
#nav ul li a {
-
    float: left;
+
  display:block;
 +
  margin:0;
 +
  padding:.6em .5em .4em;
 +
  /* font-size:1em; */
 +
  line-height:1em;
 +
  /* background:#A9A9A9;
 +
  text-decoration:none;
 +
  color:##E56717;
 +
  font-weight:bold; */
 +
  background: #000000;
 +
  border-bottom:1px solid #000;
 +
  width: auto;
}
}
-
#nav li a {
+
#nav ul li.active a {
-
display: block;
+
  color:#fff;
-
    height: 2em;
+
  background:#000;
-
    line-height: 2em;
+
-
    padding: 0 1.5em;
+
-
    text-decoration: none;
+
}
}
-
#nav ul {
+
#nav ul li a:hover {
-
    position: absolute;
+
  background:#36f; /* Top menu items background colour */
-
    display: none;
+
  color:#fff;
-
z-index: 999;
+
  border-bottom:1px solid #03f;
}
}
-
#nav ul li a {
+
#nav ul li:hover a,
-
    width: 80px;
+
#nav 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;
 +
}
 +
 
 +
/* Submenu items */
 +
#nav ul ul {
 +
  display:none; /* Sub menus are hiden by default */
 +
  position:absolute;
 +
  top:2em;
 +
  left:0;
 +
  right:auto; /*resets the right:50% on the parent ul */
 +
  width:auto /* 10em */; /* width of the drop-down menus */
 +
}
 +
#nav ul ul li {
 +
  left:auto;  /*resets the left:50% on the parent li */
 +
  margin:0; /* Reset the 1px margin from the top menu */
 +
  clear:left;
 +
  width:100%;
 +
}
 +
#nav ul ul li a,
 +
#nav ul li.active li a,
 +
#nav ul li:hover ul li a,
 +
#nav ul li.hover ul li a { /* This line is required for IE 6 and below */
 +
  /*font-size:.8em; .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 ul ul li a:hover,
 +
#nav ul li.active ul li a:hover,
 +
#nav ul li:hover ul li a:hover,
 +
#nav 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;
 +
}
 +
 
 +
/* Flip the last submenu so it stays within the page */
 +
#nav ul ul.last {
 +
  left:auto; /* reset left:0; value */
 +
  right:0; /* Set right value instead */
}
}
-
#nav li:hover ul {
+
 
-
    display: block;
+
/* Make the sub menus appear on hover */
 +
#nav ul li:hover ul,
 +
#nav ul li.hover ul { /* This line is required for IE 6 and below */
 +
  display:block; /* Show the sub menus */
}
}

Revision as of 16:57, 28 September 2012

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